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

The problem with CSS is that there is some (completely unintuitive when you're learning) tricks to make it all work. But there only say 5-10 important ones, so once you've learnt them it gets a lot easier.

I'd recommend http://learnlayout.com for learning some of these tricks.

>tons of edge cases, dialects, and straight up absurd rules (Buffalo buffalo..). It's a language primarily improved through experience and memory.

Yeah, I'd sum it up by saying CSS makes hard things barely possible and simple things hard.

The example OP gave of centering divs illustrates this point, and there are unnecessary weaknesses in laying out a page when, for example, sizes aren't known in advance. Overall, there's a divide between intuitive expression and output, wherein the browser ends up saying things like, "I won't do this (e.g. center) unless you also do that (e.g. tell me how big it is)." Really? Why?

In all, it's never been an efficient solution to the problem it seeks to solve. When the Great War on Table-based Layouts broke out, it was even less suitable, which made it even more painful that you were persona non grata for resisting. So, rather than demand a better standard and uniform browser support, we just hacked and kludged and shimmed around it. So, the need to support the legacy has made it even more impractical to fix, hence the attempted do-over with flexbox.

CSS has been the bane of front-end development for many a dev. Amazing that we largely just suffer through it, and its tyranny has reigned for so long.

1) CSS is for implementing designs; being able to use it doesn't require design sense for things like colors

2) I'm fascinated by the fact that so many of my fellow programmers - often the smartest ones - have so much trouble with CSS. I'm not sure exactly what the reason for that is, though I did write an article hoping to address it in some capacity: https://css-tricks.com/css-is-awesome/

I think part of the problem is that many programmers, who like things to be orderly, see CSS as arbitrary and chaotic. Here's the biggest point that I think has to click: CSS isn't a programming language, it's a constraint language. The browser has lots of default, complex behaviors that drive layout, and whereas in a traditional programming language you tend to "build up" from nothing, CSS is more about paring down and guiding that automatic engine with as few statements as necessary. You tell the browser exactly what your layout requires, and the browser figures out how to flesh that out into various contexts and situations.

Personally I think CSS is beautiful: it's stateless and declarative, and it allows you to talk about huge swaths of entities in very general terms, gently paring down their avenues of expansion until the possibility space aligns with what your application requires. It's incredibly elegant once you get the hang of it; I sometimes find myself wishing I could use a similar paradigm for talking about objects in other contexts.

What you discover about CSS is that it's an accretive thing. You start out perhaps with a (comparatively) simple basis, whatever came with whatever app or framework your site is based on, or if you're lucky and starting from scratch, what you yourself wrote and understand.

Then over the years, you and other developers and designers on the team add to the CSS. You can't go back and change anything, because changing something to look right on this page may make it look wrong on another page. You can easily see the structure of selectors on the page you're looking at, but not the set of all possible selector structures on every possible potential page on the site to know how it will cascade everywhere. So you just add on, gradually getting more and more specific with the selectors up to the point where you have to start using !importants.

Meanwhile, over the years, the 'best practices' change, and the CSS that you and your coworkers write changes to adapt. So you end up with things originally sized in pixels, later multiplied by a floating point scaling, overridden with em measurements, overridden by whatever the current fad in measurements is. Change any of that and it breaks random things throughout the site due to cascading, inheritance, and document structure/selector specificity.

Due to the way it accretes over time, you end up with massive amounts of CSS, most of which is overridden but can't be removed without breaking random things. You can't reconcile it or do it the right way without a full rewrite.

And in the end, it still always takes a few hours to figure out how to center something without breaking the alignment of other things, or whatever you're trying to do. Because it will be different than it was last time. It's not like just calling element.align(vertical=center, horizontal=center); as it would be in a programming language. It's a series of hacks built upon hacks to do the most basic things.

One guy once wrote here on HN that he does not have an intuitive feel for CSS even after 20 years working with it. Seems we just have to memorize all the rules.

I think the book "Learn CSS the pedantic way" is a great resource:

http://book.mixu.net/css/