30 Second Overviews of 4 Modular CSS Approaches

Lately I have been researching different techniques for keeping a codebase's CSS clean and dev-friendly as things go to scale. I am sure many of you, like myself, have run into crazy and confusing messes when creating an app with completely custom CSS. Many resort to frameworks such as Bootstrap because of this reason, but an application built on Bootstrap can still get messy when the app grows! Well believe it or not, but this has been a topic many front-end developers have discussed and evolved over the years. As web app organization has been improved, so have apprroaches to managing CSS as applications grow to scale.

Enter Modular CSS Approaches

Modular CSS is approach of breaking down webpage styling into smaller independent components that are consistent, reusable and hold on to its visual integrity in any part of the webpage. CSS modules are crafted based on a set of guidelines (or principles) custom to each approach in order to create a collection of reusable building blocks.

Modular CSS Approaches are:

• Guideline-based approaches for breaking down pages into generic reusable CSS code.
• Based on classes and consistent naming conventions.
• Easy to read and maintain.
• CSS Modules are generic, self-contained, and reusable.
• CSS Modules are modifiable, combinable, and scalable.

General Principles and Guidelines

• Avoid deeper nested CSS rules beyond one level.
• Restraint from the use of ID selector.
• Add classes to child elements so that you are not tied to specific mark-up.
• Separate layout and positioning from component CSS style.
• Prefix class names for clarity.

Advantage/Benefit of Modular CSS

• Flexibility and Scalability.
• Helps in specificity control, enforce naming conventions.
• Aids faster development and team efficiency.
• Make managing our CSS style a lot more consistent and comfortable.
• Reusability of CSS style code.
• Organized, easy to read and easy to maintain code.

There are several approaches developers have created to manage CSS as an app grows to scale. Below I will provide a 30 second overview to some of those approaches, but I would love to know YOUR OWN favorite approach.

1. OOCSS (Object-Oriented CSS)

OOCSS was launched in 2009 by Nicole Sullivan. It follows a similar concept as Object Oriented Programming, and separates objects as reusable patterns whose visual appearance is not determined by context. This was really the first CSS methodology to become widely adopted, and is still hugely influential today.

OOCSS follows two principals:

1. Separation of structure and presentation/skin.
   -- This means decoupling the structure of an element from its looks, and treating the looks like "skins".

2. Separation of container and content.
   -- This means to use styles that are specific to an element and don’t depend on location.

OOCSS Example:

<!-- HTML -->
<ul class="to-do">
    <li class="first-to-do-item">Combine my CSS files</li>
    <li>Run CSS Lint</li>
    <li>Minify my stylesheet</li>
</ul>


/* CSS */
.to-do {
    color: #FFF;
    background-color: #000;
}
.first-to-do-item {
    color: #FF0000;
}

2. DRY CSS (Don't Repeat Yourself)

The DRY CSS method, created by Jeremy Clarke, puts emphasis on keeping style separate from content, and avoiding specificity. DRY suggests grouping reusable CSS properties together, naming these groups logically, and then adding your selectors to those various CSS groups as needed.

DRY CSS Example:

<!-- HTML -->
<ul class="to-do">
    <li class="first-to-do-item">Combine my CSS files</li>
    <li>Run CSS Lint</li>
    <li>Minify my stylesheet</li>
</ul>


/* CSS */
#LIGHT-WHITE-BACKGROUND,
.to-do,
.light-white-background
{
  background-color: #fff;
  border-color: #ccc;
}

#MEDIUM-WHITE-BACKGROUND,
.to-do li:focus,
input:focus,
.medium-white-background
{
  background-color: #fff;
  border-color: #bbb;
}

3. BEM (Block, Element, Modifier)

BEM is a CSS class-naming system devised by devs at Yandex, the Google of Russia. The idea of BEM is to differeniate CSS class names with names that indicate their different roles. Using a BEM naming system can actually compliment OOCSS and other CSS architectures.

BEM naming breakdown:

1. Block
   -- An independent, modular UI component. (ex. navigation menu or search form.)

2. Element
   -- A component of a block, an element serves a singular purpose. (ex. nav menu links, list items)

3. Modifier
   -- CSS class that changes the default styling of a block or element

BEM Example:

/* BEM CSS Element Names */
.block { /* CSS properties */ }
.block--modifier { /* CSS properties */ }
.block__element { /* CSS properties */ }
.block__element--modifier { /* CSS properties */ }

4. SMACSS (Scalable and Modular Architecture for CSS)

SMACSS (which is just fun to pronounce ;p) was published with a detailed book in 2011 by Jonathan Snook. The approach organizes how to categorize css styles to improve organization. SMACSS naming convention could be thought as being simpler than BEM.

SMACSS CSS Categories:

• Base -- Style rules that set default CSS properties of an individual HTML element. (ex. H1, div, a, ul, li)

/* SMACSS Base Example */
h1 {
 font-size: 32px;
}
div {
  margin: 0 auto;
}
a {
  color: blue;
}

• Layout -- Style rules that are related to structural layout of web pages. These are prefixed with layout- or l-. (ex. containers, grid)

/* SMACSS Layout Example */
.layout-sidebar {
  width: 320px;
}
.l-comments {
  width: 640px;
}

• Modules -- Style rules for modular and reusable components.

/* SMACSS Module Example */
.call-to-action-button {
  text-transform: uppercase;
  color: #FFF200;
}
.search-form {
  display: inline-block;
  background-color: E1E1E1;
}

• State -- Style rules that specify the current state of something in the interface.

/* SMACSS State Example */
.is-hidden {
  display: none;
}
.is-highlighted {
  color: #FF0000;
  background-color: #F4F0BB;
  border: 1px solid #CBBD15;
}

• Themes -- Style rules that affect layout and modules, triggered by user preferences/actions.

SMCSS HTML Example:

/* HTML */
<section class="l-footer">
  <form class="search is-submitted">
    <input type="search" />
    <input type="button" value="Search">
  </form>
</section>

Conclusion

Many of us have run into projects where our CSS becomes overrun, crazy, and frustrating as the app gets bigger. All of these Modular CSS Approaches have been invented to help developers like you and me keep their style sheets organized and maintainable at scale. I hope you look into some of them, and start trying to implement one in future projects! There are many more floating around in the interwebs to explore.

What is YOUR favorite approach to keeping your CSS clean, organized, and maintainable?

Additional Resources

Get BEM
Smashing Magazine: An Introduction to OOCSS
VanSEO Design: DRY CSS Principals
Scalable and Modular Architecture for CSS (SMACSS)
WebFX: A Look at Some CSS Methodologies
Hackernoon: How to Implement Basic Modular CSS Guidelines
Sitepoint: CSS Architectures - Scalable and Modular Approaches
CSS Tricks: Methods to Organize CSS