Web Design Tutorial – CSS Optimisation Video

Script From The Video Blog

Today’s web design video blog is a little bit different as we are featuring this episode as a guest post in association with webdesignlessons.com.

Earlier in the week, a question was raised by one our of blog readers, asking “Is there any point css optimisation when the file size is still so small? ”

To which we replied “yes! we think so (said together)”.

And for raising this web design hot potato, we thank Belinda from Carlyse

Well, stylesheet Optimisation is the process of ensuring that your CSS source code is concise and efficient. Although you can still create standards compliance websites without optimised CSS, there are other benefits from which we can seek more value.

Writing CSS using the least possible amount of source code is certainly good practice when it comes to web design, firstly, it improves the readability of the code, meaning that not only you, but other designers can easily navigate through your code.

On top of this, future style maintenance efforts could be simplified if you have a better understanding for example of how stylesheets actually cascade.

// Inheritance

Looking at the bigger picture, it is important to realise how styles relate to each other through inheritance.

Certain styles when declared are automatically passed onto to all child elements, including fonts, colors, sizes, text-alignment, etc.

Not all styles share the default inheritance, so it’s worth researching the default properties of individual selectors to improve your understanding.

// Notations

CSS notations are seen in various forms and preferences generally vary between designers.

The most common is of these is multi line notation where each selector sits aligned underneath each other.

This is certainly the easiest to read, however, on larger stylesheets, it can mean a lot of scrolling to find particular styles.

To side step this curve ball, you can keep all of you notations on one line. This makes it a lot easier to find certain styles.

You could in fact put the wholes stylesheet on one line… But that’s ridiculous!.

//A Working Example

Lets look at an example where we can start to actually optimise the code.

Now here’s a file that we have prepared to show how we can optimize the CSS without any effect on how the web page renders.

Now by taking a look at the CSS, we can start to look how to condense the code.

1.Understanding Inheritance

2. Zero Values don’t require a unit

3.Condense Your Colours

4. Condensing tags to share settings

5. margin and padding notation

That sounds I little bit like a song…

Song: If your margin, and your padding, mean that your css is flagging, just remember, you can always do it this way… top right, then bottom then left.

“…Actually it’s a bit like a clock”

Thank you for watching, please subscribe to our YouTube Channel, or follow us on Twitter at http://twitter.com/crearegroup.