How to Optimise your CSS for Improved Website Design
Optimising CSS
Ensuring that your CSS is coded correctly can help improve the performance of your website. Optimised CSS will help your webpage load faster, make your code easy to follow for yourself or any other users and using CSS best practise will make you feel good inside.
Use of Selectors in CSS
Using selectors in your CSS to identify child elements of a parent element frees up a lot of additional information in the markup which is made unnecessary in the improved code.
Not only is efficient code layout good for file sizes, it also makes easier reading for the coder(yourself) and for any work colleagues that may be also using it. An example of clearer layout is indenting CSS to improve the readability.
Pseudo-classes
Alongside the descendent selectors, other selectors can help make your code efficient. Pseudo-classes selectors offer a type of class which applies to the status or position of an element. Pseudo-classes include:
- :visited
-
:first-child
- :last-child
- :only-child
These Pseudo-classes can be used to significantly reduce the amount of markup if correctly deployed.
Offspring
Employing offspring will allow your markup to make use of Pseudo-classes even on browsers which do not support it (IE6). Offspring is available in a complete or light mode.
CSS Shorthand
Employing CSS Shorthand techniques will make your code shorter, tidy and easy to read.
CSS Sprite
Using sprite maps in CSS allows web developers to select multiple images from a single master image. The master image is composed if a grid of images which occupy individual cells of the grid that can be accessed with the CSS code.
There are a number of CSS controls that make use of items that change state following an action including;
-
:hover
- :active
- :focus
- :visited
These can be combined with a html markup that divides the master image into links that can be manipulated with the CSS to create grid cells that hold the required image.
Image sprites can be used with CSS to animate sections of image on hover, buttons and irregular shapes without the need for javascript or image slicing.
State changes using a single image
Using a single image to represent a variety of states of an item’s appearance in CSS offers an alternative to replacing the item appearance with a new image for each state. An example is a button which changes appearance according to it being an inactive link, an active link or a link which has been hovered over.
Traditional methods apply an image for each of the 3 states of the button, meaning that 3 images will need to be loaded and alternated between. A quicker method uses a single image that contains all 3 states and simply selects a new area of the image to display according to the state.
This method of shifting position of a single image offers a much faster solution to replacing the background with a separate image on each state.