A presentation at Devsigner Con 2016 in in Portland, OR, USA by Scott Vandehey
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 following resources were mentioned during the presentation or are useful additional information.
High-level advice and guidelines for writing sane, manageable, scalable CSS
“At the very core of SMACSS is categorization. By categorizing CSS rules, we begin to see patterns and can define better practices around each of these patterns.”
“BEM is a way to modularize development of web pages. By breaking your web interface into components… you can have your interface divided into independent parts, each one with its own development cycle.”
I adapted this talk into an article. Covers all the same material.
Here’s what was said about this presentation on Twitter.