Hacker News Reader

Comment by culi | Hacker News Reader

Eh. I kinda hate writing separate selectors just for a `:hover`

I agree CSS has come a long way. Nested CSS is the one thing I'm waiting for before I completely abandon preprocessors.

Think about the amount of characters wasted on having to write a whole separate rule to add a hover effect or something similar. Sure, better practices could usually make this unnecessary, but there's definitely valid situations for it. If you add up all the extra kb across millions of sites, and all the extra savings minifiers would be able to achieve with this syntax, I'd bet it starts to add up at a certain point

I was sad to see it left out of 2022-interop, but it's definitely the biggest feature I'm waiting for

View on HN

> I was sad to see it left out of 2022-interop, but it's definitely the biggest feature I'm waiting for

My understanding is the features for Interop were chosen because there wasn't good interoperability between browsers for them.

With CSS Nesting, once the spec (and the syntax) is finalized, it's going to work the same in all browser engines; hopefully it'll go smoothly and we won't need CSS Nesting be part of Interop 2023.

Correct. I meant the "2022 Investigation" section of it which accounts for 10% of the grade and focuses on future features

I wouldn't disagree. Nesting state and pseudo selectors can clean up code.

> Think about the amount of characters wasted on having to write a whole separate rule to add a hover effect or something similar.

So... 20 bytes or so? A whopping 20 megabytes per a million websites.

Seems like a very, very, very small optimization.

20 bytes per rule. While not a fan of the syntax[1], there’s the advantage when reading of seeing that rules are explicitly nested versus doing string parsing of rule definitions.

[1] In particular the significant space char difference between &. And & .

Why does a website need more than one :hover rule?

At minimum, you'll likely have different effects for links than for buttons.

Component-centered design is very common so the styles for each component that would benefit from :hover may have its own variation on it, for the color differences if nothing else.

:hover is not the only interaction pseudo-class, :focus and :active can also be nested.

Every pseudo class * everything that needs that pseudo class * time taken to write/reason/check each one

Reply on news.ycombinator.com