I’m writing a new book that teaches you how to write CSS from scratch, so I’m curious about what people find the most difficult with CSS.
Also, what do you wish you were taught about CSS, early on in your career?
I’m writing a new book that teaches you how to write CSS from scratch, so I’m curious about what people find the most difficult with CSS.
Also, what do you wish you were taught about CSS, early on in your career?
For further actions, you may consider blocking this person and/or reporting abuse
Positioning things.
Aligning/Justifying things.
Most people just run through the grid/flex alignment and justification properties until it works 😂
This! Right, it's sad but I have been there so many times.
Without doubt, I wish I'd learnt the underlying concepts of CSS earlier. For example, because CSS rules bind the element that is the subject of the selector to the declarations, it's not at all intuitive that the fundamental building block of layout is the box, and not the element. Only once I'd grasped that, could I see that the
displayproperty is about how each element maps to zero, one or more boxes, and I could form a proper mental picture of how these boxes were established and how they interacted with one another.The other area that's distinctly non-intuitive is the line box. Line boxes are effectively constructed from inline boxes in an inside-to-out fashion, rather than left-to-right, or DOM tree-order. The line box is an emergent construct, no properties directly address it and there's no way to display its boundaries in a browser when its containing block has more than one line box in it, so it's very difficult to visualise. Yet it is critical to understanding how text is laid out on the page.
I've watched and read many CSS tutorials but haven't heard of these things before. Are there any particular resources that helped you grasp these concepts?
Yes, but it's not easy reading. I read and kept re-reading the CSS 2.1 specification until the concepts gradually sunk in. I combined that with time spent using jsfiddle or jsbin trying experiments to see what happened, and when the behaviour wasn't what I expected, searching the spec for an explanation. When you initially read it, the language it uses is quite daunting, but with re-readings it slowly comes to you, and it becomes clear just how much information is packed in there.
In particular, I recommend reading sections 2 through 7 of the CSS 2.2 spec which provide the grounding for CSS, yet are regularly skipped because they don't contain the description of any CSS properties.
Fonts leave space for their ascenders and descenders too, so even more complexity and confusion is caused by that.
Finding the balance between touching the HTML vs. touching the CSS approaches; the first being oriented on providing CSS utilities you can compose by attaching classes to elements, while the latter insisting on semantic markup that gets appropriate styles via CSS (either through repetition or through a preprocessor that does the composing).
Basically: methodology. Seeing in patterns. I'm still formulating mine :-)
Mental models and associated rules of thumb help. For example: margin = external geometry, padding / border = internal. Associated rule: handle external geometry in the parent container, not the element itself. Et cetera.
Top issue:
How does z-index really work. I've usually done it in trial & error until it worked, but I know there is a concept behind with its stacking order and how browsers create a new stacking context but I've never looked under the hood very deep.
Second struggle:
Make text-ellipsis if a text is overlapping a fixed height box.
Third: Beautify scrollbars ... ;)
What could have helped me earlier?
Knowing the power of selectors and its strenght by understanding its CSS specificity.
Also I've found an old tweet about CSS from dev.to ;) twitter.com/ThePracticalDev/status...
Shorthand notation.
I remember
padding: 0;padding: 1px 2px 3px 4pxbut I always trip up on the ordering of
padding: 1px 2px 3px;padding: 1px 2px;I am now doing WebDev stuff for over 11 years and heard the rule for remembering which property stands for what a few weeks ago: clockwise! Couldn't believe that I've not come across this earlier!
That's works for when defining 4 properties shorthand, but when you have
0 8px 16pxIt doesn't quite work, though discussing this with a colleague and we just outright said why would you want to do this as it will confuse everyone as it's less common.Agree, it is confusing.
But for 3 properties you can still start remembering it clockwise and if the last one is missing, it must be one of the three before - and if you remember the 2 property notation you know, one of the values is duplicated to the other property and finally you know:
top
right
bottom
are already defined and only left is missing, so it must be the same as right.
Nevertheless, it can be avoided simply :).
I remember it with TRouBLe:
Top
Right
Bottom
Left
TRouBLe seems nice. An alternate way can be to remember how clockwise movement.
There are a lot of cool things out there with CSS but I find very annoying the lack of support across different browsers.
Sometimes there is that specific thing that can be solved with few lines but because of the no-support we have to do a lot of turn around.
Both very common head scratchers!
The positioning and flow
Positioning , Centering
Siblings
Combinators
em vs rem vs px
CSS rule / writing order
The ::before and ::after pseudo-element.