DEV Community

Cover image for How to Build a SubAtomic Frontend Architecture

How to Build a SubAtomic Frontend Architecture

Max Antonucci on April 22, 2019

My current job has me handling a few things: Improve our site's accessibility standards Help people debug CSS issues, mostly Flexbox ones During ...
Collapse
 
felipperegazio profile image
Felippe Regazio

Nice article Max, thanks. I really dont know what to think about Atomic Css yet. I have no real background with atomic css but some small projects. Anyway, in order to try, i made a css atomic library which exposes a collection of css properties and values as atomic classes in a very simple way

.class-as-property-name:value

Its useful to see the atomic css approach working in a nutshell

I called the lib "HelpmateCss", and i will leave the link just in case

felippe-regazio.github.io/helpmate...

Collapse
 
tomhermans profile image
tom hermans

Thanks for this article. Been re-thinking my way of working and somehow landed too on a utility classes approach. Instead of re-inventing the wheel went with Tailwind too and I love it. The initial idea is indeed "what is this?" but it makes so much sense. Good to see that others tried and proved this approach to be useful indeed.

Collapse
 
applicafroguy profile image
Sivuyile Magutywa

I need to visit my CSS-Styles, Atomic CSS is way more readable than BEM, though I don't like writing to many classes in HTML, So thank you for this Article. Naming CSS classes is very hard for me.

Collapse
 
maxwell_dev profile image
Max Antonucci

I agree, it definitely helps make them more readable from a "what will it actually look like" perspective. BEM styles could have any number of CSS properties attached, while Atomic classes are more explicit about things like padding, coloring, even responsive styles.

CSS Tricks recently wrote an article about ways to group these classes to help readability even more, is worth a look - css-tricks.com/could-grouping-html...