Styling with Classy CSS (2006)

[micromacrofoot]

I feel like utility classes had their moment and we can now start to pull back towards semantic CSS with the help of new features like CSS custom properties.

Instead of .f-green in your HTML you can do --f-green in your CSS.

<header class="f-green"></header>

would become

header { color: var(--f-green); }

or if you really hate CSS and must stay in HTML

<header style="var(--f-green)"></header>

Though the literal naming is a touch too specific anyway. Something like this is wonderful:

--f1-color: green;

header { color: var(--f1-color); }

then you don't have to do confusing things like

header .f-green { color: red; }

because you can do

header { --f1-color: red; }

So we can be less specific AND more modular... because you can have that f1 (font1) color be red in your header, and still do:

footer { --f1-color: green; }

We can make really flexible and extensible systems with modern vanilla CSS. No frameworks or preprocessors needed.

[munk-a]

It's extremely important to create classes like `.f-green` in case the definition of green ever changes. That's what we call forward portability.

Also, if your company rebrands from green to red you can just `.f-green {color:#f00;}` - it's so efficient!

[agloe_dreams]

This was the only bit in tailwind we modified a lot in our Config. You really need to remove the default colors and define them as [Primary, Secondary, Neutral, Warning, Error, Success] and then add variants of each. Then it really works. I honestly think this should be a default config change/setup option in TW. Nobody with a Design System/Brand guidelines should be including the default colors in their app.

[xeckr]

Or just use var(), which of course didn't exist when the article was written.

That way you can define your company's --brand-colour at the top of the file.

[interstice]

I used to think this way, but 1) it’s easy to do a find replace of f-green and 2) turns out no one we work with changes websites this way. The closest I’ve seen is changing a font site wide with some size etc adjustments

[CodeWriter23]

Nope. Green should give you green.

[cantSpellSober]

Yep, Tailwind didn't invent style tokens or composable classes! After learning Foundation, Tachyons, Material UI, Chakra...I was happy to see we finally settled on Bootstrap.

Oh, we didn't? Well, time to learn a new syntax. (Was it `dark:md:hover:text-slate-400` or `hover:md:dark:text-slate-400` again?) At least Tailwind arguably has more benefits than its predecessors.

[city41]

What was the first "official" atomic css framework? I believe it was atomic.css[0]? In this style of css, tailwind is very much a latecomer.

[0]https://acss.io/

[jamesmccann]

I think Tachyons struck the balance to be honest. Tailwind's "functions" and combinations seem to allow a higher level of complexity where it becomes difficult to quickly inspect a class block after some time has passed.

[Julesman]

I will always argue against this. Keep your layout in one file and your styling in another. I've done more CSS than most in heavy web production and I never once had a reason to think something like this would be faster or more efficient.

[jermaustin1]

CSS Utility classes are "faster" and that is the draw, but once they have been overused and abused, then you are either stuck with them, or you spend a lot of time cleaning the tech debt and rewriting the css properly.

At my current job, I work on a legacy application which is still actively developed and released. I spend a lot of my time cleaning up inline styles, styles that are applied via javascript calls, and style blocks on individual pages. I wish the inline styles would have been utility classes, because at least then they would be easy to find and replace, instead, there are "margin-top: 3px" and "margin: 4px 0 0" and "padding-top: 2px" and dozens of variations on that that had they just done something like ".mt-small { margin-top: 3px }" there wouldn't be so many variations and inconsistent looking pages. This company would have benefited greatly from Bootstrap or Tailwinds. I hate both of those, but there is no denying how easy they are to use and abuse.

[stevebmark]

Say more. What's the distinction between layout and style?

[city41]

I've been a web developer for about 15 years now and I absolutely love Tailwind. I find it so much faster and efficient that it is really aptly named.

[tuyiown]

So visionary to be considered a wtf. Thanks for the submission, made my day !

[city41]

Me too. This is really quite amazing in a small way. It really made me laugh.

[Brajeshwar]

This is what I did before stumbling on BEM - https://en.bem.info/methodology/css/

[munk-a]

Now that you're familiar with BEM you can use the perfect css approach `.page__inner__title-f-green {color:#0f0;}` imagine the portability!

[i0nutzb]

Back in the day we made fun of this nonsense, now we freakin glorify it with libraries like Tailwind & friends...

[threatofrain]

CSS is one of the places in web dev that never really reached consensus, even today. We might get WASM as the app platform of the web before this even happens.

[matheusmoreira]

Yeah. It's essentially a less verbose form of per-element style="..." attributes. It's weird to me that this is considered the state of the art today.

[peebeebee]

While I don't really like it myself, Tailwind is a good CSS framework for the age of component-based application design, where your JS / CSS / HTML lives in a single file, and your application-design won't change that heavily.

But when you want to redesign a whole site after the fact, or if you want to keep your component library logic & templates, and port it to a new system, Tailwind might be more trouble than it's worth.

It's just that... Atomic CSS has its benefits, BEM has its benefits, etc etc etc.

[BasilPH]

Why do you feel it's nonsense? I'm genuinely curios.

Personally I'm using Tailwind for 90% of the styling. If I keep repeating a certain combination of classes often, I'll group it with a custom class. (Edit: See colejohnson66's comment for an example)

Two advantages of tailwind that I didn't see before I started using it:

- It's often easier to find what I want in the tailwind documentation, and it comes with nice examples. MDN is great, but with Tailwind I get reasonable presets.

- TailwindUI: Saves me a lot of time and looks good without feeling as generic as bootstrap.