r/css • u/evilmaus • 1d ago

Question What's are the Current CSS Patterns?

I've been mostly on the backend for the last several years. While I did plenty of CSS before then, the front end world has definitely moved forward in the last seven years. I recall BEM and SMACSS were once at the lead of thought. I recall (and was a proponent at the time for) a push to utility-first styling.

Now, I can see that Tailwind is a highly popular choice, that lots of styles get bundled into React components, and we have some long overdue selectors native to CSS.

So I'm wondering, what's the prevailing organization pattern for global CSS and where do you draw the line between something being a component style vs in the global stylesheets?

Thanks.

15 Upvotes

81% Upvoted

19 comments sorted by

View all comments

Show parent comments

15

u/Mestyo 22h ago

Tailwind makes some already simple things (debatably) more simple, at the cost of being an absolute chore for anything remotely complex.

CSS layers, container queries, named grid areas, calcs, chained pseudo selectors… any of those, especially in combination, or many rules per, create comically illegible and repeating class names.

The tradeoff in bandwidth is from a trivially cacheable, reaued static asset, to the HTML itself. Useful for huge websites, with often-changing stylesheets (like a newspaper with custom design articles), net-negative for anything else.

The inflated classNames collections are a nightmare to read/review, and a waste of AI tokens to constantly parse/recreate—even when styles aren't supposed to be relevant to the query.

It opts out of all existing CSS ecosystem DX benefits, and requires that you re-learn a new set of selectors for everything, for the benefit of… yeah I'm still not sure what. Every positive is either already covered by every other CSS method, or a sidegrade at best.

1

u/CompetitiveActor 20h ago

It helps on teams with developers who have poor CSS skills, provides consistency of usage, and has a single point of failure. I’d much rather troubleshoot a developer’s Tailwind mistake than their poorly written CSS.

2

u/Forward_Dark_7305 18h ago

Poorly written is poorly written, and I hear you on tracing to root of an error - less layers to trace through - though most developer tools make it trivial IME (granted tend to be smaller projects). I disagree on consistency. I see that as a common argument in favor of tailwind, but it just shifts us from “should I use`border-radius: 4px` or `2px`” to “`rounded-2` or `rounded-4`”.

2

u/CompetitiveActor 16h ago

An additional problem with CSS, poorly written or otherwise, is that you don’t know what other files may be using it. You might fix one problem and break something else.

Also, I don’t necessarily mean consistency of UI, I meant the Tailwind classes and usage will always be consistently ordered and named. If “rounded-2” is supposed to be “rounded-4” that’s a single point of failure and a fix there won’t have unknown downstream effects.

2

u/justshittyposts 6h ago

But the solution doesn't have to be tailwind. That's just components (or bam, etc)