3 ms·
We did this at my last job, but inevitably ended up with a mix of half functional CSS and half component CSS. If you have lots of repeated components on a page
by RpFLCL 8y ago
We did this at my last job, but inevitably ended up with a mix of half functional CSS and half component CSS.
If you have lots of repeated components on a page (comments, thumbnails, tags) then it's difficult to defend repeating, potentially dozens, of the same declarations. You're better off with the component defined in a stylesheet.
I think the real use for functional CSS is for one-off adjustments on those components:
<div class="comment">..</div>
<div class="comment">..</div>
<div class="comment disabled">..</div>
It's also a pain to edit all of the instances of an object when you want to update styles consistently. One upside, though, is that you have to consider the impact of the change in each spot.
- naasking 8y ago> If you have lots of repeated components on a page (comments, thumbnails, tags) then it's difficult to defend repeating, potentially dozens, of the same declarations. That's where you have two choices: 1. Use your HTML templating language to define a dynamic variable representing the set of classes and use that. 2. Like the article says, make use of the functional CSS's tools to create a new class that includes the styles you use. Same idea to #1, just at a different stage.
- HelloNurse 8y agoBoth "solutions" don't address the problem of repeated class names, they just help repeating them in a correct but not less obscene way. Bloated markup cannot be defended.
- naasking 8y agoYes they do, at least in a way that's no worse than every other CSS toolkit in widespread use. And there's nothing "correct" or "incorrect" about it. I suggest reading [1] if you want some real data on the usefulness of functional CSS. [1] https://hackernoon.com/full-re-write-with-tachyons-and-functional-css-a-case-study-part-1-635ccb5fb00b https://hackernoon.com/full-re-write-with-tachyons-and-funct...
- HelloNurse 8y agoI mean "correct" in the formal sense that every element gets the intended style, which is possible even with bad design and bad technology.