Styles encapsulation

[giuseppeg]

Hey Jarno, great docs and tips!
You're one of the few guys who mention inheritance, kudos to you :)

fwiw we implemented a styles encapsulation feature in suitcss preprocessor that tries to solve this issue by making inheritance opt-in and predictable i.e. you have to specifically set inherited properties to inhert like font-size: inherit.

The idea doesn't require a preprocessor but obviously with one you can automate the process.

I just wanted to mention it, up to you if you want to include a paragraph about this.

[nhavar]

CSS Modules is also worth mentioning from the pre-processor front. You can define what classes are global or local as well as compose classes and it can work with SASS. It allows you to keep class names simple because at the end of the day it hashes them to avoid conflicts.

[jareware]

@giuseppeg thanks!

I took a look at suits-preprocessor and the encapsulate-option indeed seems interesting! The example code (http://codepen.io/simonsmith/pen/BLOyAX) was a good way to explain it. So it seems like it'd be a way to automate what I describe in this section with:

Just brute-forcing it: if you include a CSS reset for every element of every component, and attach it to a selector that always wins over the 3rd party ones, you're golden.

Right?

[jareware]

@nhavar that's a good point, I should have brought up CSS Modules as several people have pointed out to me. I didn't cover them because I consider them to be part of the CSS-in-JS movement which I purposefully ruled out of scope for this specific article, but due to the isolation properties you mention it definitely is closely related, and should get a mention.

I'll fix this in a "2nd edition" which I can push out soon, I hope. :) Thanks for the feedback!

[giuseppeg]

@jareware exactly, a mix of that point and all: initial.
With a naming convention like BEM or SUIT specificity shouldn't be a big issue until you use 3rd parties code that doesn't adhere to those methodologies :)

In this case CSS-in-JS like solutions or ShadowDOM are the only way. FYI I recently learnt that inheritance still applies to ShadowDOM i.e. elements in the ShadowDOM inherit properties like color, font-size from the real DOM but elements like date or range input just reset inherited props like we do in suitcss.

fwiw CSS Modules work also with other languages thanks to postcss-modules