DEV Community

Discussion on: What makes CSS so hard?

Collapse
 
leob profile image
leob • Edited

There are multiple reasons for that.

I think one of the reasons is that it requires a different mental model compared to "normal programming" - programming in a language like Javascript or PHP is imperative - "first do this then do that" ... CSS is declarative - you declare the desired end result, and somehow the "engine" figures out how to get that result.

But what if the result isn't what you intended? With a language like Javascript or PHP there are ways to debug it - with CSS much less so, you then need to mentally 'debug' why CSS would have arrived at result B while you wanted A. And to do that you need to know the "rules" used by CSS - and the rules are many and complex, because CSS is huge.

One of the most complex topics in this regard with CSS is layout - CSS has at least 3 completely different layout "engines" built in (off the top of my head, "float", "flex box" and "grid", and probably I forgot one) each with their own set of rules. Just look at the number of Stackoverflow posts where people ask how to center something vertically, it's astronomical. Until "flex box" came along the ways to do this were often very unintuitive (using negative margins or something like that).

Second reason is because it was originally not designed with "app" development in mind - it was purely for document layout. Web 1.0 was static with simple layouts and minimal interactivity, then with Web 2.0 people were trying to do things with it for which it wasn't designed - hence the multitude of complex hacks that are typical for CSS (see remark above about vertically centering something).

Third reason is because it evolved a lot over the years (and is still evolving) - see example above with the layout models - originally there was only "float", then "flex" was added, then "grid". And one of the reasons why it evolved is because of the previous point - because it was starting to get used for things that it wasn't originally designed for, like developing "apps" - things then started to get added to the CSS standard to fill those gaps and shortcomings.

And the final reason why it's complex is just because it's huge - means it takes a long time to master. And the reason why it's huge is partially because of what I just mentioned - the standard evolved and new things got added - but, old things never get removed, so CSS keeps growing and growing.

So to summarize why I think CSS is hard to master:

  • requires a different mental model (declarative versus imperative); hard to debug
  • we're doing things with it for which it wasn't designed; leads to complex hacks
  • it keeps evolving and things keep getting added; multiple ways to do something
  • and it's huge, and growing; new stuff gets added, but old stuff never gets removed