re: Tachyons, the best library you're not using. VIEW POST

VIEW PARENT COMMENT VIEW FULL DISCUSSION
 

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.

 

Inline styles can be any value or property, leading to inconsistencies in padding/colors/etc

Yes, but what happens when your library has text-16, text-17, text-19...?

Inline styles complicate specificity

nah

, and are not responsive

That is so true!

your atomic classes would on subsequent pages

But their use isn't cached, it's in the dynamic markup.
Sidenote: Yes, I know the pre-parsed css has better performance. Yes, I know there is a performance advantage when your markup is generated on the client vs actually doing inline styles for all the nodes in JS

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

Couldn't you just put the inline text color up on the div as well?πŸ€”

duplicate properties like display: block or display: flex

You mean duplicate them where they were already applied? Because that's a sign of having no idea what they're doing.

Whereas if by duplicate you mean it is a property of a thousand classes, that is to be expected, they might have a thousand different flex container components.

code of conduct - report abuse