loading...

Comment from a deleted article or podcast

Mihail, we meet again!

I can explain the difference. Inline styles and this methodology are different for a few main reasons.

  • Inline styles can be any value or property, leading to inconsistencies in padding/colors/etc
  • Inline styles complicate specificity, and are not responsive
  • Inline styles do not get cached, whereas your atomic classes would on subsequent pages

In terms of readability, there are ways to make it easier. For example, people think atomic css always has to be this:

<div class="container">
    <p class="text-black text-16 font-600">Blah</p>
    <p class="text-black text-16 font-600">Blah</p>
    <p class="text-black text-16 font-600">Blah</p>
    <p class="text-purple text-16 font-600">Purple Blah</p>
</div>

When in reality, I would do it like this:

<div class="container text-black text-16 font-600">
    <p>Blah</p>
    <p>Blah</p>
    <p>Blah</p>
    <p class="text-purple">Purple Blah</p>
</div>

Also, take a look at large-scale website, open up their minified CSS, and see how many times they duplicate properties like display: block or display: flex. It'll blow your mind how many times they redeclare properties like this.