Introduction to Atomic CSS with Examples

Last Updated : 01 Jul, 2020

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:

Refer to the Atomic CSS references page.
The type of class needed to be created can be entered and searched on this website.
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

<!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>

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:

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

<!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>

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: