CSS Methodologies

Coming from how CSS works, the problem with CSS is that they rely on developers to manually maintain them with a high degree of accuracy to be effective. The language is simple and easy to learn, the hard part is how to write CSS in a maintainable and scalable way.

CSS methodologies are naming conventions used by developers to better manage CSS which lacks a built-in scoping mechanism.

Methodologies are mentioned below:

1. BEM (Block — Element — Modifier )

BEM is a methodology, a naming system. Created by the team at Yandex. Elements are namespaced using the Block names and separated by __ (double underscores) whereas the Modifiers are separated by — (double hyphens).

• Block: Standalone entity that is meaningful on its own. (header, container, menu)
• Element: A part of a block that has no standalone meaning and is semantically tied to its block. (menu item, list item, checkbox caption)
• Modifier: A flag on a block or element to change appearance or behavior. (disabled, highlighted, enabled, checked)

// Block Element
.form {
}
// Element 
.form__submit {
}
// Modifier
.form--theme-xmas {
}

2. OOCSS (Object oriented CSS)

Object oriented CSS was proposed by web developer Nicole Sullivan in 2008. Her goal was to make dynamic CSS and more manageable. The purpose of OOCSS is to encourage code reuse and, ultimately, faster and more efficient stylesheets that are easier to add to and maintain. Two main principles of OOCSS are:

• Separate structure and skin: This means to define repeating visual features (width, height, margins, paddings, etc) as separate skins (colors, fonts, shadows, gradients, etc) that you can mix-and-match with your various objects to achieve a large amount of visual variety without much code.
• Separate container and content: This means rarely use location-dependent styles. An object should look the same no matter where you put it.

<a href="#" class="btn btn-small">Click me!</a>
<a href="#" class="btn border btn-medium">Click me!</a>

3. SMACSS (Scalable and Modular Architecture for CSS)

The core of SMACSS is categorization. By categorizing CSS rules, we begin to see patterns and can define better practices around each of these patterns. There are five types of categories:

• Base: Exclusively single element selectors, attribute selectors, pseudo-class selectors, child selectors, or sibling selectors.
• Layout: Divide the page into sections.
• Modules: Reusable, modular parts of our design.
• State: Describe how a module or layout looks on screens.
• Theme: Describe how modules or layouts might look.

4. Atomic CSS

Atomic CSS is not opinionated; it simply defines a set of classes representing single-purpose styling units. Atomic CSS is for developers who see the benefits of styling “outside of style sheets” — who want to write markup and styles in one place while benefiting from Atomic architecture.

Atomic CSS is starting to gain ground:

• Highly granular, highly reusable styles, instead of rules for every component
• Greatly reduces specificity conflicts by using a system of low-specificity selectors
• Allows for rapid HTML component development once the initial rules are defined
• The lower specificity of classes also allows for easier overrides

<button class="b1 b--green bg-green white br-5 ma-10 f3 ttu fw-400 padding-10">
  Click Me!
</button>