Isn't using inline css is more convenient than atomic css and we get all the benefit of atomic too?

jitendravyas / Q-A

7 stars 0 forks source link

Open jitendravyas opened 6 years ago

jitendravyas commented 6 years ago

ACSS

<div class="D(f) W(20%) C(#666)">
    Preview
</div>

Inline Styles

<div class="segment-box" style="display:flex; width:20%; color: #666;">
    Preview
</div>

<style>
.segment-box {background-color:#ccc}
</style>

No tooling required. No need to learn new naming convention. For things like pseudo-classes or pseudo-elements a class can be used.

VinSpee commented 6 years ago

There are several reasons.

variables. With atomic css I can set a custom color theme and have access to them throughout my project.
pseudo-classes and pseudo-elements are important, and saying "a class can be used" means you're no longer using inline-css and now have to thing about organizing those.
responsive web design. It's simply not possible to use media queries with inline CSS
vendor prefixes. I would certainly not want to write out all of the vendor prefixes for things like flexbox.