2 ms·

Styles get stupid when they're not local, it just creates a huge hassle as projects scale. The only answer is a css file per component, or css embedded within

Styles get stupid when they're not local, it just creates a huge hassle as projects scale. The only answer is a css file per component, or css embedded within the component directly. This css has to have a preprocessor or you won't be able to maintain a functional design system or any stylistic consistency. So you're stuck with sass/less/tailwind regardless. Style classes are IMO the neatest way to inject styles, having elements get styles based on html structure makes code brittle and hard to reason about. If you need an example of this try playing with bootstrap forms.

nilslindemann 3y ago
@layer has made all this much easier using raw CSS. One creates sensible global defaults in a `@default {...}` layer, and then they overwrite in a `@custom {...}` layer.
Spivak 3y ago
Yep, the only even kinda maintainable CSS ends up being tailwind but in another file. <div class="unique-component-name"> <input class="unique-component-name-input" /> <p class="unique-component-name-text">Blah</p> </div> <div class="unique-component-name unique-component-name-variant1"> ... .unique-component-name { ... The cascading in HTML makes the thing that should be easy, creating variants with slight tweaks the most painful thing.
LocalPCGuy 3y ago
I actually agree with most of your comment. Just not that Tailwinds is the best way to actually do the styling. I don't have any issue having some form of compilation/processor step that takes colocated CSS and creates a final output, that isn't my objection to Tailwinds, in case that wasn't clear in my original comment. I prefer to actually use CSS, most often via style classes. And I did not say to base styles on html structure - you are correct, that is brittle and actually one of the things I often ask about in FE interviews as a way of determining skill level. I said that good html structure makes CSS much easier, if your structure is bad, it can significantly compound the amount of CSS needed in order to achieve the desired outcome. So I believe there is a significant distinction in those two statements.

nilslindemann 3y ago

@layer has made all this much easier using raw CSS. One creates sensible global defaults in a `@default {...}` layer, and then they overwrite in a `@custom {...}` layer.

Spivak 3y ago

Yep, the only even kinda maintainable CSS ends up being tailwind but in another file. <div class="unique-component-name"> <input class="unique-component-name-input" /> <p class="unique-component-name-text">Blah</p> </div> <div class="unique-component-name unique-component-name-variant1"> ... .unique-component-name { ... The cascading in HTML makes the thing that should be easy, creating variants with slight tweaks the most painful thing.

LocalPCGuy 3y ago

I actually agree with most of your comment. Just not that Tailwinds is the best way to actually do the styling. I don't have any issue having some form of compilation/processor step that takes colocated CSS and creates a final output, that isn't my objection to Tailwinds, in case that wasn't clear in my original comment. I prefer to actually use CSS, most often via style classes. And I did not say to base styles on html structure - you are correct, that is brittle and actually one of the things I often ask about in FE interviews as a way of determining skill level. I said that good html structure makes CSS much easier, if your structure is bad, it can significantly compound the amount of CSS needed in order to achieve the desired outcome. So I believe there is a significant distinction in those two statements.