I don't know if there is a single perfect resource out there, but the thing that helped me the most was understanding CSS as a shift from programming with an imperative mindset to a declarative mindset. Treat CSS as a medium for expressing 'what you want' instead of 'what to do.' My guiding principle is that "less is more" and if you find yourself writing a ton of super-specific and messy CSS, it's one of two scenarios: there's an easier way to do it, or you have a very picky project manager who wants things to be pixel-perfect to the mock-up. If it's the latter, you have my sympathies.

Focusing on the box model is important because it sets the right overall mindset for working with CSS layout. At the risk of being too patronizing, I would highly encourage everyone to at least read the MDN article on CSS basics[0] just to set a baseline for CSS terminology, the idea of the box model, and a few other things.

You should then read more detailed documentation [1] on the box model and start to get a feel for how it works in depth. Most pedestrian "spacing issues" should be solved at the level of adjusting margins and padding.

The other arm I mentioned was specificity, and this tends to be where a lot of folks get caught asking why their rules aren't applying and those sorts of issues. The documentation is fairly 'academic' but worth a read-through[2].

MDN overall is a great resource for a motivated learner, but unfortunately I don't have any 'CSS the right way' sorts of articles in my hat at the moment. Maybe others will post some.

[0]: https://developer.mozilla.org/en-US/docs/Learn/Getting_start...

[1]: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_...

[2]: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

css tricks has nice flexbox and grid guides that also have helpful pictures to show what the end result of CSS is:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

https://css-tricks.com/snippets/css/complete-guide-grid/

You sound a lot like me. I'll use CSS for colors/fonts/theming/separation and then do layout with tables :) . None of the stuff I work on is really all that complicated, so "tables are slow" just doesn't come up because the pages aren't large at all so 5ms vs 50ms doesn't matter.

Using tables for things that aren't tables is terrible for accessibility.

This really deserves to be echoed. Accessibility just isn’t taken seriously by web developers in general and it makes me so sad. If it’s mentioned at all most of the time it’s an afterthought and they try to shoehorn it in on existing code as an afterthought which just makes things worse.

I want to implore everyone on HN to not be one of those people

Why is it so bad for accessibility? I don't know much about web design.

Browsers, and therefore things like screen readers, see table elements as collections of tabular data. Using these elements for layout or design will cause a confusing and useless interpretation for people using a screen reader or analogous tool.

I like doing short challenges to learn and solutions to peak at in case I get stuck.

Andy Bell posted front-end challenges for a while, here's the archive: https://piccalil.li/category/front-end%20challenges%20club/

Codepen hosts challenges every week. They aren't always CSS focused but many of them are. https://codepen.io/challenges

Which editions did you read?

Many of the css options that make complex layouts more palatable have only been commonly supported more recently. (flex-box:2015 , grid:2017, newer units:2010)

I don't remember the specific editions, but it was a long time ago - long before flex-box and grid were around. Still, back then, people could work magic with CSS using floats and positioning and such, and I couldn't make any sense of it. Maybe it's time to pick up a more up-to-date book on CSS and try again with the modern timesavers.