Introduction to Atomic CSS with Examples - GeeksforGeeks

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.
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 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: htmlhtml<!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 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.
.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:
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:After Hover:Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.My Personal Notes
arrow_drop_upSave
After Hover:
After Hover:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS-Misc
HTML-Misc
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to set space between the flexbox ?
Design a web page using HTML and CSS
Form validation using jQuery
Search Bar using HTML, CSS and JavaScript
How to style a checkbox using CSS?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
How to set input type date in dd-mm-yyyy format using HTML ?
REST API (Introduction)
How to Insert Form Data into Database using PHP ?