5 CSS methodologies you need to know in 2022

Created February 22, 2022

In large, complicated, rapidly-iterated systems, CSS is notoriously difficult to maintain. The lack of a built-in scoping mechanism in CSS is one of the reasons.

In CSS, everything is global. Until CSS gets its native scoping mechanism, we need to devise our own system for locking down styles to specific sections of an HTML document. CSS methodologies are the solution.

In this article, we will take a look at the CSS methodologies you need to know in 2022!

Object-oriented CSS

OOCSS concepts help us write components that are flexible, modular and interchangeable.

For example, the style of your button elements might be set via two classes that you have given the class of:

.button — Provides the button’s basic structure.
.grey-btn — Applies colors and other visual properties.

CSS:

<pre class="highlight css">```  
<span class="nc">.button</span> <span class="p">{</span>  
    <span class="nl">box-sizing</span><span class="p">:</span> <span class="n">border-box</span><span class="p">;</span>  
    <span class="nl">height</span><span class="p">:</span> <span class="m">50px</span><span class="p">;</span>  
    <span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span>  
<span class="p">}</span>

<span class="nc">.grey-btn</span> <span class="p">{</span>  
    <span class="nl">background</span><span class="p">:</span> <span class="m">#EEE</span><span class="p">;</span>  
    <span class="nl">border</span><span class="p">:</span> <span class="m">1px</span> <span class="nb">solid</span> <span class="m">#DDD</span><span class="p">;</span>  
    <span class="nl">box-shadow</span><span class="p">:</span> <span class="n">rgba</span><span class="p">(</span><span class="m">0</span><span class="p">,</span> <span class="m">0</span><span class="p">,</span> <span class="m">0</span><span class="p">,</span> <span class="m">0.5</span><span class="p">)</span> <span class="m">1px</span> <span class="m">1px</span> <span class="m">3px</span><span class="p">;</span>  
    <span class="nl">color</span><span class="p">:</span> <span class="m">#555</span><span class="p">;</span>  
<span class="p">}</span>




HTML:

```  
 class="button grey-btn">  
    Click me!  


```  
```



 2. Atomic CSS 
---------------

[Atomic CSS](https://acss.io/) is the approach to CSS architecture that favors small, single-purpose classes with names based on visual function.

Example:

Colors are set using hexadecimal values. Alpha transparency is created by appending the opacity value to the hex color.

```  
```  
 class="Bgc(#0280ae.5) C(#fff) P(20px)">  
    Lorem ipsum

``` ``` 3. BEM -------- [Block Element Modifier](http://getbem.com/) is a methodology that helps you to create reusable components and code sharing in front-end development. Example: ```

```  
 class="loginform loginform--errors">  
     class="loginform__username loginform__username--error">   
        Username  type="text" name="username" />  
      
     class="loginform__password">  
        Password  type="password" name="password" />  
      
     class="loginform__btn loginform__btn--inactive">  
        Sign in  
      


```  
```



The `.loginform` class is a block composed of three elements:

ElementPurposeloginform\_\_usernameTakes in the usernameloginform\_\_passwordTakes in the passwordloginform\_\_btnAllow the user to submit the web form

 4. SMA CSS 
------------

[SMACSS](http://smacss.com/) is a way to examine your design process and as a way to fit those rigid frameworks into a flexible thought process.

Example:

Let’s say our layout is called `.l-footer`. We have a search form module inside it. The search form has already been submitted at least once by the user.

```  
```  
 class="l-footer">  
     class="search is-submitted">  
         type="search" />  
         type="button" value="Search">  
      


```  
```



 5. Systematic CSS 
-------------------

[Systematic CSS](https://www.yumpu.com/en/document/read/47573458/systematic-css) shares many of the principles and ideas you can find in OOCSS, BEM, SMACSS, SUIT CSS, and other CSS methodologies. Systematic CSS is meant to be a simpler alternative to existing CSS methodologies.

Example:

Here’s the markup for two widgets that render a navigation bar and search form:

```  
```  
   
 class="NavBar">  
     
       href="./">Home  
       href="about.html">About  
       href="learn/">Learn  
       href="extend/">Extend  
       href="share/">Share  
     


   
 class="SearchBox">  
    action="search.html" method="get">  
        for="input-search">Search  
        name="q" type="search" id="input-search" />  
        type="submit">Search  
      


```  
```



Content — in the form of widgets and naked HTML elements — is then placed within the layout. Finally, modifier classes are added to vary the default presentation of things.

 Conclusion 
------------

By providing a class-based approach for dividing up large web designs into many small, modular, distinct components, all CSS techniques address the scalability and maintainability challenge in CSS.

Each UI module can be reused throughout a design and even ported from one project to the next if the CSS methodologies are the same. CSS approaches do a lot more than just solving the CSS scalability issue.

> Origninally posted at [genicsblog.com](https://genicsblog.com/five-css-methodologies-you-need-to-know-in-2022)

###  Thank you for reading 

If you liked this post, subscribe to [my newsletter](https://abhirajbhowmick.substack.com) to never miss out on [my articles](https://abhiraj.co), product launches, and tech news!