DEV Community

What do you find the most difficult with CSS?

Andy Bell on September 28, 2019

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?

Collapse
 
spences10 profile image
Scott Spence • Edited

Positioning things.

"Oh, so if I want that over there then I'll have to wrap it in a div then position the thing inside that"

Aligning/Justifying things.

"If it's not align items, then is it align self, right? Must be I tried all the other ones 🤷"

Collapse
 
hankchizljaw profile image
Andy Bell

Most people just run through the grid/flex alignment and justification properties until it works 😂

Collapse
 
spences10 profile image
Scott Spence

This! Right, it's sad but I have been there so many times.

Collapse
 
alohci profile image
Nicholas Stimpson • Edited

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 display property 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.

Collapse
 
mebble profile image
Neil Syiemlieh

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?

Collapse
 
alohci profile image
Nicholas Stimpson • Edited

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.

Collapse
 
hankchizljaw profile image
Andy Bell

Fonts leave space for their ascenders and descenders too, so even more complexity and confusion is caused by that.

Collapse
 
danburzo profile image
Dan Burzo • Edited

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.

Collapse
 
dirtycode1337 profile image
Dirty-Co.de

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.

Collapse
 
dirtycode1337 profile image
Dirty-Co.de

Also I've found an old tweet about CSS from dev.to ;) twitter.com/ThePracticalDev/status...

Collapse
 
mintuz profile image
Adam Bulmer • Edited

Shorthand notation.

I remember

  • padding: 0;
  • padding: 1px 2px 3px 4px

but I always trip up on the ordering of

  • padding: 1px 2px 3px;
  • padding: 1px 2px;
Collapse
 
dirtycode1337 profile image
Dirty-Co.de

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!

Collapse
 
mintuz profile image
Adam Bulmer

That's works for when defining 4 properties shorthand, but when you have 0 8px 16px It 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.

Thread Thread
 
dirtycode1337 profile image
Dirty-Co.de

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 :).

Collapse
 
hankchizljaw profile image
Andy Bell

I remember it with TRouBLe:

Top
Right
Bottom
Left

Collapse
 
viditkothari profile image
Vidit Kothari

TRouBLe seems nice. An alternate way can be to remember how clockwise movement.

Collapse
 
coswise profile image
Cos

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.

Collapse
 
hankchizljaw profile image
Andy Bell

Both very common head scratchers!

Collapse
 
eduardomrodrigues profile image
Eduardo de Moura Rodrigues

The positioning and flow

Collapse
 
prmnth profile image
prmnth
  1. Positioning , Centering

  2. Siblings

  3. Combinators

  4. em vs rem vs px

  5. CSS rule / writing order

Collapse
 
yinks profile image
Yinka Adedire

The ::before and ::after pseudo-element.