Intro

Before we get going, let us know what is CSS methodologies. A CSS methodology is a set of standards for writing modular, reusable, and scalable code. CSS is an easy language to write, but without a consistent standard, the code gets bloated almost as fast as it is written. Because each CSS declaration is written on a single line, files quickly get large, making maintenance difficult.

Many CSS methodology best practices have been developed by groups of programmers from all around the world to solve these and other CSS implementation issues. Each has a particular purpose, advantages, and disadvantages.

Instead of frameworks or libraries, they are CSS code rules that encourage programmers to follow standards that make code easier to generate and maintain and reduce the number of hours required for the development. Because these techniques are not mutually exclusive, they may be used in a way that best suits developers.

This article will go through the benefits and drawbacks of some of the most popular CSS techniques, such as object-oriented CSS, Atomic CSS (related to atomic design), BEM, and SMACSS.

Object-Oriented CSS (OOCSS)

In a nutshell: Divide layout into objects, and then abstract their CSS into modules. Locating the page's objects and separating the structural and graphical CSS styles into two declaration blocks are both required for OOCSS. Since changes only need to be made once and the blocks may then be used by other components, consistency can be improved.

Declarative blocks are applied to objects using single-class selectors to get around specificity issues. The objects remain constant throughout since the content and container are segregated in this way. Classes also distinguish CSS from markup. For the title instead of h2, it is feasible to switch from a heading with h2 class="title" to one with h3 class="title" without changing the CSS.

To further separate HTML and CSS, class names should not include property values. A class 'blue' would require renaming in HTML and CSS if the colour changed.

Using OOCSS a button's CSS and markup can be defined as:

.button { padding: 10px 16px; }
.primary-skin { color: blue; }
.secondary-skin { color: green; }
<button class="button primary-skin">primary skin button</button>
<button class="button secondary-skin">secondary skin button</button>
<div class="primary-skin">primary skin div</div>

OOCSS contains a variety of useful concepts, but because there are no rules, diverse interpretations may occur, resulting in differences. However, it has influenced harder methods.

Atomic CSS (ACSS)

Briefly stated: Create a class selector for each repeated CSS declaration. ACSS encourages developers to define specific class selectors for each reusable declaration. Although ACSS advocates the usage of CSS property values in class names, OOCSS opposes it. The process of applying ACSS styles to elements is as follows:

.mb-sm { margin-bottom: 16px; }
.mb-lg { margin-bottom: 32px; }
.color-blue { color: #1e90ff; }
<div class="mb-lg">
 <p class="mb-lg color-blue">Blue text</p>
 <img class="mb-sm" />
</div>

CSS is created automatically in certain programmatic ACSS implementations depending on classes or attributes provided by users to the HTML. An Atomizer is one such tool that allows the previous HTML to be redefined as:

<div class="Mb(32px)">
 <p class="Mb(32px) C(#1e90ff)">Blue text</p>
 <img class="Mb(16px)" />
</div>

This would automatically generate the following CSS upon build:

.Mb\(16px\)   
{ margin-bottom: 16px; }
.Mb\(32px\)   
{ margin-bottom: 32px; }
.C\(#1e90ff\) { color: #1e90ff; }

The biggest advantage of ACSS is how simple it is to keep consistent code and avoid creating classes for components that just need a single CSS rule.

However, using ACSS alone might result in an overwhelming number of classes and bloated HTML files. Therefore, it is typical to exclusively apply ACSS principles when developing helper classes that include dependable, reusable declaration blocks.

Block Element Modifier (BEM).

short and sweet: Give classes a uniform naming convention. According to BEM, layouts should be divided into blocks and nested elements. To recognize and apply deviations from a block or element's default appearance, modifiers should be utilized.

When applying CSS declarations, a single class name with the formats block-name for blocks and block-name element-name for elements is used, separated by two underscores. For improved readability, modifier names are prefixed with an underscore or two hyphens, such as block-name element-name modifier-name or block-name element-name—modifier-name, and then they are attached to classes. If an item can live independently of its ancestors, it is a block; otherwise, it is an element.

Blocks can have nested blocks and elements, but elements cannot. Modifiers must be used alongside block and element classes, not instead of them.

BEM can be applied to a list, where list-block--inline and list-block__item--active display lists horizontally and highlight items respectively:

<ul class="list-block list-block--inline">
<li class="list-block__item">Item 1</li>
 <li class="list-block__item">Item 2</li>
</ul>
<ul class="list-block">
 <li class="list-block__item list-block__item--active">Item 1</li>
 <li class="list-block__item">Item 2</li>
</ul>

The BEM naming standard produces CSS that behaves consistently and is simple to manage, maintain, and scale. BEM has drawbacks, too, such as the challenge of coming up with class names for deeply nested objects, the bloated HTML and absurdly lengthy class names that can occasionally result, as well as the lack of consistency brought on by the inability to exchange CSS between objects.

Scalable and Modular Architecture for CSS (SMACSS)

To sum it up: For improved efficiency and organization, divide CSS code among numerous files. The five types of CSS that makeup SMACSS—base, layout, module, state, and theme—are typically broken up into different files. The majority of base styles are applied via element selectors, replacing the default styles:

h1 { font-size: 20px; }
a { text-decoration: none; }

Layout styles are for major objects like headers and sidebars. They are applied using IDs or classes with generic helper declarations optionally prefixed with l-:

#header { height: 50px; }
.l-right { float: right; }

Smaller, reusable items with their own files, like buttons and lists, can use module styles. Classes are used to apply them, and nested item classes are frequently prefixed with the ancestor class:

.list { … }
.list--icon { … }
.list--text { … }

State styles are for changeable states, like hidden or disabled. They are commonly applied with class names prefixed with is- or has- and chained to other selectors:

.button { … }
.button.is-disabled { … }

The visual layout can be changed using theme styles, which are optional. SMACSS offers well-structured CSS code that is sensibly divided among several files. However, by enabling IDs and depending on selector chaining for state and some layout declarations, SMACSS does pose specificity traps.

Conclution

These are the three most popular CSS methodologies. Nevertheless, you can create your new CSS methodology, in the next article I will show how you can create your own methodologies that suit your need.

Catch me in the next article 😎