Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Modern CSS Code Snippets: Stop writing CSS like it's 2015

modern-css.com

Post reply on HN
Print view View original

201–210 of 318 posts

Re: Modern CSS Code Snippets: Stop writing CSS like it's 2015

#201

Post by demetris »

I didn’t pay close attention to the domain and I thought it was the other one:

https://moderncss.dev/

One of the best educational resources for modern CSS.

BTW, one of the reasons I love modern CSS is front-end performance. Among other things, it allows you to make smaller DOMs.

I talk about a modern CSS technique that does that here:

https://op111.net/posts/2023/08/lean-html-markup-with-modern...

It is an idea I started playing with when custom properties landed in browsers, around 2016 or 2017? Around 2021 I started using the technique in client sites too.

Now I want to write a 2026 version of the post that talks about container queries too. The technique becomes more powerful if you can rely on container queries and on the cqw unit. (You cannot always. That stuff is still new.)

For an example of the convenience cqw offers if you can rely on it, see the snippets I have in this:

https://omnicarousel.dev/docs/css-tips-know-your-width/

Re: Modern CSS Code Snippets: Stop writing CSS like it's 2015

#202

Post by mb2100 »

ktpsns wrote: post #4

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.

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 `` if you could just write `` and style it with standard CSS.

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

Re: Modern CSS Code Snippets: Stop writing CSS like it's 2015

#203

Post by [deleted] »

appplication wrote: post #50
namuol wrote: post #43

Earlier quoted context omitted.

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

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.

[deleted]

Re: Modern CSS Code Snippets: Stop writing CSS like it's 2015

#204

Post by rozab »

porker wrote: post #159
pphysch wrote: post #81

Earlier quoted context omitted.

Why/how do you grep selectors? Seems overly optimistic to be able to guess the particular rule pattern that is applying a style. Browser tools are much more reliable.

Let's say you're thrown into a website you've never worked on before and asked to fix a styling problem. You can look in the browser tools, but the website will only be running the compiled production version, and if the team knows what they're doing there won't be source maps available. So you've now found selectors in DevTools that you think are causing the problem, and you want to find them in the source code. In…

If this is the only option, I would suggest that means the team doesn't know what they are doing.

Re: Modern CSS Code Snippets: Stop writing CSS like it's 2015

#205

Post by azangru »

kristopolous wrote: post #79
azangru wrote: post #26

Earlier quoted context omitted.

What are the M and the C, and how do they talk to the V in this case?

Mvc is why there's 3 languages: HTML CSS and JavaScript The separation is already there People have just failed to understand it

> The separation is already there

I wonder how you would map these three onto M, V, and C :-)

Re: Modern CSS Code Snippets: Stop writing CSS like it's 2015

#206

Post by skeptic_ai »

ktpsns wrote: post #4

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.

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

Re: Modern CSS Code Snippets: Stop writing CSS like it's 2015

#207

Post by black3r »

gf000 wrote: post #184
Kerrick wrote: post #58

Earlier quoted context omitted.

Those are all stateless MVC over HTTP, which is a very different architecture from stateful MVC for long-lived UI. The latter was invented for Smalltalk by Trygve Reenskaug, and is far more relevant to front-end web. Stateful MVC uses Publisher/Subscriber (or Observer) to keep Views and Controllers up-to-date with changing Models over time, which is irrelevant for stateless MVC over HTTP. Plus, in stateful MVC the Vi…

Is the Controller not in a coupled pair with a View? We could imagine an interface where it could be completely separate (e.g. a kiosk TUI where stuff like "press 'r' for X" is displayed), but in the vast majority of UIs the View has state, and the Controller has to depend on that state (e.g. did this keypress happen with a text field focused). Sure, this is abstracted away via the UI framework and we operate on usua…

You can have decoupled Controllers from Views using React. That's the basis of the "original" Flux/Redux architecture used by React developers 10+ years ago when React was just beginning to get traction.

A flux/redux "Store" acts as a Model -> contains all the global state and exactly decides what gets rendered. A flux/redux "Dispatcher" acts as a Controller. And React "Components" (views) get their props from the "Store" and send "events" to "dispatcher", which in turn modifies the "Store" and forces a redraw.

Of course they aren't "entirely decoupled" because the view still has to call the controller functions, but the same controller action can be called from multiple views, and you can still design the architecture from Model, through Controller (which properties can change under what conditions) and then design the Views (where the interactions can happen).

Re: Modern CSS Code Snippets: Stop writing CSS like it's 2015

#208

Post by virtujoel »

oddevan wrote: post #98
josephcsible wrote: post #87

I dislike the examples here where the "old" way works in all browsers, but the "new" way only works in Chrome/Edge. IMO, it's irresponsible to include such examples, since it makes the Blink monoculture worse.

Agreed; wish the default filter was "newly available" since that includes all 3 major browsers (Chrome/Edge, Safari, Firefox) but still includes new stuff that isn't "baseline" yet.

Even "newly available" doesn't seem correct. For example:

https://modern-css.com/smooth-height-auto-animations-without... This claims `interpolate-size` is newly available and works in all major browsers.

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/P... This states `interpolate-size` only works in Chrome/Edge.

I tested the demo and it's definitely not working in my copy of Firefox.

Re: Modern CSS Code Snippets: Stop writing CSS like it's 2015

#209

Post by ffsm8 »

moho wrote: post #147

In case the author happens to read these - final statement in native CSS nesting is no longer true. "The only small difference from Sass: for element selectors you need the & prefix. In Sass you could write a { color: red } inside a parent, but native CSS requires & a { color: red }." It was true for a bit, but fixed within 2-3 releases iirc. You can now freely nav { a { color: red; } }

https://caniuse.com/css-nesting

86-90% support

Re: Modern CSS Code Snippets: Stop writing CSS like it's 2015

#210

Post by sevenseacat »

Well it's flat out wrong about some things, like `field-sizing: content`. Doesn't work in any version of Firefox, let alone Firefox 130+! It even links to caniuse, which says the same thing.

The "new" version doesn't even have the handle to manually expand the box - the old version does!

Post reply on HN