Introduction to Atomic CSS with Examples

Atomic CSS aims to solve some of the traditional CSS issues using classes which are single-purpose styling units. Atomic CSS uses immutable classes that have complete responsibility of applying a unit style to the selected component of the UI. In short, Atomic CSS is One Rule for One Styling. It tries to makes the styling more variable in a predictable manner.

Problem with traditional CSS: CSS is widely used to provide styling to web applications. CSS Pre-Processors like Sass and LESS are used to make styling simple. However, during the development of a huge web application, there is a lot of repetition of styles used in the whole application. There are several reasons for the repetition of the CSS code, such as:

  • Different developers working on different components may write their own CSS Code with their preferred styling
  • Components with minute difference in styles have a major attribute of styling duplication in them

Along with these problems, building huge web applications creates confusion among developers due to the concern of overriding CSS. This makes development more time consuming and inefficient.

Problems solved by Atomic CSS The following problems are solved by using Atomic CSS:

  • Reduction in redundancy or duplication of code.
  • Confusion of Overriding of the CSS.
  • Problems regarding different developers working on different parts of application.
  • Reduction of time consumed in debugging of the styling.

Maintaining consistency in Atomic CSS classes: The consistency of classes in Atomic CSS can be maintained by following a specific styling when developing the classes. This can be done using the following steps:



  1. Refer to the Atomic CSS references page.
  2. The type of class needed to be created can be entered and searched on this website.
  3. The website would return the class name to be used as a result and this can be used in the code by all developers in order to maintain consistency in code.

Example 1: This example demonstrates a simple working example of Atomic CSS.

  • Step 1: Create a HTML document and add the starter code for the website. Create a stylesheet and link it to this HTML document.

  • Step 2: In the body, add a division tag as well as heading tag with text in it with the classes as shown below: 

    html

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            GfG Atomic CSS Example
        </title>
        <link rel="stylesheet" 
            type="text/css" href="styles.css">
    </head>
      
    <body>
        <div class="Bgc(#00FF00)">
            <h1 class="C(#FFFFFF)">
                Geeks For Geeks
            </h1>
        </div>
    </body>
      
    </html>

    chevron_right

    
    

  • Step 3: Define the classes used in the HTML page in the stylesheet and add the required styling corresponding to the name of the class.

    .Bgc\(\#00FF00\) {
      background-color: #00ff00;
    }
    .C\(\#FFFFFF\) {
      color: #ffffff;
    }
    

    As the class name suggests, Bgc(#00FF00) is used to add green (#00FF00) as the background color, and C(#FFFFFF) is used to add white (#FFFFFF) as the color of the text. This example can now be run on a browser.

Output:

Example Atomic CSS Output



Pseudo-classes: These are elements added to a selector in order to specify a particular state. Some of the Pseudo classes with their corresponding suffix maps are as follows:

Pseudo Class Suffix Map
:focus f
:active a
:hover h
:checked c

Example 2: In this example a pseudo-class is used with Atomic CSS.

Step 1: Create a HTML document and add the starter code for the website. Create a stylesheet and link it to this HTML document.

Step 2: Add a container class which has the first child division containing the header text.

html

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        GfG Atomic CSS Pseudo
        Class Example
    </title>
    <link rel="stylesheet" 
        type="text/css" href="./styles.css">
</head>
  
<body>
    <div class="container">
        <h1 class="D(1):h">
            Geeks For Geeks
        </h1>
    </div>
</body>
  
</html>

chevron_right


Step 3: Define the D(1):h class used in the HTML page in the stylesheet and add the required styling corresponding to the name of the class.

.D\(1\)\:h:hover {
  background-color: green;
  color: white;
}

As the class name suggests, D(1) is the first child division inside the container. Adding a hover pseudo class to it, like D(1):hover, and representing it as D(1):h makes it conform to the Atomic CSS syntax. Thus using the :hover pseudo-class, the given styling class is applied whenever the element is hovered over.

    • Before Hover:
      Atomic CSS without Hover
    • After Hover:

      Atomic CSS without Hover

    full-stack-img




    My Personal Notes arrow_drop_up

    Check out this Author's contributed articles.

    If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

    Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.