I, among many have a love hate relationship with CSS. It's simple, powerful and easy to learn, but it's often incredibly frustrating, dare I mention IE6? Annoying as it is, it's the one that I really look forward to coding, so much so, that I'm almost always found in Coda testing things out I've thought of or would like to try. All this playing around has taught me a lot about the language, so much so, that here are 5 ways to make your CSS better.

1. Comment.

CSS comments can be made for a single line or multiple lines, but regardless of how you pass your comments they are always passed to your users reading the file. So, not only does it make it easier for you to get to a certain section in your code, but it lets your users see it too. For instance, you could include a copyright notice, a contact number, a website. Anything! Comments help you out in more ways than one but the most important, it helps you find certain elements in the file. For instance, put a comment above all the link styles, then when you go through your work, you can find and edit the styles to your liking. Quickly. Another use? WordPress uses these comments to get the theme name, copyright and more. For the full syntax for WordPress, please see our Coda Clips post. 

Here's how you comment CSS in the cleanest way.

/* All CSS comments begin with forward slash and asterisk
and end with an asterisk and forward slash regardless if
the comment is many lines in length or if the comment is
only one line. */

At the top of every page I code, I'm adding in the following syntax, not only does this give users information about where it originated and who by, it gives me a chance to say that they can't copy it, redistribute it or anything else of that nature and that they are free to have a look around and see how I've done things.

/* All work copyright 2009, Lewis King. All rights reserved. This CSS file was originally created by Lewis, and  you cannot use it for your own work in full or parts. You're welcome to have a look around to see how things are done, but nothing can be taken without his express written consent. */

Then, underneath that, I categorise everything in to the following sub headers.

/* Main */
/* Reset */
/* Link Styles */
/* Header */
/* Wrapper */
/* Content */
/* Footer */
/* Other */

2. Reset.

Use a reset of some sort. Whether you are using the Eric Meyer Reset, the YUI Reset, or your own custom reset, just use something. It can be as simple as removing the margin and padding from all elements:

html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
pre, form, fieldset, table, th, td { margin: 0; padding: 0; }

Now I personally don't see the point in using a big reset like Eric and the YUI, personally, I only reset the padding and margin, like the example above. It's just the way I am, but, if you don't run any sort of reset, it could be a lot of time wasted, so give it a go.

3. Start right.

CSS is worthless without a well formatted document. You need to write your HTML before you write your CSS. If you write the CSS first, it'll be a lot harder to get the end results and will take a lot more time than it's actually worth. After remembering all the elements, how you've named them and what they do, trying to add them into a document that might not work the way you want, is going to take a good few hours. Write the whole HTML document first, then do the CSS. Not the other way round.

4. ABC

By alphabetizing your work, you are creating consistency that will help you reduce the time you spend searching for a specific element. By doing this, you can quickly get to the specific property you want to edit and work on it there and then. It also makes your code cleaner for you to read at a later date, along with your users who want to quickly see how you've done a certain thing. 

5. Use Coda Clips

Back to my favourite coding application again, you must thing we're sponsored by it! Coda includes a little add-on of sorts called Coda Clips. What they do is genius. They are a great way of inserting common elements and syntax into a file with just a click of a button. Open up the Clips menu and you instantly see a bunch of different HTML elements, that you could forget when creating a site from scratch. After choosing the one you want, you simply click it, or drag it to where you want and it's instantly inserted into the page. They come with every install of Coda, even the free trial and are editable down to the finest detail. You can add your own, edit the defaults, and more. For some of our favourites, please go here.

What's your favourite way? How do you speed up your coding? How do you keep your code clean? Post a comment below to start the discussion!