[ktpsns]

CSS in 2025: Let's write html inlined styles as if it was 2005 and separation of formatting/representation was never invented. I talk of tailwind, of course.

[namuol]

The deadest horse in web development is the myth of “separation of concerns”

[IgorPartola]

I was recently doing some very specific web scraping of some very public very static documents. About 25% of them use a soup of divs with hashes for class names. Not a <main> or <article> or <section> in sight. I am fine with the idea of what tailwind does but like at least using semantic tags where appropriate could be a thing.

[kristopolous]

It's a choice. The dominant paradigms choose not to.

I disagree. And that makes me the loser here

[tgv]

I don't think "separation of concerns" is entirely dead. Ideally, the CSS is readable and maintainable, and that implies structure. If you have a bunch of (co-)related components, you don't want to find/replace tailwind class names when you need to change the layout. So you separate that part of the layout in classes based on (layout!) functionality. You can see that as "concerns."

[zarzavat]

I don't use Tailwind, it's a solution to a problem I don't have.

I can understand how it might be useful for certain types of web development, e.g. landing pages where the content and styles are tightly coupled.

So as a technology, it's OK. But my god its userbase is toxic and obnoxious.

[appplication]

You can separate concerns without violating locality of behavior, and that’s exactly what tailwind does.

It admittedly does not do a good job at being very DRY but I think that’s poorly applied to HTML/CSS in general, and the most DRY css is often over abstracted to the point of becoming nigh uninterpretable.

[nonethewiser]

I can't believe this isnt better understood. Style definitions on reusable components are good. The idea that your css doesn't have to know about your html just creates tons of problems and complexity. Global themes and reusable styled are fine.

If we are talking about statically defined html then sure. make your global css files.

[the_other]

SoC is how all maintainable software is built. A function for A, a class for B, DDD-spec'd modules and features, databases on separate machines, API definitions, queuing systems, event systems, load balancing, web servers.

You don't even need to think of the web to see how content and presentation are different. Try editing a text file with hard line breaks in and you'll quickly understand how presentation and content are orthogonal.

[darekkay]

HTML vs. CSS is a separation of technologies. If HTML was really only about the content and the CSS was only about styling, we wouldn't have to write div soups to style our websites (.container-wrapper .container .container-inner { /* "separation" */ }) and we wouldn't have to adjust our HTML when we change the layout.

[fainpul]

> we wouldn't have to adjust our HTML when we change the layout.

You don't have to: https://csszengarden.com/

[WorldMaker]

I find that most div soup is going away with CSS Grid. CSS Grid is often best when you lose wrappers and nesting. subgrid and display: contents help pop layers when you can't touch the HTML nesting, but now a lot of nesting feels unnecessary in the first place.

[pjmlp]

We only have to write div soups to style our websites, because people keep misuing a platform for interactive documents for an OS abstraction.

[abustamam]

Having worked on teams that wrote bad (S)CSS and teams that wrote bad tailwind, I prefer bad tailwind.

With tailwind, I can guarantee that changing a style in one component will only change that component. With css, there is no such guarantee. So of course the (wrong) way many devs fix it that is to add a new class, probably doubly specific, sometimes with important, and then everyone is sad.

[skeptic_ai]

That’s separation of technology not concerns. The concern is the component itself.

[peacebeard]

Well put.

[rafael-lua]

Are we still complaining about Tailwind? This ship has sailed. The world is so much better than the old BEM/LESS hell, it is wonderful. UnoCSS is even greater in empowering frontend developers.

[AltruisticGapHN]

BEM is actually not hell, since the whole point is to have classes with a specificity of 1, making precedence of CSS rules easy to figure out.

Non-BEM CSS with ids and multi-classes everywhere was hell.

[h4x0rr]

Yeah let's do that. You have everything related to your component on place instead of jumping between files.

[paradox460]

Vue, Svelte, and Surface manage to do this without forcing you to inline all your styles

[zelphirkalt]

What stops you from doing the same thing in CSS? It is trivial to assign a specific CSS class to an element that is the root node of a "component" and scope rules under that.

[lawn]

Is jumping between files supposed to be difficult or something?

[sylario]

I do not work frontend and yet, I always end up having to do some CSS here and there.

I have never been happy on how I manage CSS. With tailwind, I am still unhappy about my styles but I can make my ugly UIs faster.

[nilslindemann]

Yeah. There is no need to obfuscate your code, just use Tailwind.

[namuol]

Obfuscate? I can learn tailwind and use it in dozens of projects. I can use tailwind in my project and onboard dozens of developers immediately. I can learn your CSS conventions and use them in exactly one project.

[mb2100]

If everything in your code is a React component, I get why you would just want to write the styles right there.[0] Then again, why write `<Button>` if you could just write `<button>` and style it with standard CSS.

[0]: https://mastrojs.github.io/blog/2025-11-27-why-not-just-use-...

[ggregoire]

> If everything in your code is a React component, I get why you would just want to write the styles right there.

Even for keeping the style close to the component, you can just use standard css.

Create a folder Button, create two files Button.tsx and Button.css in that folder, import the css file in the tsx file, add a class "button" on the first element the tsx file renders, start all the rules in the css file with ".button " to encapsulate the style.

People will say it's too much work, but it took me like 5 sec.

[rafark]

Because button is literally anything clickable. Not everything is a boxed button. You cannot just globally add a style to <buttton> and call it a day. For example, an upvote (^) button, a close (x) button, etc. A lot of clickable elements aren’t inside a [click me] box

[skeptic_ai]

What if you need 3 levels of html tags?

[Sateeshm]

Tailwind is not what you're describing.

[digitalPhonix]

Isn’t that what utility classes are? Shorthand for inline styles?

Not saying it’s good/bad, but it feels like that’s the use case

[crooked-v]

Tailwind is a direct response to how the "C" in "CSS" actually sucks, so there's no surprise that it's so popular.

[spartanatreyu]

The "C" (Cascade) in CSS doesn't suck, the education about it sucks.

People don't know how it works, then things go wrong so they learn to work around it.

That's what led to things like div + class soup that you get with the BEM naming convention or Tailwind.

The cascade is actually awesome, super powerful and if you know how to use it, it can greatly simplify your code.

Education is the problem and the solution.

---

To anyone outside the CSS space, this is the closest analogy I can find:

In the American education system, there was a recent-ish change where children are "taught" to read using a method of just learning the shape of every word (e.g. "thermally" has a th at the start and ly at the end, so it must be the word "thermally", despite other similar looking words like thematically).

The method was disproven but the American education system still uses it.

Now illiteracy rates are climbing where almost 1/4 Americans (USA) can't read.

It's basically the same thing with CSS, where developers don't know what the code they're reading/writing is actually going to do.

[dbbk]

I mean, the cascade really doesn't suck though does it. You really want to set font families and sizes on every p tag?

[saidinesh5]

It really depends on the websites no?

If you're building a "webapp" where you think in terms of components, no point keeping the style sheet separate..

If you're building a "website" which is basically a list of hyperlinked documents with the same styling, having just one style sheet would make sense...

Of course, there's a lot of gray area in between the two...

At the end of the day, the most that most of us can really do is be annoyed at the quirks of these leaky abstractions in the large codebases that's thrust upon us.

[chasd00]

If I may be so bold, the coding agents are really good at this stuff. Save yourself the pain of front end and make a clanker do it. Or at least make the clanker to the heavy lifting and just do tweaks yourself.

[raincole]

Yeah and it's a really good idea. You can't really 'separate layout from style.' The layout and the style are both parts of the UI. HTML isn't the content, it's the layout.

Even if you believe separation of concerns is the eleventh commandment, HTML and CSS are the same kind of 'concern' anyway. They're both at representation layer. Pretending you can decouple them is just burying the head in the sand.

[Sateeshm]

Thank you. This just makes sense. In fact, seperating them into different files don't make much sense when you think about it.

[mattlondon]

Wait until you see React & JSX...

At least html and CSS are both presentation. React/JSX now confuses presentation and business logic.

[lateforwork]

> React/JSX now confuses presentation and business logic

React was originally designed to be the "V in MVC". You can still use it that way. React becomes very simple when you only use it as the V in MVC.

[madeofpalk]

I think you're confusing business logic with view logic.

[bromuro]

React is great for MVVM indeed. Who is still using MVC in 2026?

[cush]

Separation of formatting/representation was invented? Where was I?

[rafark]

And thank god (or Adam) for that. Tailwind makes me much more productive.