I know many people find CSS quite difficult, and often I see this gif shared as an example of how people work with CSS:
But if you’re doing CSS like this, YOU’RE DOING IT WRONG! CSS isn’t that difficult, but sometimes the chosen syntax does make me WTF. Here’s some examples of that:
Comma inconsistencies
Sometimes you need a comma to differentiate multiple values, like:
transition: color 200ms, background 200s;But sometimes not:
transform: translateX(-50%) translateY(-50%);
Why isn’t this consistent?!
Slashes in shorthand
Ever seen this?
font: 12px/18px "Lucida Grande", sans-serif;The first 2 values are shorthand for font-size and line-height. Why they’re separated with a slash though seems unusual as I’ve not seen that used anywhere else.
Apart from you can apparently use it in border-radius (here’s an article explaining that) to separate horizontal and vertical axis, but again – that’s inconsistent to how we do it elsewhere!
Camel Case or hyphen?
CSS has always been hyphenated, for example background-color, text-transform etc, so why did we start adding camelcase like translateY, rotateX? It’s inconsistent!
Edit – Also, overflow-y and translateY – Y so different?
Vertical Percentages are Relative to Container Width, Not Height
I didn’t actually realise this for a long time. It can be really useful once you know what it’s doing. Here’s an article about it. But why can’t I also set a height based on a percentage of the container’s height?