CSS is an amazing web tool, but it can easily get messy or sloppy. To get the best out of it, you must stay organised. So no more sloppy code, or unrecorded hacks. Your education in organising your CSS code is about to begin.
Keep organized. Rather than dropping in classes and id’s at random, try and keep things structured. Declare generic items first, followed by the not so generic items, and keep to that pattern. That way other developers are going to be able to follow the code, which is one of the great advantages of using CSS.
Title, sign, date. Ensure that people know it was you that did the design. This is helpful if another designer needs to clarify something with your design. This is especially helpful with a template.
Template libraries are brilliant. Once you have a good layout, strip out everything that is not generic to the template and file it. It is pure madness to write every style sheet from scratch, so this will save you a lot of time for your designs.
Remember you can save variances on a theme by saving them in a certain way, two column layout, blog layout and so on and so fourth. There are some good editing tools which will help you to do this.
Naming conventions are useful. Good naming conventions can make a lot of difference when you come to modify the design. The key here is to use generic names rather than what the element is. So instead of .largefont, .title is far more a useful name.
This has far reaching scope when it comes to modifying designs, so think carefully about what you are calling them, and this will save you a lot of work in the future.
Avoid using underscores. As backward compatibility is an issue with CSS that use underscores, try and form the habit of using hyphens instead. If you do, you will save yourself a lot of modification work later on, trying to figure out why your code is not compatible with older versions of IE or Firefox.
Repeating yourself is to be avoided. Always look to group elements where possible. This saves time coding and compiling, and try to utilise the opportunities for short cuts too.
Optimize. On the same theme try and cut down code wherever possible. So group and employ shortcuts as above. The fewer lines of code, the faster the page loads, it is as simple as that. Loose what is unneeded, and remember that zero can just be stated without a unit.
Write for Gecko. If you write your CSS design for Gecko browsers, tweaking for Webkit and IE will be easier than the other way round. So make sure Gecko browsers work first before you do anything.
Use a validator. If your CSS design is stuck, use a validator to find errors. W3C has a free validator, and this will be a big help in getting your design back on track.
Keeping it clean. By keeping browser specific CSS style sheets individual, and just use java script, server side code, or conditional comments when needed, will help you keep things clean and tidy.
These CSS tips for keeping your code well organised will not only help you write better code, but better templates too. Your colleagues will also benefit from a tidier coding from you, and you will be better thought of as a designer.
You will find that projects are easier to work on with a little organisation, and you will be able to find the information you need faster for subsequent modifications.