5 common CSS mistakes

As Steve Jobs used to say: “Always try to make ‘the things you can’t see’ beautiful, too”. Here’s five common CSS mistakes I’ve made in the past, that I’ll be sure to avoid in the future.

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.

John Alexander Rowley

An enthusiastic digital marketing professional passionately dedicated to increasing the online presence of businesses and individuals in order to improve engagement and ROI.

Why I love digital marketing

Redeveloping my website

JohnAlexanderRowley.com has been around since 2009, and seen three serious redesigns – The most recent of which was completed late last month. But why redevelop again in 2014 and what’s changed in this redesign?

Read the full article

Three tips to improve landing page effectiveness

Have you optimised for conversion, but still not seeing conversion rates improve? Landing page copy can often see landing page effectiveness skyrocket if done right.

Read the full article

Multiple backgrounds with CSS3

A nice little feature of CSS3 is comma separated values for background attributes, allowing multiple backgrounds to be defined against a single CSS element. No more overlaying several div’s!

Read the full article