←back to thread

Aspects of modern HTML/CSS you may not be familiar with

(lyra.horse)
451 points todsacerdoti | 1 comments | 28 Aug 25 20:49 UTC | HN request time: 0.259s | source
Show context
b_e_n_t_o_n ◴[29 Aug 25 04:20 UTC] No.45060146[source]▶
I really do appreciate the nesting they've added but looking at it as a whole, CSS is a really strange and in my humble opinion, a terrible language. Perhaps I'm just holding it wrong, but it's just so complicated and messy, it sometimes feels like you're just arranging arcane runes in different ways until you make it sort of work for you. It's both a system for styling text based on inheritance, and a layout system for block and inline elements, nested recursively but without inheritance, only containment. I think it was a mistake to combine styling and layout, and I don't feel like adding more and more capabilities to something fundamentally broken can fix it.
replies(11): >>45060383 #>>45060483 #>>45060957 #>>45061557 #>>45061852 #>>45062092 #>>45062151 #>>45062384 #>>45063859 #>>45067840 #>>45069507 #
1. easyThrowaway ◴[29 Aug 25 09:08 UTC] No.45061852[source]▶
CSSdev has been the bread and butter of my last 10 years of work, and I still have the feeling that CSS as a language is never designed, just expanded.

A series of modules that are bolted on top of existing properties without actually improving on them, simply "well, here's another way of doing the same thing" often in ways contradicting each other (see the way the box model works in "display" vs "flex" layout) or just slightly diverging in ways that make extremely hard to debug them (e.g. how gap works in "flex" vs "grid" layouts[1]).

The awkward point-based cascading system means that once a layout is written it's basically frozen, unless you use some convoluted native or js-based encapsulation systems which once in a while gets leaky and, who knows, your component topbar font-weight mysteriously goes from "thin" to "extrabold" or your mobile menu appears even on your desktop breakpoints.

[1] https://developer.mozilla.org/en-US/docs/Web/CSS/gap