search

jitendravyas / Q-A

7 stars 0 forks source link

Why not to use inline CSS instead Atomic CSS? Please example with an example #3

Open jitendravyas opened 7 years ago

thierryk commented 7 years ago

Please let me know if this section in the ACSS FAQ does not answer your question.

jitendravyas commented 7 years ago

@thierryk I have seen it already.

High specificity, verbosity, the inability to deal with pseudo-classes or pseudo-elements, and the fact that those bytes are not cached

Can you give any example of how High specificity, verbosity is bad thing with inline CSS?

thierryk commented 7 years ago

Can you give any example of how High specificity, verbosity is bad thing with inline CSS?

The specificity of inline styles is 1,0,0,0; meaning no selector composed of id, class, or type is capable of overwriting inline styles which leads to using !important in styles sheets, for any external style one needs.

But like with everything, inline styles have their used. For example, when you build a "standalone" component meant to live in a "hostile" environment (i.e. a page in which you do not know what styles your component may inherit or be affected by). Of if your all "CSS architecture" is based on an "inline styling approach" since in this case, pecificity is not much of a concern.

Regarding verbosity, it's the number of characters property/value pairs that are represented in the markup compared to short strings for classes that could replace them. You could see them as shortcuts that are cached in a styles sheet. Just imagine setting inline styles for properties that needs a vendor prefix, there would be many style redundancy in @style (the attribute) compared to what a class would represent in @class. It's just using more bytes than needed.