Ask HN: Best book or resource to REALLY grasp CSS?

I'm going to recommend what may be a controversial approach: learn CSS in a historical order.

First off, do NOT attempt to learn using a framework. They're complicated and tend to make a lot of compromises in order to satisfy everyone.

Start with CSS1. This supports basic font selection and sizing, bold and italics; margins, padding, borders, and backgrounds. You can't do much in terms of positioning, but the simplicity will help you understand crucial basic concepts: the cascade and the difference between inline and block elements.

Next, learn CSS2, which adds more selectors, positioning and display properties, floats, and a more sophisticated box model. You'll know you've mastered this when you can produce 2-3 different variations of what used to be called the "Holy Grail" layout.

The holy grail layout is a header, 3 columns, and a footer. The columns are ordered center, left, right in HTML markup. Each column has a different background color or pattern, and they all stretch the full height of the layout, no matter how much content is in them or which one has the longest content. It does not have to be responsive, but bonus points if it is.

Responsive layouts can be created with CSS2, and knowing how will mean you've really mastered the concepts, but CSS3 has better features to support more flexible and sophisticated ones.

Smashing Magazine used to be a pretty good resource for CSS2 tutorials, and I bet you can still dig them up with some determined googling. If you want to see what CSS2 is capable of, check out the CSS Zen Garden.

Finally, learn one CSS3+ concept at a time: yet more selectors; generated content; more sophisticated backgrounds and borders; alternative box models; columns; grids; flexbox. Each of these concepts can take a little while to grasp, so they're best approached independently.

I'm not aware of a good source for tutorials on CSS3+ (maybe try W3Schools?), but MDN and CSS Tricks are my go-to references.

I recommend www.css-tricks.com as a high-quality learning resource.

For structuring CSS (its cascading nature requires a lot of discipline esp. on larger projects) I recommend looking into BEM and SMACSS approaches.

If you choose to use CSS for layout, I recommend Susy grids v.2 — look up the Youtube of videos creating different responsive layouts with it. Really fantastic and a time saver. If you’re designing only for the latest browsers, look into CSS grid and flex box.

I recommend using the SCSS preprocessor — dry your code with variables and mixins, simplify complex calculations, manipulate color easily, incorporate a layout calculation framework like Susy etc.

CSS is powerful, complex and has variable compatibility across browsers. This means a lot of attention to detail and a good amount of hours solving edge cases.

Good luck!

I have a solid grasp of CSS to debug anything that comes up, and just enough knowledge to build a small bootstrap-like framework. However, there are some advanced concepts I do not yet understand with related to animations / mathmatical / sass based layouts (the really interesting things in codepen). I don't fully yet understand all the things you can do with hybrid javascript + css related to animations

CSS doesn't require a huge amount of conceptual knowledge, but rather pure memorization / practice of many techniques.

- Specificity rules: https://www.smashingmagazine.com/2007/07/css-specificity-thi...

- SCSS: https://sass-lang.com/

- BEM / SMACSS architecture - https://smacss.com/ , http://getbem.com/naming/

- 30 selectors must memorize https://code.tutsplus.com/tutorials/the-30-css-selectors-you...

I went through lynda.com's 3 video tutorials on CSS, and a few their SCSS/SASS videos. I don't know if this is the best way to learn this, but it did go through all the fundamentals. Wesbos had a few good videos on javascript30 related to CSS (such as root variables). Most of what I learned through CSS is writing my own themes to popular notetaking tools, and modifying wordpress themes

I personaly prefer to use css-tricks.com and smashingmagazine. Books aren't a great resource for this topic IMO, we are talking about CSS here. There are plenty of good articles on nicely made sites.

Copying things from dribbble is what I see what most advanced CSS developers do

As another primarily back-end developer, of all the programming and scripting stuff CSS is truly the most brain damaged.

Most of what I've seen is making CSS way more complex than it needs to be - part of it is thanks to years of general browser incompatibilities causing people to put in "dont go there" warnings or for the sake of compatibility of X stuff. Second would be various tools and frameworks that may have been partially implemented in some other peoples' teaching of CSS.

I would say these two books cleared away a lot of the muck for me:

Stylin' with CSS by Charles Wyke-Smith - very concise.

I also found bits in Handcrafed CCS by Dan Cederholm to be good as it worked on either bad styling or no styling and how to clean up stuff or achieve a good effect CSS wise.

After that a lot of Googling, examining pages that worked, and reading how to do x, y or z as well as just trying stuff out myself till I get it right.

There are a lot of "gotchas" with CSS. The only thing I used books for was to read about how other people organized their stylesheets. Other than that, doing it day in and day out for years was how I ended up learning.

People will design all sorts of stuff that requires some creative problem solving with the tools CSS gives you. If I see something interesting on a site, I'll open inspector and see how they did it. That's usually how I learn new tricks. That and by experimenting on my own. As far as not having to use trial and error, that just takes practice. I'll go for 3 years making sites that all look the same, then tastes change and I have to go through trial and error again figuring out the best way to do something new until I've done it so many times I don't even need to look at the screen when coding anymore.

I'm in exactly your boat, also interested in an answer. I'm amazed how far I've gotten with a fuzzy understanding of both fundamentals and details, and trial and error. But I'm not a muddle-through engineer anywhere else, and this slow half-blind process is frustrating. If it makes you feel any better though, it seems there's a lot of us out there, something about css encourages many to make do with muddling through.

I read the PhD thesis of one of the CSS orig designers https://www.wiumlie.no/2006/phd/ as a crash course, then picked through the various specifications. There's many surveys on CSS Preprocessors on Google Scholar if interested too.

There is this book called CSS The Missing Manual, by David McFarland.

Although I did not finish it, I started it with regards to learn CSS properly (like you) and started to grasp some basic concepts (could not finish it though, due to procastrination). Honestly, I think the books delivers , maybe you could use it!

As a backend dev moving to the frontend, I found it super useful to work through http://book.mixu.net/css/ taking notes and then to make spaced repetition flastcards in Anki

I found that going to http://dribble.com/ and trying to copy some of the designs was the best approach. You'll only learn with practice.