My CSS mistakes

This is inspired by a video Kevin Powell did, which was itself inspired by Geoff Graham's CSS Tricks article. Here are my stupid CSS mistakes.

background-colour !== color

Sometimes, if I don't have text on an element, instead of writing background-color: red I'll instead write color: red and then spend ages wondering why the background colour hasn't changed.

It's obvious if there's text there because it'll be the colour I expected the background to be. But if not it can take me ages to work out what I've done. The IDE and browser will both tell me the CSS is fine. It just seems to be randomly not working for some inexplicable reason. Until I realise what I've done.

colour

Most of the time when I write CSS it will auto-complete, so I only get a few letters into the word and it'll spell it the American way for me. But on the occasions I'm coding in something that doesn't have auto-complete (eg CodePen) I have to type the whole thing and naturally I spell it the same way I spell it outside of coding.

At least this mistake is easy to pick up because whatever I've written it in will complain about it. And since I do it quite often, I know what I've done.

Media queries

Sometimes I write the media query and then assume it knows what I'm talking about. For example:

@media (min-width: 1250px) {
  color: red;
}

I know what element I want to make red once the browser width reaches 1250px. Unfortunately, the browser cannot read my mind.

margin

It's a short word, very easy to type. Except that when coding I am incapable of putting all the letters in the right order. The first and last letters are generally right, but then rest could come out in any order.

Generally speaking auto-complete saves me on this one, again it's the occasions when I don't have it that I end up re-typing bits of the word.

margin and padding order

If there are four properties I know they are North, East, South, West and that's fine. But if there are two, are they top/bottom then left/right or the other way round? I purposely don't write these because they confuse me. I'll write two separate lines, one for block and one for inline. But I often come across someone else's code where they have two properties and I have to modify one.

It doesn't matter how many times I do it, I always get it the wrong way round. No matter how many times I think "I know it now, I'll remember for the future", I've then forgotten the next time I come to it.

On the plus side, at least I can try it, discover that's wrong and then change it to the other one. I know I have a blind spot with it, I know it'll take me two goes to get it right; I don't have to spend ages trying to find the mistake.