Home » What is Devsigner » Sessions » Form Submission: Submit A Session

What is Modular CSS?

Slides and resources

Modular CSS is a concept that will help you write more maintainable and readable code. It is compatible with any and all CSS preprocessors and naming conventions. You may have heard of BEM, SMACSS, or OOCSS, which are methodologies that all share the key concepts of modular CSS.

Modular CSS means you avoid ever writing special snowflake CSS that's only used in one spot. It helps you standardize your code and look for patterns. It helps you dry up your code and ensure that each class has a clearly defined responsibility, and help you avoid overlap and conflicts between classes.

Essentially, if you're ever going to write CSS at scale, you owe it to yourself to understand what modular CSS is, and how it can dramatically improve the readability and maintainability of your code.

This talk is aimed at intermediate level front-end developers. We won't be covering any advanced CSS, so as long as you know the basics, you should be able to follow along just fine.

Session takeaways: 

1. The unlying patterns of all modular CSS methodologies

2. How to write CSS that scales

3. How to write CSS that is easy to understand and maintain

4. How to write CSS that doesn't rely on context

Scott Vandehey

Scott is a CSS ninja from Portland, Oregon with over 15 years of experience building sites and apps. Between his education in graphic design and his experience working alongside programmers, 
he specializes in bridging the gap between design and development.

Most recently, he's launched Friday Front-End, a twitter account and newsletter that shares daily front-end development tips and links.