What is Modular CSS?

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:

  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

Video

Resources

The following resources were mentioned during the presentation or are useful additional information.

  • Harry Roberts' CSS Guidelines

    High-level advice and guidelines for writing sane, manageable, scalable CSS

  • SMACSS

    “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

    “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.”

  • OOCSS

    “a CSS ‘object’ is a repeating visual pattern, that can be abstracted into an independent snippet of HTML, CSS, and possibly JavaScript. That object can then be reused throughout a site.”

  • What is Modular CSS?

    I adapted this talk into an article. Covers all the same material.

Buzz and feedback

Here’s what was said about this presentation on social media.