`TL;DR
Highly recommended for its broad coverage of the CSS language, as well as its coverage of new and emerging CSS topics. The engaging practical exercises made it a consistently enjoyable read, as well as being informative and valuable.
My career more or less started working in back-ends. I was a Java-first engineer when I started out, and only occasionally had reason to fix a bug or something on the front end. So when I transferred to Sydney and started working in JavaScript, TypeScript and React a lot more, I just kind of picked up things as I needed them. I was working with JavaScript a lot, so I had many opportunities to learn there, and when we picked up a TypeScript project, the same was true. But I still had very little interaction with CSS — enough to do the work that came my way and design some components, but not really enough to claim to "know" CSS. I'm someone who likes to know their tools. I figured it would be wise, in the few weeks I have before I return to work, if I committed some time to getting to know the language a little bit better.
I chose Manning's CSS In Depth by Keith J. Grant. I found this book to be really valuable. It's well-organized and easy to follow. It features a steady stream of practical examples that demonstrate various CSS features and keep the pace engaging (and maybe even fun?).
The book covers a lot of ground, in roughly four sections:
The first section covers CSS basics. This is mostly material I knew, but some things were clarified for me here, particularly in understanding how conflicts between selectors get resolved. It also highlighted some gotchas working with shorthand notations that I didn't know about.
The next section covers layout. This is where I expected to find the most value, and I did find a lot of value here. I feel much more confident working with flexbox. I feel I can hold my own working with grid. And position (fixed, absolute, relative, etc.) is much clearer to me. There was also a good discussion of responsive design that put some new tricks in my toolbelt (auto-scaling fonts with min/max sizes are pretty cool).
Part 3 is the part I didn't know I needed. A lot of this covers how the CSS standard is evolving to embrace features originally introduced by CSS preprocessors. CSS layers give you another mechanism for controlling how the cascade resolves a conflict between selectors. Container queries let you scale responsive elements according to their container size, rather than the size of the entire viewport. Scopes might be my favorite: they give you much the same advantages of the BEM convention, limiting your styles to where you want them to go. But they also allow you to specify a lower bound beyond which your styles will not apply. So if you're defining a module meant to contain modules, you no longer have to be quite so careful about how your selectors apply within that scope. It's pretty cool, and it was fun to read about and use.
Having read part 3, I now feel that CSS preprocessors are nearly if not entirely obsolete. Reasons you might still use a CSS preprocessor:
• Some features described in the CSS standard are not yet supported in all browsers — a CSS preprocessor using equivalent features will output CSS that is broadly compliant
• there may still be a few properties that require vendor prefixes — a CSS preprocessor can take care of these transparently
• merging disparate CSS files into a single artifact (but a bundler will do this, too)
• named breakpoints for responsive sites (CSS custom properties are not in scope for media queries)
That's kind of it. Armed with that knowledge the question of whether you need to be using a CSS preprocessor seems to me less of a slam-dunk than it used to be.
Part 4, in the author's estimation, is the "fun" part. I'm not sure I agree. It covers the elements that will please folks a little farther towards "designer" on the "designer/engineer" spectrum than I am. Still, it's good to know about some of the color, typography, and mask/clipping features that I didn't really know much about before. And the discussion on the newly supported wider color spaces was pretty interesting.
Nearly last, Part 5 covers motion (and by association transforms). This also felt a bit more on the "designer" side of things for me, but certainly I can see the value of using motion to communicate with the user in an intuitive way. And it's good to know the performance benefits of using transforms over position properties (and, at a high level, why they perform better).
Last come two appendices: one that discusses selectors, and another that summarizes CSS preprocessors and compares two leading implementations. I was a bit surprised to find the discussion of something as fundamental to CSS selectors relegated to the appendices, and not right up-front in the "basics" section, but I can kind of see why he did it that way. They don't really require much explanation and a list of selectors and selector components, coupled with their regular use throughout the book, seems an adequate exposure to the topic.
Having read this book, I do not necessarily feel I'm a CSS expert. But I do feel armed with the knowledge I need to tackle projects that will help me to become one. I feel much more prepared to engage with CSS. I feel like I could recognize some not-very-good CSS and refactor it into something better, rather than just timidly adding my changes to it while trying not to break anything. What's more, the book was pleasant to read, and I found myself multiple times doing that "just one more chapter" thing that I used to do with novels, when I still read novels.
If you're a CSS novice, or you just want to get exposed to some of the new features, you could certainly do worse than this book. I do recommend it.`