Modern CSS Code Snippets: Stop writing CSS like it's 2015 • Hacker News Board

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

#311

Post by m-schuetz » Tue, Feb 17, 2026, 7:09 PM UTC

agos wrote: post #310

m-schuetz wrote: post #278

Earlier quoted context omitted.

Based on marketshare, Firefox can easily be excluded from "widely available"

again, "widely available" should not be intended in the general sense but as a much more precise industry term. "Baseline widely available" is defined[1] as a feature which has been available on all the core browsers (Chrome desktop and Android, Edge, Firefox desktop and Android, Safari on Mac and iOS) for two and a half years [1]: https://web.dev/baseline

I don't really care about someones phony definition of widely available. If it runs on 90% of user's browsers, it's widely available. I'll gladly make a web page that puts this definition online so that you can also reference it in discussions, if you want.

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

#312

Post by yokuze » Wed, Feb 18, 2026, 2:11 AM UTC

socalgal2 wrote: post #276

yokuze wrote: post #258

Alternate title: "How to break your website's styling for 10-20% of your users" This is a nice reference, and some properties like `scrollbar-gutter` can be used for progressive enhancement. However, many options listed will require some kind of fallback if `autoprefixer`/`postcss`/etc. doesn't cover it, and if you don't want to exclude a large fraction of your users. It's reasonable in some cases to have both "new"…

Is it 10-20% of "your users" or 10-20% of the world but <1% of "your users"

I don't follow. Assuming that the caniuse data is also representative of your users (a big assumption), then it's 10-20% of either group. Adjusting the % for the subset that is "your users" can result in either a higher or lower %.

Let me know if I'm missing something.

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

#313

Post by namuol » Wed, Feb 18, 2026, 4:47 AM UTC

samastur wrote: post #218

namuol wrote: post #125

Earlier quoted context omitted.

I agree, it’s a choice. So is the opposite. Complaining about other people’s choice of doing things on the web is the choice I’m actually tired of.

Read something else then.

I’m a web developer by trade. I read about it. Sorry?

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

#314

Post by namuol » Wed, Feb 18, 2026, 4:49 AM UTC

senfiaj wrote: post #71

My top list of recent CSS improvements: 1) Nested selectors. 2) :has(...). 3) :is(...), before you had to write :not(:not(...)). 4) :where(...), similar to :is(...), but the selector weight inside :where becomes 0. Useful when you need deep/complex selectors without increasing the selector weight.

Don’t forget @layer!

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

#315

Post by dalmo3 » Wed, Feb 18, 2026, 10:59 AM UTC

sollniss wrote: post #242

dalmo3 wrote: post #194

Earlier quoted context omitted.

Try ::before and css-counters.

::before has the same problem. You can't align text inside `content:` to the right. Probably because each ::before is handled separately and can't see the sibling's content length.

Ah, I only now opened your example code.

If you wrap the li contents in a div, you can handle them as a unit separately from ::before.

Then subgrid solves the problem of treating nested elements as siblings.

https://jsfiddle.net/3617wdmf/1/

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

#316

Post by exodust » Sat, Feb 21, 2026, 8:33 AM UTC

AltruisticGapHN wrote: post #222

rafael-lua wrote: post #212

Earlier quoted context omitted.

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.

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.

Agreed. I owe a beer to whoever thought of BEM. It's saved precious brain cycles thinking of names. At first I was like what is this bem__opinion--rubbish but then it clicked and my workflow improved.

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

#317

Post by samastur » Thu, Feb 26, 2026, 9:04 AM UTC

namuol wrote: post #313

samastur wrote: post #218

Earlier quoted context omitted.

Read something else then.

I’m a web developer by trade. I read about it. Sorry?

I am as well and there's no shortage of relevant content to fill my whole day so I can skip articles I dislike.

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

#318

Post by ehsankia » Mon, Mar 02, 2026, 4:24 AM UTC

josephcsible wrote: post #162

ehsankia wrote: post #142

Earlier quoted context omitted.

Sometimes I'm developing an internal tool or something only for myself / handful of people. I'm perfectly fine saving time and complexity using a one liner modern CSS solution instead of having to rely on some hacky unreadable code to support 10 years of legacy browsers.

The latest version of Firefox is not a legacy browser.

If it's just a tool for myself, and I use a webkit based browser, why would I use a hacky solution for a browser I don't use?