1 comment
Retweet

Simple Tips to Organise your CSS

Stylesheets can easily become large and unorganised if not properly structured. Planning ahead and careful organising is important to create a fast, manageable stylesheet. By sticking to these basic rules, you can write CSS that is leaner, faster and less likely to give you a headache.

Plan ahead and keep organised

Declare your main structural elements nearer to the top of the document, and then the less important elements further down. Use a structure that works best for you, and save a template for future use.

  1. Resets
  2. Main Layout
  3. Secondary Layout
  4. Miscellaneous

Break your stylesheet into modules:

@import "/css/layout.css";
@import "/css/print.css";
@import "/css/typography.css";
@import "/css/forms.css";

Use Comments

Each CSS file should have a commented area at the beginning of the document, which includes the date it was written, updated date and the author. Use comments to clearly define each section of code.

Use Consistent and meaningful naming conventions

Try to use names that will remain relevant over time. The ability to redesign your entire website by just modifying the CSS will be much harder if you use limiting names. Use versatile naming and stay consistent – use hyphens instead of underscores (some older browsers don’t like underscores) but use it consistently, eg:

#Sub-Content { width:500px; background:#f2f2f2; }
#Advert-One { width:100px; background:#f2f2f2; padding:5px;}

Not this:

#SubContent { width:500px; background:#f2f2f2; }
#Advert-one { width:100px; background:#f2f2f2; padding:5px;}

If you capitalise the first letter of each word, and separate with a hyphen – do this for all elements.

Group elements and use shorthand

Use groups to re-use attributes instead of declaring the styles again. This technique allows you to create compact yet powerful CSS rules.

So this:

h3 {font-size: 12px; font-family: arial, helvetica, sans-serif;}
p {font-size: 12px; font-family: arial, helvetica, sans-serif;}

Becomes this:

h3, p {font-size: 12px; font-family: arial, helvetica, sans-serif;}

Use shorthand to create optimised CSS:

h3, p {font: 12px arial, helvetica, sans-serif;}

Validate

Every stylesheet should be fully validated using the free W3C CSS Validator, and if you’ve got issues with your CSS not doing what you want it to, this can be a big help in rectifying any errors in your code.

This post was written by

Dave Cartledge

Dave works for integrated marketing agency Flipside, where he lovingly develops websites of a wide variety. Dave has been designing and developing websites for over 10 years. You can follow him on Twitter at @davecartledge or visit his website at davecartledge.com.

1 comment

  1. Reply
    Branny says:
    November 13, 2009 at 5:37 pm

    I agree structuring your css is a big help when coming to maintenance tasks. A good structure can speed up maintenance dramatically.

    I would say that too many calls to the server can slow your page load. I prefer to keep everything in one stylesheet. Print stylesheet should really be handled by the html, specifying the type print in the call to the css file.

    A further step in naming conventions (a method I use) is to separate class and id’s

    so id’s would follow
    #ThisIsMyId
    and classes
    .this-is-my-class

    This helps when using javascript to target items. especially when it comes to maintenance tasks.

Have your say: