CSS Style Guide

Target appropriately

An example of targeting too tightly

There’s lots of unnccessary definitions in this. We want to target the unique elements with the minimal number of steps. This should be:

An example of targeting too loosely

This will affect every list on every page – including the navigation menus.

Responsive CSS

Prefer the use of em over px for font-sizing, padding & margins. Why? Because all screens on devices have differing resolutions. the em unit is relative and so – each device sizes content in a relative fashion that is applicable to itself. Using em gives you better responsive design.

Bad example – using px

Nuttify Champion Websites - CSS Style Guide - Don't use px for font sizing

The same code using em for font sizing

Use em for font-sizing

Break statements for multiple DOM elements onto separate lines

To make it easier to read, multiple targets must be on new lines. In this way it is easier to see at a glance which elements are targetted.

Bad example – too many elements on one line

Good example – elements split across new lines

 

 

Articles in this section

Like what you see?

Find out how we can build a champion website for you.

Call Nuttify today 1300 688 4391300 688 439
or send us a message
No comments yet.

Leave a Reply