DEV Community

Discussion on: What do you find the most difficult with CSS?

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