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

CSS is not a real constraint language. If it really were a constraint language, it would be better. There's no constraint solver. Just a bunch of rules applied sequentially.

I'd like to have a real constraint system, like the one in Autodesk Inventor sketch mode. You select two things and apply a constraint - parallel, tangent, horizontal, collinear, etc - and the constraint system enforces those constraints. The layout GUI tells you if you've created a conflict. CSS solves an easier problem, and not very well. It's such a mess that no one can attach a decent GUI to it.

Amusingly, tables came back. But they're called "layout tables" now, to avoid embarrassment. Trying to do 2D layout with 1D constructs (the "float" and "clear" era) was just silly.

Beyond the immediate issues of "what rules do I use to make this thing look this way", the cascade can also make large-scale management and code reuse challenging. It's sort of like object-oriented inheritance, except the definitions and instantiations live in totally different places, and the top-level object properties are defined by browser manufacturers, or possibly end-users. Without some sort of build system, static analysis is difficult so it's hard to say if a definition is being used or not to know whether changing it will break something somewhere else.

People have developed some techniques to mitigate these issues, but many are unintuitive and don't follow naturally from "make this thing look this way".

> Incidentally, but very likely related, I always failed to have any glimpse into how design works. I have no idea which colors "go" with which ones, and pretty much all fonts look like the same for me.

I'd just want to point out this is completely unrelated: the best people I know when it comes to designing interfaces (both UI and UX) don't know much CSS. That's very much a creative field.

I can do CSS without many problems (nothing too fancy but slicing any interface or basic flexbox grids for layout and such). CSS isn't complex, just very foreign. Understanding the "rules" (cascading, priority) isn't hard, but knowing how to use it (how to target the element you want, what css to use to get the positioning/styling you actually want) takes a lot of practice. Though when it comes to creating a beautiful page I'm of no use.

> It's sort of like object-oriented inheritance

With the key difference being that there's no rigid structure to it at all, much less a strict-subset hierarchy. It's really more like structural object types, which can be easily composed, than OOP classes. It's set theory, rather than taxonomy.

> Without some sort of build system, static analysis is difficult so it's hard to say if a definition is being used or not

This can be easily solved with good project organization. At my day job I maintain a codebase with a couple hundred SCSS files, which are on average a couple hundred lines each. We've organized things well enough that the cascade is a non-issue, and "leftover" styles from an element that's been removed are a rare occurrence. All you have to do is closely mirror your UI components, pages, fragments, whatever, with the relevant CSS files. Then if you add or remove something in the markup, you add or remove it in the corresponding styles.

> don't follow naturally from "make this thing look this way"

This is precisely the problem; programmers come from a background where they think in terms of "make it do this thing", and they try to translate that to "make this thing look this way". That's how you create supremely fragile CSS which is impossible to safely make changes to. Instead you should be thinking in terms of, "make it behave this way in the general case, relative to what's around it".

>He would instead want to place this/that here/there, and never really got his head around the notion that he was building a web page that scrolls,

Not only that but you are building a page that displays on all kinds of screen sizes so you just have no idea how much space there is between here and there. Thats 90% of what makes CSS hard because depending on what screen you are on, you can't just put something here because here doesn't exist for everyone.

I think CSS is designed fairly well its just that its solving a very complex problem of how do you make one page display on all kinds of devices without having to define layouts for them all.