The key reason why you (and likely most developers) struggle with CSS is because we underestimate it.

In reality, it is as complicated, maybe more so, than any programming language or framework you will ever come across.

The best way to start to get better at it, is to gain an appreciation for it, as a 'hard', technical thing. Which it is.

You do this by re-framing how you see it.

Instead of seeing CSS as an annoying way to 'style' pages, see it instead as a visual programming language for constructing visual guides (UI's) for your user.

You don't 'style' pages, you 'construct' and 'architect' them. It sounds weird to use these words, but they have a massive effect in changing your perception of what you're doing. And that has a massive effect on your impression and willingness to learn how to do it well.

Essentially, you can properly learn CSS by transforming it in your mind from a 'styling' problem thing, to an 'engineering' problem thing.

I've got a post on this coming up tomorrow, which I'll post here.

If you want to get a shout when the full post on this is up, you can drop your email on the site homepage here: https://planflow.dev. Or you can just follow the twitter account here: https://twitter.com/PlanFlowDev.

In the meantime, you can check out another post where I talk about this general idea at a higher level: https://simpleprogrammer.com/information-architecture-develo....

Minimalistic learning is the best way to master CSS.

Don't think of CSS as a whole but simply draw layouts and start by constructing those pages. Don't add anything more than the positioning of each element in the layout, along with their respective sizes.

After you've nailed layouts you can start learning to style components.

But start by learning how each element behave by default without styling ex. how input fields behave across browsers, along with their default properties etc. - It's very useful when you need to style elements that have different default styling across browsers etc.

When you understand the default behavior of elements then you should start by learning how to make the most basic form of elements the same across all browsers by ex. changing default values to something that works across all browsers.

At this point you're able to start styling your components entirely from blank and your styling will be the exact same across all browsers.

So this is where the fun begins. You should take one component at a time and think about how you want it to look and then break its "look" into parts like size, color, shadow, font, borders, positions, behavior etc.

Then simply start styling the component with one part at a time. Do not look up how to create specific components etc. (Like don't take a class from SO and just apply that and try to understand it.) instead learn the required rules to style a component in the way you want with as little properties as possible.

Repeating that for all the components on your site will give you a pretty good all-around grasp on CSS.

Man, I wish I knew.

Any language is a way of encoding the biases and preferences of a language designer. It makes some things easy and some things hard, so it nudges you do to things that fit their intended work flow. Learning a language is like getting inside the mind of the designer.

I've been completely unable to do that for CSS. Whoever designed CSS layout, they don't think like somebody who designs print pages (or we'd have had "grid" decades ago). They don't think like a programmer, or we'd have a rigorous algorithm we could study (and that browsers could implement consistently).

Of course it's designed by committee and evolved over time, so there's really multiple different paradigms within it. That just makes it harder, but even if I focus on one, I can't suss out what it was they were thinking. I'm guessing that each one was designed to be easy to implement on some extinct browser engine.

So my way of learning CSS is to take a first pass, and then stab manually at settings on the browser's inspector until it's close enough. Then I try to remember what worked until I can copy it into my CSS sheet, then re-render and repeat the process.

It might seem silly but there a few games you can play to learn flexbox or grid. For example:

Grid Critters: https://gridcritters.com/

Flexbox Zombies: https://geddski.teachable.com/p/flexbox-zombies

Flexbox froggy: https://flexboxfroggy.com/

I think you can see these games as pieces of a puzzle. You will need all the pieces to understand the big picture.

Also there a some books from A Book Apart you can try. https://abookapart.com/search?type=product&q=CSS

Maybe start with CSS3 for Web designers by Dan Cederholm https://abookapart.com/products/css3-for-web-designers

Another suggestion is to subscribe to The Codepen Spark: https://codepen.io/spark/

I typically use a subset of CSS. Get good at whatever grid framework you use and internalize that the layout will ultimately just be boxes inside of boxes inside of boxes, with some boxes spanning a row, etc (grids within grids within grids). That should always cover being able to achieve whatever layout you want (not just the page layout, component layouts as well).

Yeah, put this on and master the grid: https://youtu.be/S5S6s5dZXNM

Then start targeting down into your grid for specific things you need to style.

Getting the first part down will set you up for an easy time on the second part. Don’t try to look at a <Button /> and try to figure out if it’s gotta be flex-end or anything like that at first. Put that sucker in a grid item and don’t worry about it initially. You want to refine your ability to control things, and if you get fancy with CSS initially you will not get a handle on it.

_Pro CSS and HTML Design Patterns_ by Bowers is the book that finally made CSS and its relationship to HTML make any sense. The book is well composed, clear, and axiomatic without being parental. I recommended to my friend and after 5 minutes he shouted “This is answering all my questions!” and I felt the same way, ha.

I’m not sure about the newer editions but the first edition exceeded all my expectations profoundly.

Here's some resources that might help:

* https://jvns.ca/blog/2020/07/25/some-comics-about-css/

* https://jvns.ca/blog/2020/08/10/some-more-css-comics/

* https://jvns.ca/blog/2018/11/01/tailwind--write-css-without-...

* https://github.com/awesome-css-group/awesome-css

* https://css-tricks.com/guides/

I hear you. I am a successful backend engineer, but boy I have been struggling with CSS too for many years. It helped that this year I took up a full time role which needs me to do CSS and I have a mentor guiding me. You should also find a mentor for it.

What we really need is some kind of "logger" for how the browser interpreted CSS and made its decisions.

For example, if two boxes are overlapping even if you said margin is 10px, the browser should say something like "calculated box a to 500px wide. Box b is set to width of fixed width of 300px and is aligned to right. Hence its placement will be 0px from the right. Ignoring margin 30p,' Then you can reason that since screen is only 700px wide, there will be overlap. (I am making this is open obviously).

My point is, the browser almost never gives any feedback like a compiler would. It makes us think/guess based on "inspector".

Wouldn't feel too bad about not completely understanding every layouting feature. Many essentially introduce their own logic. Other than the box model there may not be that much commonality between them.

My best advice is to just always go to MDN for documentation, it tends to be pretty comprehensive. And once you remember most of the possible properties and values you might not exactly always get it right the first time but you should know what to try next. Having a decent workflow where you can experiment quickly helps too.

I look at other sites' markups a lot and it's pretty rare to see a site that doesn't have a ton of useless css/styles. So quite frankly I'd question how many people truly have a great understanding of it.

I haven't seen a proper course. In fact I haven't seen a proper course on HTML either. It's sort of like learning how to play chess or a real world language. But you can learn the foundations part by part.

CSS Tricks seem to cover it very well, and the almanac explains it in detail. A good place to start might be here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

If I find a snippet on SO that I don't fully understand, I check it with CSS Tricks' Almanac, like I would with checking an unknown word against a dictionary.

Learn it the hard way. The most challenging platform is styling email content with CSS and pushing it out to various webmail platforms if you can do that well you can do anything with CSS. Webmail is a form of embedded media. You just have to practice challenging things.

I see a lot of people struggle with CSS and so they try redefine their environments to make it less challenging, such as box-sizing. Just accept the reality of the environment and learn to solve for it.

These resources helped me learn Flexbox (one of the main layout mechanisms) easily: https://reactnative.dev/docs/flexbox https://yogalayout.com/

I avoided learning anything having to do with front-end for a long time, and I'm just now catching up. I've been doing a course on Responsive Web Design with scrimba.com, and that starts with a really comprehensive overview of CSS basics, including margin collapse, which I'd certainly been frustrated by in the past without having a name for it.

I have been through the same issues.

I think if a bunch of CSS experts got together and created a SCSS library with great naming, this would take a lot of the magic and lore out of what people struggle with day to day.