Top 5 Css Methodologies In 2021

Css is very difficult to manage when you are dealing with a large system, this is because Everything in css is Global

  

<button class="button button-action">
    Load More
  </button>

  <!-- css -->

  .button {
    background: blue;
  }
  .button-action {
    background: pink;
  }

  // then maybe after 3 months on line 1299...
  // another developer wants a call to action button
  // and he declares another class with button-action with background color red

  .button-action {
    background: red;
  }

  

you might be wondering what will be the background color of the button, well like i said earlier everything in css is Global, what will happen is that all three background properties will move to the top of the Scope like this...

  1. background: blue;
  2. background: pink;
  3. background: red;

Then the browser will go through the code and apply all of them. Yeah all of them, and then decide to use the last one

  

// the browser will read the code like this from top to bottom

<!-- css -->

background: blue; // oh here is a background with color of blue, use this.

background: pink; // wait, don't use that, here is another background with color pink, definately use this.

background: red; // what's wrong with this developer, here is another background with color red, jeez, is there another one?. nope, then use this.

&lt;!-- Html --&gt;

&lt;button class="button button-action"&gt;
Load More

>/button>

Css red background
Browser will use the red background

The problem of managing css is what every developer must face one way or the other, not to mention (one of the hardest thing in css) naming classes, along the line you are going to run out of class names, that's where css methodologies comes in play(sticking to a particular naming convention)...

What are css methodologies?

css methodologies are systems that are formaly documented down that help us to auhor/write css as isolated modules, rather than just some long indivisible code.

Top 5 Css Methodologies in 2021

1. Atomic Css

Atomic Css is a collection of single purpose styling units that fits well with components in templated framewoks...

Benefits of using Atomic Css
  1. Moves specifity out of the way
  2. Improves performance
  3. Allows to share content and assets easily

Further reading
  1. Atomic css frequently asked questions
  2. Atomic Css Quick Start

2. BEM

BEM stands for - BLOCKS, ELEMENTS and MODIFIERS

Block:
This are standalone entity that is meaningful on its own

Element:
A part of a block that has no standalone meaning (it must be used within a block)

Modifier:
A flag on a block or element, basically we use this to change the appearance or state of an element.

Benefits of using BEM
  1. Modularity
  2. Reusability
  3. Structure

Further reading
  1. Intro to BEM
  2. BEM
  3. BEM naming convention

3. ITCSS

ITCSS - stands for INVERTED TRIANGLE CSS

This is a methodolgy for structuring your css files in the best and stress free way as possible.

Benefits of using ITCSS
  1. Less thinking on naming things
  2. Reusability
  3. Flexibility

Further reading
  1. ITCSS: Scalable and Maintainable Css Architecture
  2. Intro to ITCSS for web developers

4. SMACSS

SMACSS stands for - SCALABLE and MODULAR ARCHITECTURE for CSS

Benefits of using SMACSS
  1. Scalable
  2. Ease of Reading

Further reading
  1. Smacss guide

5. OOCSS

OOCSS stands for - OBJECT ORIENTED CSS

Two main principles of OOCSS
  1. Separating Structure From Skin
  2. Separating Container And Content

Benefits of using OOCSS
  1. Maintainable stylesheets
  2. Faster websites
  3. Easier to modify common styles

Further reading
  1. Object oriented Css
  2. Intro to object oriented css on smashingmagazine

This list is based on the survey from The state of css 2020, and it is intended to show you the css methodologies that would probably be used in 2021

Another css methodology that is currently on a fast rise is the Cube Css

Note: There is no best css methodology, the one you decide to use depends on you and the type of your project...

Thanks for reading