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

I have a lot of time messing with css that could have been solved in minutes using tables instead...

As somebody who has been writing CSS for 13 years and watched numerous people fail here is the deal.

You have to confront the challenges head on and solve for them directly. Unlike JavaScript there is no magic framework abstraction hide from your fears shortcut. You have to embrace this reality both cognitively and emotionally. This is the reality, accept it. If you cannot get past this barrier give up and do something else with your life.

That said CSS isn’t too hard but it takes some very real practice up front to wrap your mind around it. The browser tools are much better than they used to be.

First you have to understand that CSS describes markup and markup is a tree structure. A solid understanding of the DOM is helpful but not required. Most CSS properties cascade down to descendant DOM nodes but some do not, particularly anything addressing the box model.

Second you have to embrace the box model. Don’t use the box-sizing property to redefine reality. Embrace the box model and understand it deeply. It isn’t hard but needs to be seared into your brain so that you are thinking about it visually instead of as code properties. Once you have mastered comfort with the box model you can use box-sizing if you want, but you probably won’t.

Third, understand dimensions. For learning I recommend not using pixels. Set the body to font-size: 10px and use em units for everything else. This simplifies things by setting 1em to 10px for initial definitions and forces you to consider how the cascading works when 1em becomes some multiplicative value. You are already an experienced developer so the math won’t be hard. You just need to wrap your mind around why the value changes how to correct for it in the code.

Fourth, learn float. Float Changes an element into something like display:inline-block and allows content to flow around it. Specify clear:both on another element to stop the flowing/wrapping behavior. You can create columns by creating a parent element filled with floating children. Add a final child element with display:block and clear:both to limit the floating behavior to the parent.

Fifth, understand position. Default is position static. Avoid value absolute unless you deliberately want to impose layering and completely remove the element from the flow control of the page. The properties top, right, bottom, and left refer back to the last positioned ancestor node.

Finally, play with pseudo classes to be familiar with what’s available.

Practice those things and build up your confidence. It gets easy but it takes some effort. It is a different skill than programming logic. After I had first started learning there was something called the CSS Zen Garden that made for some practice. Here was my attempt: http://mailmarkup.org/zen/

Browsers evolve in how they render text, but when I made that Zen Garden thing all the text columns were in complete vertical alignment cross browser.

> CSS works the way it does because it was created to make the kind of designs that designers wanted possible

Well, not originally. Later that became a thing, yes - but all the design that was already there at that point (circa CSS 2) remained, as did the overall approach with cascading styles.

A styling language designed for HTML5 today from scratch, accommodating modern use cases, would likely look a lot different.

Your frontend experience sounds like you've only dealt with web apps. Try making more web sites. That is, collections of pages that have enough content on them to scroll. Don't use any framework, don't even use JS if you can help it -- maybe something like PHP is ok to avoid some repetition (i.e. just use it for require_once of shared html). Then you'll understand the environment CSS was forged in. Ctrl+F the comments here for "box model" for the main "make it click" piece. (Edit: you might even want to try designing without CSS, to see what that's like. It's actually not that bad, and may well remind you of how things are typically done in frameworks these days -- a regression IMO, but a reminder that separation of design from markup isn't truly necessary.)

> Build every part of the application then suddenly "Oh Right! CSS!" Slap bootstrap or other popular framework then don't think about it.

It depends on the problem your trying to solve, if you just want something that looks decent (because you're a programmer and you don't notice things like colors, alignment and spacing) then something like bootstrap is a good go-to.

I still think learning CSS properly is worth it, using bootstrap without knowing CSS is like using an ORM without knowing SQL, but less dangerous.