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

281–290 of 318 posts

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

#281

Post by thih9 »

MD87 wrote: post #68
thih9 wrote: post #59

Earlier quoted context omitted.

> most of those creative examples are in the 40-50% browsers support range. Not if you filter the examples. Click "widely available".

First widely available one I saw was this: https://modern-css.com/staggered-animations-without-nth-chil... That would actually fix some ugly CSS I have. The demo works. Neat. Except... the demo doesn't use either the old syntax or the new syntax. The browser support is wrong (Firefox doesn't support it, the site says Firefox 16+; it says Chrome 43+ but in reality it's much newer: Chrome 148+). It says "Since 2018" bu…

> First widely available one I saw

Could you try again? I couldn’t replicate this and when I follow your link it says “limited availability”.

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

#282

Post by demetris »

m-schuetz wrote: post #174
josephg wrote: post #82

Earlier quoted context omitted.

Yeah a lot of these demos say the features are widely available, but they don't actually work in my browser (Firefox on Macos). Makes me wonder if these demos (or the browser support tables) were made by LLMs. They clearly haven't tested the demos in firefox.

Firefox is pretty irrelevant nowadays. They've dragged their feet for years when it comes to implementing new stuff, and now web devs don't even bother checking Firefox. Because devs know it won't work on ancient browsers, no need to confirm. My personal trigger events were when Firefox didn't optimize DataView for the longest time, initially refused to implement import maps, and couldn't get WebGPU support done. At…

Firefox could (should?) be better in several aspects but it seems excessive to say it is pretty irrelevant.

It has 4.5% market share in Europe, 9% in Germany (statcounter numbers).

It is the browser that got the Google Labs folks to write a Rust jxl decoder for it, and now, thanks in part to that, Chrome is re-adding support for jxl.

You can be unhappy with Firefox (I often am myself), and Firefox HAS lost relevance, but can you really say it has become pretty irrelevant?

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

#283

Post by cush »

spartanatreyu wrote: post #60
crooked-v wrote: post #19

Earlier quoted context omitted.

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

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. ---…

Instead of assuming that everyone who has a different preference than you is ignorant, it might be helpful to look at the problems that each technology solves and the requirements they fulfill.

The cascade is a huge issue for teams need to be able to safely modify one area of a site without accidentally impacting others. Tailwind solves organizational problems by colocating the styles with the elements - allowing changes to be surgical, declarative, and predictable. Editing and removing styles is as easy as modifying the content of the page.

Yes, the cascade is super powerful, but it needs to be contained somewhat to scale to many developers and large codebases.

> 1/4 Americans (USA) can't read

Also even though your analogy has nothing to do with CSS, I have to point out that this absolutely isn't true (which in the context of your argument about education is pretty ironic)

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

#284

Post by saidinesh5 »

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.

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.

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

#285

Post by peacebeard »

skeptic_ai wrote: post #206
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.

Well put.

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

#286

Post by easyThrowaway »

fainpul wrote: post #151
darekkay wrote: post #92

Earlier quoted context omitted.

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.

> we wouldn't have to adjust our HTML when we change the layout. You don't have to: https://csszengarden.com/

CSS Zen Garden is quite the opposite of a good example of your point. Even small changes to the original page layout would completely break most of the provided styles.

If I removed the .page-wrapper class it would be also nearly impossible for a different developer to reverse-engineer the issue from the existing Template and CSS files.

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

#287

Post by skeptic_ai »

mb2100 wrote: post #202
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-...

What if you need 3 levels of html tags?

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

#288

Post by ggregoire »

mb2100 wrote: post #202
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-...

> 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.

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

#289

Post by mb2100 »

rafark wrote: post #261
mb2100 wrote: post #202

Earlier quoted context omitted.

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-...

Because button is literally anything clickable. Not everything is a boxed button. You cannot just globally add a style to 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

button, .button { /* my button styles */ }

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

#290

Post by mb2100 »

ggregoire wrote: post #288
mb2100 wrote: post #202

Earlier quoted context omitted.

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-...

> 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…

if you're not using CSS modules, why would you import the css file into your javascript? But anyway, I think we agree. Feel free to read the linked blog post ;-)
Post reply on HN