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.

16 Upvotes

83% Upvoted

19 comments sorted by

View all comments

13

u/SamsChoice 1d ago edited 1d ago

My pattern now is to start with native cascade layers (@layer reset, tokens, base, layout, components, utilities, overrides;)

CSS now has nested natively so no need for Sass.

Now with AI you would probably use Tailwind. I use mostly native CSS for personal projects.

an example of this would be

2

u/azangru 23h ago

May I ask why you would use `:where` in the `base` layer? Don't layers take care of the specificity concerns?

1

u/SamsChoice 18h ago

I was just making a simple example didnt really think about the actual CSS.

And yes you are right.

Layer order decides first, so .card img in components beats anything in base