I have some CS background and I believe I can grasp new concepts and languages fairly quickly. Yet I never really understand why is CSS behaving the way it's behaving, despite doing CSS (as part of full-stack) for quite a long time.
What is the best way and best material (either online or offline) to actually, really, properly learn CSS, so I know what are the proper interactions between all the styles, all the box models, all the flows, all the `inline-box` and `flow` and `flex` and so on.
Note that I don't need to re-learn the basics of CSS selectors and cascades, I understand that. I just don't understand all the subtle interactions of all the various flows and so on. And I end up copy-pasting those from StackOverflow.
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....
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.
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.
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’m not sure about the newer editions but the first edition exceeded all my expectations profoundly.
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 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.
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".
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.
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.
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.
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.