Ask HN: Is it just me, or is CSS too damn hard?

I'm glad to read I'm not the only one struggling with it. It's not as bad as with the OP; I can get stuff done in CSS. But any non-trivial layout always requires a lot of trial and error: does this need to float? Does inline-block work better? Now there's flex layout on top of that. Do I need relative or absolute positioning for this thing? Do I need padding or margin here? And why does my margin not do anything?

Every time I think I finally understand it, I run into a situation where it doesn't do what I expect. And then there's hacks with negative margins and that sort of stuff, where it feels like CSS needs to be wrangled into doing something it doesn't want.

Whenever this subject crops up, I'm inclined to just answer "Yeah, it's just you", at the risk of that coming off as too harsh.

I really like CSS and it's where I got my start, and used it for a long time, often to make up for not knowing JavaScript.

I don't think CSS is an art thing. I think CSS is pretty simple, but requires an understanding of how CSS works and how browser layouts wotk.

Without that, you're going to have a hard time, but I can't really think of a language where that isn't true, either.

Sometimes I feel like this is the result of people undervaluing CSS, because they "just want to make a colored box" or whatever, but fail to view it as its own language, with its own ecosystem and considerations, placing undue expectations on its simplicity.

If I were to "just make a program" in C, without any knowledge or consideration for how Windows works, how stacks, heaps, memory, and pointers work, and how C works, then I'm gonna have a bad time, and the same goes for CSS, imo.

That's really interesting. I'm also firmly in the space of finding CSS layout inscrutable (CSS styling is fine). I'd concluded that the issue is precisely the lack of peer-to-peer relationship constructs. Everything seemed based on 2 constructs:

1. Flowing 1D content (text) into a 2D space

2. Hierarchical relationships, i.e. positioning children with respect to parents.

I haven't looked deeply into flexbox or grid. My initial skim suggests they're both still fundamentally hierarchical. I'll take another look now given your comments.

I'll freely admit I haven't invested a lot of time trying to get to grips with the more recent constructs (flex/grid). I would say my initial forays were difficult and frustrating. CSS layout seems (seemed?) the antithesis of the maxim "make the simple things easy and the hard things possible".

As a counterpoint: back in the midst of time, there was a cross-platform UI toolkit called Galaxy. It only had 2 layout constructs: springs and struts. Springs defined a proportional layout between components (so would stretch/compress), struts defined a static relationship. It was remarkably simple to define layouts using just those two concepts.

The web is clearly a more complicated space than conventional, thick client apps that only ran on the desktop. Responsiveness is a much bigger challenge now. Nevetheless, it seems to me that the key construct lacking in CSS is the ability to specify peer to peer relationships among elements - without needing to create a whole cruft of container components.

You've incentivised me to give flex/grid another look. I remain healthily sceptical, but thanks for the prompt.

CSS itself isn't a bad idea but less, scss etc. showed that it was lacking some features you desperately want and in the meantime just styling the web with "a little CSS" is not enough anymore.

You have a shitload of display sizes to support on the other hand and strange behaving browsers which aren't truly standardized on the other. That makes adjusting your CSS to all of these a pain in the ass even if you like fiddling around with styling (as I basically do).

I don't want to adjust my margins, paddings and fonts and then restart from scratch because f Apple decided they will do everything in Safari completely different from the rest of the browsers just to show how special they are.

I'm also sick of building selenium grids with a mac mini in them just to also test this piece of ... "ingenuity" ;-)

So nowadays I just go with a framework with sane defaults and no-hassle usability and when I need something special I ask people who don't do anything but CSS the whole day.

Without more standardization it's not a domain you'll be great at when you don't specialize in it - which means you got to invest a lot of time to master it.

This one dimensional curve of focus throughout a 2D page will be different on each viewing and for different people.

That's why the 2D layout is important because it can help assist or guide the creation of this path. For many pages there is no fixed "proper" path through the content even though the DOM is necessarily in some order.