How to Optimise your CSS for Improved Website Design : Part 3
CSS Optimisation Principles
With Javascript-enriched web pages and CSS styles becoming popular in web design it has become increasingly difficult to keep the maximum size of a webpage below the 30 KB optimum. Optimising your CSS code makes it clutter-free, organised, efficient and reduces the file size.
Using Shorthand :
Shorthand CSS combine several lines of code into a single line to make it weigh less in terms of file size whilst also remaining readable for the developer or shared users. A number of selectors incorporate the shorthand technique and it has become CSS best practise to use these shorthand properties whenever possible. Properties which use shorthand include:
- font
- border
- Margin
- background
- padding
- list-style
- outline
Using a shorthand can reduce the following code to a single line by combining values:
p { margin-top: 20px;
margin-right: 30px;
margin-bottom: 20px;
margin-left: 30px; }
Can be reduced to the following single line:
p { margin: 20px 30px 20px 30px; }
The reduced amount of code required to perform the same actions means that you can drastically reduce the CSS file size resulting in reduced loading times.
This shorthand technique views the values as defining the following attributes in the order Top, Right, Bottom, Left (a clockwise direction starting at the top). So the numbers can be refined further:
margin: 20px 30px 20px 30px; = Top 20px, Right 30px, Bottom 20px , Left30px
margin: 20px 30px 40px; = Top 20px, Right and Left 30px, Bottom 40px
margin: 20px 30px; = Top and Bottom 20px, Right and Left 30px
margin: 20px; = All four sides 20px
Browser Hacks :
As modern browsers become more intelligent and incorporate modern styling techniques into their display, older browsers still have enough people using them to prevent designers disregarding them as obsolete. Hacks (also known as correctional declarations) are used to target specific browsers with a corrected code to make them follow the required style.
One method which can eliminate the need for correctional declarations at each pitfall is to use a conditional comment. A conditional comment checks for the browser in use and loads up a new style sheet dedicated to that browser. So if someone views your website using IE7, you load up the IE7 CSS for them and no other browser need to load the extra weight (increasing loading time only for the poor IE7 user).
Reduce Whitespace :
Eliminating unnecessary whitespace is a productive undertaking as each line-break, tab and space is counted as an additional character increasing the overall file weight. Compromise is required however. Clearing your code from all whitespace makes it unreadable for humans such as yourself and any other developers who are required to view the information to make alterations or updates to the styles. Leave enough space so that the code is laid out logically but delete those areas that provide no additional readability.
Using Frameworks and Resets :
When using a framework or CSS reset, your code may include a lot of information which is not used within your website. Removing unutilised rules from the CSS makes your code lighter and more efficient. Frameworks and CSS resets are to be used as a starting point only and surplus elements are supposed to be culled.
Use this example when reusing your own code from a previous project also.
Documenting your Code :Designers benefit enormously from the notes left included within code to establish a consistency of site standards throughout and to allow yourself or other users of the code from duplicating markup and styles which are already implemented.
Revisiting older code which you have not viewed for years or passing on a style sheet for a colleague to make use of can be a baffling undertaking without detailed style sheet guides and markup guides to help understand it.
In an effort to reduce the file size of your CSS, it is a good practise to use additional documentation ourside of the CSS file to include this information rather than bulking up the code with lengthy comments.
CSS Compression : Compression tools offer an efficient and easy way to optimise your CSS code. The final results will not be readable by any human but the resulting file size will be only a fraction the size of the original and very browser friendly.
These applications offer examples of CSS compression tools: