Everyone who tried to convince me to use modular CSS was wrong, including me.

Eugene C
Eugene C
May 21, 2015 · 2 min read

Why do you need to think about modularity at all? You don’t until you have a rapidly changing, large project with some similarly designed elements placed on multiple pages. At this point, you think, “It would be nice to reuse the element CSS code.”


Demo and code.

Modularity to the rescue!

Independence is at the very core of modular CSS. There are best practices and methodologies structured around this idea.
BEM, OOCSS, SMACSS and many other approaches were born. Unique class names are a critical requirement for making independent modules. A module name is used as a prefix for all class names of module elements; it’s a type of scope.

Typical landing page

On a typical landing page, the page header has a logo, headline, authorization, button, and quote modules.

Button and quote modules might look like this:

<div class="button">
<span class="button-text">Get Grammarly</span>
<span class="button-subtext">It's free</span>
<div class="header-quote">
<h2 class="header-quote-text">
— Grammarly quickly and easily makes your writing better.
<div class="header-quote-logo header-quote-logo__forbes"></div>

Class names in CSS:


This approach is not ideal. Class name conflicts are still possible. Long name usage is not easy.

Modern tools will change this.

The Future

CSS transformation. The file is a module and the class names in the file are local.

// button.css
// headerQuote.css

In the post-processing step, replace class names in the CSS file to guarantee uniqueness on a global scope. Prefixes are a part of md5 file checksum.

// button.css
// headerQuote.css

Original and processed class names collections:

var button = {
button: ".ce5_button",
text: ".ce5_text",
subtext: ".ce5_subtext"
var headerQuote = {
quote: ".3d3_quote",
text: ".3d3_text",
logo: ".3d3_logo",
forbes: ".3d3_forbes"

The HTML will look somewhat like this:

<div class="{{button.button}}">
<span class="{{button.text}}">Get Grammarly</span>
<span class="{{button.subtext}}">It's free</span>
<div class="{{headerQuote.quote}}">
<h2 class="{{headerQuote.text}}">
— Grammarly quickly and easily makes your writing better.
<div class="{{headerQuote.logo}} {{headerQuote.forbes}}"></div>

What a bright future. And it’s here!

Demo time

A working example and code are published to Github. It uses React, but anything else can be used for templates — Handlebars, Express, Jade, etc. The only requirement is the ability to pass an object to the template and use it for classNames. That’s it.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store