What is Modular CSS?

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.

You will learn:

• The unlying patterns of all modular CSS methodologies
• How to write CSS that scales
• How to write CSS that is easy to understand and maintain
• How to write CSS that doesn't rely on context