It just sounds like you need to spend more time solving problems with CSS. "Knowing" CSS means being able to style most things without needing to check any resources or otherwise look for help.
Occasionally there might be a particular issue that requires contemplation or reading the manual, but that is true of any sufficiently complex design system, especially a living specification such as CSS.
I recommend familiarizing yourself with new features as they are adopted. For example, front end devs are going to need to learn Houdini.
I spent some honest time solving the problems in css. You know what was the industry/search approved solution 90% of the times? Some greasy hack that assumes sizes and doesn’t translate elsewhere or generalize into experience. You just start to know how to make a single x of X, but X is still as big.
Css is a pile of low-effort crap targeted specifically at ad-hoc problems web designers had. It can make front pages, and sucks at everything else.
That was way back, things are a lot better now than they were 15 years ago. Anyway, I got by quite far never assuming sizes with hacks like `height: 0; padding: 100%;` etc. But that kind of stuff is almost never needed today to get good results.
> It can make front pages, and sucks at everything else
I've made some very slick apps and widgets over the years using CSS. CSS isn't the problem, a lack of imagination is. CSS actually covers quite a lot of cases today, and with Houdini etc being exposed, the sky will soon be the limit.
This overcoming is pretty much the spirit of css, while in other gui frameworks you just do things. They don’t require imagination, just straightforward geometry. Presenting it as something cool is idk, don’t have a constructive word for that.
I see that you’re confident in css. Maybe you can help me with a simple task that I struggled with recently. (There’s a mountain of these but this one is fresh.)
There’s a flex-row-wrap root with grow-1 containers. Each container is a grid with two columns: fit label, auto control. Visually it’s row of forms of auto-size. Sometimes I want to put a long text into the control column, e.g. as a description of a preceding input. But it participates in size request and makes its grid expand and take all space in a flex row, or more. I want it to request zero space instead, as if it wasn’t there, but take whatever other “controls” received.
In a proper boxing model of a non-web library 15 years ago I’d set the text’s “size request” width to a small value and put all control-column elements into a size group. So they all request the same (max among) width. The predictability of the size request-allocate loop makes it trivial to figure out.
I expect some sort of ad-hoc restriction on either a grid, controls, flex root, whatever. It’s a good chance to disprove me and explode my imagination.
Occasionally there might be a particular issue that requires contemplation or reading the manual, but that is true of any sufficiently complex design system, especially a living specification such as CSS.
I recommend familiarizing yourself with new features as they are adopted. For example, front end devs are going to need to learn Houdini.