It’s really easy to find yourself wondering how your CSS got to be such a mess.

Sometimes it’s the result of sloppy coding from the start, sometimes it’s because of multiple hacks and changes over time.

Whatever the cause, it doesn’t have to be that way. Writing clean, super-manageable CSS is simple when you start off on the right foot and make your code easier to maintain and edit later on.

Here are three tips for speeding up the process, writing CSS that is slimmer, faster and less likely to give you (or those you work with) a headache.

1.) Stay Organized

Just like anything else, it pays to keep yourself organized. Rather than haphazardly dropping in id’s and classes in the order in which they come to mind, use a coherent structure.

It will help you keep the cascading part of CSS in mind and sets your style sheet up to take advantage of style inheritance.

Declare your most generic items first, then the not-so-generic and so on. This lets your CSS properly inherit attributes and makes it much easier for you to override a specific style when you need to. You’ll be faster at editing your CSS later because it will follow an easy to read, logical structure.

Use a structure that works best for you while keeping future edits and other developers in mind.

2.) Don’t Repeat Yourself

Re-use attributes whenever possible by grouping elements instead of declaring the styles again. If your h1 and h2 elements both use the same font size, color and margins, group them using a comma.

3.) Use Useful Naming Conventions

You’ll notice above where I declared a couple of column id’s and I called them col-alpha and col-beta. Why not just call them col-left and col-right? Think of future edits, always.

Next year you may need to redesign your site and move that left column to the right. You shouldn’t have to rename the element in your HTML and rename the id in your style sheet just to change its position.

Sure, you could just reposition that left column to the right and keep the id as #col-left, but how confusing is that? If the id says left, one should expect that it will always be on the left. This doesn’t leave you much room to move things around later on.

One of the major advantages of CSS is the ability to separate styles from content. You can totally redesign your site by just modifying the CSS without ever touching the HTML. So don’t muck up your CSS by using limiting names. Use more versatile naming conventions and stay consistent.

Leave position or style specific words out of your styles and id’s. A class of .link-blue will either make more work for you, or make your style sheet really messy when your client later asks you to change those blue links to orange.

Name your elements based on what they are, not what they look like. For example, .comment-blue is much less versatile than .comment-beta, and .post-largefont is more limiting than .post-title.

With these three simple suggestions in mind, not only will you write better looking CSS, but you’ll communicate your intentions to coworkers more clearly and you won’t be lost when it comes to a future updates. Enjoy and happy coding!

Bonus: Here are 20 more useful CSS tips from HONGKIAT.com

To use the @import rule, type:

<style type="text/css">
 @import url("import1.css");
 @import url "import2.css";
 </style>

The url() is not required. The double quotes are required for valid XHTML, but browsers that support url() tend to support it with or without quotes.

You can also include an @import rule in a style sheet with styles:

<style type="text/css">
 @import url("import3.css");
 p { color : #f00; }
 </style>

@import rules must always be first in a document

Finally, you can also import a style sheet for just a specific media:

<style type="text/css">
 @import url("import4.css") tv, print;
 </style>

This acts the same as if you had defined the media type in the <style> tag.

Browser Support
Netscape 4.x and IE 3.x do not support the @import rule. Internet Explorer 6 and below do not support the media designation. IE 4.x has some support for the @import rule, but it’s spotty, and it’s best not to rely on it.