Atomic CSS can improve your page loading performance and hence the UX.
When it comes to User Experience it is also important that how faster your Ul loads. Here is where the modern approach called Atomic CSS comes into the game. It is one way that can drastically reduce your page loading time and improve the performance.
What is Atomic CSS?
Atomic CSS is an approach of writing CSS classes with single rule for each declaration. It is also called as Functional CSS as almost each rule defines a particular function. Atomic classes solves small and single purpose with better naming visualization. Atomic CSS uses immutable classes that have complete responsibility of applying a unit style to the selected component of the UI.
Example of a regular CSS class
.ContentDiv {
float:left;
font-size: 11px;
border-radius: 3px;
}
In HTML we call it like this,
<div className="ContentDiv">Hello world regular</button>
Converted to Atomic CSS as rules to serve Single Purpose
.left-align{
float:left;
}
.fs-11{
font-size: 11px;
}
.br-3{
border-radius: 3px;
}
In HTML we need to call like this,
<div className="left-align fs-11 br-3">Hello world regular</button>
This way when an another component needs only one of the rules say font size you can use only the fs-11 class and you are eliminating the other css rules to dump when a component actually doesn’t need.
The Advantages of Atomic CSS are,
- 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.
The challenge with Atomic CSS is keeping consistency in naming conversion. If you are a single developer or one man that handle all your CSS stuff then it is easier but when you work as a team and multiple developer work on CSS stuff then it is going to be bit harder. But you can overcome this challenge eventually after multiple projects.
At DART we do best practices with Atomic CSS and other performance bases work around with both front and backend. We used to take care of this from the start of project which helps us to deliver best performing products both on Web and Mobile.