When creating a html or CSS document it is not only important to make sure the page meets as many of today’s web standards as possible, it is also important as a web page editor to be able to easily find your way around your documents.  Here is a quick guide to help make editing your css files just a little easier.

Use shortcuts to streamline your code, for example instead of using the following -

padding-top:10px;
padding-right:15px;
padding-bottom:10px;
padding-left:15px;

Streamline it using the code below -

padding: 10px 15px 10px 15px;

This will not only save you time when writing your code, but also reduce the overall length of the page making it much easier to navigate.

Find a structure that suits you

When first learning CSS it is sometimes easier to use the stacking method, this is where each line of style inherits a new line on the page; but as you get more confident with your code it may be easier to keep each styling class on one line.  This will again help to keep you pages considerably shorter.

Add comments to break up your file in to easily understandable blocks

With many websites that you create you may revisit them quite some time after the build, this can cause problems when familiarising your self with the code again, using comments to break down your code can not only help you when editing a website but could also really help another designer who needs to quickly make some changes to a template they didn’t create.

I would recommend organising your CSS in to groups such as; divs, styling and navigation, this will give you a quick reference to your page.  At the head of each CSS group add a comment for example:- /*containing divs*/.  You can expand this theory and break the page down even further, but this is a good start.

There is much more to CSS layout than these few tips, but if you give thought to your layout from the beginning you will save yourself time and effort in the long run.