If you are web design which is already familiar with CSS, you need to try other software from CSS. This can be a good opportunities if you find that CSS is not really as structured as other programming languages, and all examples of atomic design involve the organization of HTML. Therefore, CSS always update its software until it finds its way to CSS and has conduct to the rise of something called Atomic CSS (ACSS). ACSS is actually has been released for a while, but ACSS hasn’t got its popularity until early 2015. If you are interested with this new update from CSS you better check this out.
What Atomic CSS?
ACSS method makes the same property becomes possible to be used in different parts of a site by using one class for one CSS property. This means the possibility of duplicating that property in the style sheet is removed since the class itself is being used multiple times in the HTML. Moreover, it can also be a great way to quick way prototype layout and components on a web page.
It is a little surprise that from the syntax above we see that the code uses brackets for CSS class names before, even though it might look unnecessary, yet it is possible for complex atomic classes like pseudo classes and media queries. In fact, so far, this is the best way to write atomic classes.
What’s the Different between Inline Styles and ACSS
Mostly, there is no any major difference between both of them, but using inline CSS for each element will make one to repeat properties whereas with ACSS, a property is only written once. In fact, inlining critical CSS is still recommended, unless you are not adding properties to elements if they will be used over and over again.
Will this Cause Bloat in CSS
If there are unused class, ACSS can cause bloat. Therefore, to prevent this thing happens and to remove the unused styles for production, you can use a tool such as uncss or purify CSS. Atomizer by Yahoo is actually the best tool for ACSS which reads the atomic classes used in a document (or several all documents) and will automatically put the relevant CSS to your destination file. Atomizer works efficiently to add as one of your frontend processes.
Conclusion
Even though right now, mostly big companies such as Yahoo and Mailchimp have tried this software in their production code, but you can also try this product, especially if you are interested in Object Orientated CSS (OOCSS) it ACSS makes more sense as it further modularizes your code.
I am optimist that anyone who loves CSS will definitely love ACSS, in fact you can also try alongside something like Radium for React, even though it is quite different to CSS Modules, but you can make your CSS properties reusable by those tools.