For those of you who’ve read the inspirational ‘Jobs’ biography, you’ll know that Steve took great care in designing “even the things you can’t see”. The author (Walter Isaacson) uses the following metaphor: “A carpenter wouldn’t use cheap MDF on the back of an oak chest of drawers just because no-one will see”.
The book got me in a particularly reflective mood. “Do I always try to make ‘the things you can’t see’ beautiful, too?”, I considered. In particular, I thought about code behind the websites I work on. I concluded “Probably not”.
Here’s five common CSS mistakes I’ve made in the past, that I’ll be sure to avoid in the future.
Using an ID and not a class (or visa versa)
- An ID should be used for a unique element (eg. a wrapper)
- A class can be used multiple times within the same document/page.
Repeating code unnecessarily
- Condense deceleration (such as margin attributes) into their short hand form
- Avoid using PX where not required (“Margin: 0 0 10px 0″)
- Group items with the same deceleration together (eg. If all headings have the same colour, font-weight and font-family).
Overriding attributes with !Important
- A continuation of above, using !Important should be avoided if possible
- Instead separate that attribute out and code elements individually
Using clearing ‘hacks’
- If you’re using “Clear: Both” you should probably check your positioning
- There’s a lot of buzz around the “Clear” attribute being a hack, nowadays
- Try using “Overflow: Hidden” instead. It seems to fix a lot of problems.
Not using relative units
- Pixels are (should be) a thing of the past
- Using “em” or “rem” ensures pages work on various screen sizes
- Also means you can change global font size easily!
Some of the above might not be technically “mistakes”, but with best practices moving quickly it’s important to take care over the “behind the scenes” code, even if the audience (and client) are never going to see it. You know it’s there, and that should be enough to make sure you do it right.