Cascading Style Sheets is a language for setting up the presentation semantics of a document that is written in a markup language. Almost every developer has encountered CSS to design websites. If you have downloaded a template that has come with a CSS file, you may have noticed that it may not be very organized. Below are 18 tips to clean up and keep your CSS organized.

1. Make sure the code is organized properly.

---

This step is extremely important, which is why I put it as the number one CSS standard. In order to make changes to your code, you will need to know exactly where to make adjustments. If your commands are all over the place, then you will waste time and will constantly have to use trial-and-error to make changes to your website. A couple of tactics I use is to keep everything grouped in one line or making sure that each element gets its own line. For example:

Good:

h1, h2 {font-family: Tahoma, Arial, Verdana; color:#ffffff;}

Good:

h1, h2
{
font-family: Tahoma, Arial, Verdana;
color:#ffffff;}
}

Bad:

h1, h2
{
color:#ffffff;}
}

h1, h2
{
font-family: Tahoma, Arial, Verdana;}
}

2. Add contact information and a swatch color hexadecimal guide in the code comments.

---

In your code, I recommend that you place your contact information and
/*

Designed by Redesigner.org
Contact: info@redesigner.org

swatch colors
——-
000000 = black
ffffff = white
98ff1e = lime green
ffc21e = light orange
1200ff = blue

*/

3. Use a top-down approach.

---

Lay out your stylesheet in the order of which your website loads. For example, put the generic classes at the top like body, a, h1, h2, etc. Then put items like #header, #navigation, #content, etc. Make sure to add comments for these sections.

4. Combine elements in the stylesheet.

---

For example, your h1, h2, h3, h4, h5, and h6 might have the same properties:
h1, h2, h3, h4, h5, h6 { font-family: Arial, Helvetica, sans-serif; }

5. Design a mock-up using a wireframe, Photoshop, or HTML first.

---

Before you dive in and start coding, you should take a step back and know exactly what you are getting yourself into: Where are you going to put DIVs, what colors are you going to use, what will your navigation look like, etc. You’ll save a lot of time if you create a mockup in a wireframe, Photoshop image, or HTML first. Once the draft is completed, then it will make coding the CSS easier using a top-down approach.

6. Make sure to use the right Doctype.

---

When coding CSS, make sure to use the write doctype declarations. This will determine whether your CSS will be validated or not. The entire look and feel of your website can also change depending on the Doctype that is declared. You can learn more about Doctype at A List Apart. It is good to use the HTML5 doctype for projects:

7. Comment, comment, comment.

---

In every programming language, it is highly recommended that you comment every function, variable declaration, etc. This way you know what controls different functions on your website or application. Commenting CSS is not any less important to do than other programming languages. Commenting is very simple too. Below is an example of how you comment on CSS:

/* Here's how you comment CSS */


8. Use hyphens instead of underscores.

---

The problem with older browsers is that they have a harder time comprehending underscores in CSS. Some browsers do not support underscores at all. In order to ensure that your website is backward compatible with all browsers, make sure to use hyphens instead of underscores. For example: top-navigation is better than top_navigation.

9. Avoid element repeating.

---

In order to be efficient and save space in your code, you can find ways to avoid element repeating. For example, if your h1, h2, and h3 elements have the same font size and color, you can clump them together. Below is an example:

Good:

h1, h2, h3
{ font-size: 2em; color: #000; }

Bad:

h1
{ font-size: 2em; color: #000; }
h2
{ font-size: 2em; color: #000; }
h3
{ font-size: 2em; color: #000; }

10. Test your code on as many browsers as possible.

---

When you are done coding your CSS, make sure to test your website on as many browsers as you can. If you test your website on Firefox and Flock and it looks fine, then the odds are that it will be problem free on Safari and Chrome. Also check to see how your website looks on Internet Explorer.

11. Know what the difference is between block and inline elements.

---

A block element is an element that takes up the full width that is available and has a line break before and after it. Examples of block elements includes “h1,” “p,” and “div,” tags.

An inline element only takes up as much as the width as necessary and does not cause line breaks. Examples of inline elements includes “span” and “a” tags.

12. Put CSS properties in alphabetical order.

---

In order to help you quickly scan through your CSS file, it is best to keep your CSS properties in alphabetical order. For example:


#function{
color: #000000;
float: left;
margin: 0;
padding: 0;
width: 150px;
}


13. Consider using a CSS compressor.

---

CSS Optimizer and CSS Compressor are two online tools that can help you shrink your CSS code. CSS compressors help you shrinks the CSS file size by removing line breaks, white spaces, etc. Although you may see a gain in performance, you may lose some of the readability of your CSS file so make sure to keep your original file.

14. Download the Firebug application.

---

Firebug is an extension that is important for every web developer. Firebug helps you debug JavaScript, inspect HTML files, find errors, etc. You can edit CSS in real-time using Firebug. Download Firebug from http://www.getfirebug.com/.

15. Be careful how you use absolute position.

---

Absolute position is a way to define where you want a div, an image, etc. positioned on a page to the exact pixel. The advantage is that it makes designing a website easier, but the disadvantage is that this property disregards other elements on the website. If you have multiple absolute positioned elements on the website, you may get frustrated when designing.

16. Validate your CSS.

---

You can validate your CSS using the W3C Markup Validator. This can help you quickly find errors in your code. Some things you will notice is that you forgot to close a div or another tag somewhere in your code.

17. Consider using multiple stylesheets.

---

Instead of making one giant stylesheet, you may want to consider using multiple stylesheets. For example, I have seen a WordPress theme that had a separate stylesheet for the navigation and another stylesheet for the basic design. However there will be a higher number of HTTP requests that are being made with multiple stylesheets.

18. After completing your CSS, use it as a template for future designs.

---

If you develop websites often, then you may want to take the CSS document that you recently completed and store it somewhere. Take that same document and prepare it in a way to use as a template for future use. Re-writing CSS documents from scratch over and over does not make sense, especially since a lot of the standards will not change for long time.