7 tips to improve your CSS

Are you looking to improve your stylesheets by creating better CSS? Then take a look at these tips.

1. Create conventions for standard structure elements

If you work often with stylesheets, you should definitly make sure that you have a commonly used classes and ids naming structure. This way you will gain a lot of time by not having to endlessly scan your stylesheet.

2. Format your CSS with sections

For better structuring of your stylesheet, a good idea also is to create delimited sections of your CSS. It’ll make it easier to scan through and quickly find what you are looking for.

3. Keep your CSS separated form the HTML

Even if you are using page-specific CSS, you are probably better off creating a specific stylesheet regrouping all page-specific CSS rather than using inline or in-page CSS.

4. Use classes and id’s where appropriate

Only use ids for unique identification of a page element, for everything else use classes. If you are not careful with this you could run into problems when modifying your website.

5. Format your CSS consistently

I am not going to tell you if it’s better to format your CSS with one line per element or by using block display, but when you made your choice you should stick to it or your stylesheet may turn into CSS hell.

6. Use shorthand as much as possible

Shorthand CSS not only makes your stylesheet lighter, it also helps to make it easier to scan by having less properties.

7. Include color references

It took me a long time to get started using this tip, but I don’t regret it. Including your color scheme’s references will definitly be a time-saver on the long term.

9 Votes, Rating: 3.33

18 responses so far!

• 1 Graphic Design Links and Tutorials ~ Dec 12, 2009 at 12:33 am

  7 tips to improve your CSS…

  Are you looking to improve your stylesheets by creating better CSS? Then take a look at these tips….

• 2 zabox.net ~ Dec 12, 2009 at 12:34 am

  7 tips to improve your CSS…

  Are you looking to improve your stylesheets by creating better CSS? Then take a look at these tips….

• 3 Dean ~ Dec 12, 2009 at 3:16 am

  “Include color references”

  You’ll need to explain that one a bit more – it’s way too vague.

• 4 7 tips to improve your CSS ~ Dec 12, 2009 at 6:28 am

  [...] Visit Source. [...]

• 5 tripwire magazine | tripwire magazine ~ Dec 12, 2009 at 6:44 am

  [...] 7 tips to improve your CSS [...]

• 6 Jim Gaudet ~ Dec 12, 2009 at 9:20 am

  I try to keep my CSS clean and easy to read, but then I will clean it up for production…

  How can I not subscribe to a website named CSS Orgy? That’s great..

• 7 Brian Jones ~ Dec 12, 2009 at 12:48 pm

  Thank you for the refresher!

  @Dean – Adding your color scheme to the CSS: Whatever color scheme you are using for your site – include this in your CSS comments. Let’s say you are using White, Black and Blue as your color scheme on your site: Place this inside your CSS:
  White: #fff
  blue #192543
  black: #000
  It is recommended to add this in your top Comments above all Styles. Included in these comments should be the author, date and title of the site. An example may be:

  /* 12-12-09
  My First Website
  Brian Jones
  Colors:
  White: #fff
  Blue: #192543
  Black: #000
  */

• 8 Angie Bowen ~ Dec 12, 2009 at 1:34 pm

  I started adding my color scheme at the top of my css file about a year ago and I can’t sing the praises of this tip enough.

  It’s also very helpful when creating alternate color schemes for premium & free themes.

• 9 משחקים מהחלומות ~ Dec 13, 2009 at 2:42 am

  [...] CSS Orgy » Blog Archive » 7 tips to improve your CSS [...]

• 10 70+ Useful Community News for Designers and Developers | tripwire magazine ~ Dec 13, 2009 at 10:52 pm

  [...] 7 tips to improve your CSS [...]

• 11 70+ Useful Community News for Designers and Developers | Afif Fattouh - Web Specialist ~ Dec 14, 2009 at 12:06 am

  [...] 7 tips to improve your CSS [...]

• 12 areapal ~ Dec 14, 2009 at 3:10 am

  its excellent! useful tips.

• 13 links for 2009-12-16 « random thoughts and casual ruminations ~ Dec 16, 2009 at 4:16 am

  [...] CSS Orgy » Blog Archive » 7 tips to improve your CSS (tags: css tips) [...]

• 14 favSHARE ~ Dec 16, 2009 at 4:33 pm

  This article has been shared on favSHARE.net. Go and vote it!

• 15 7 tips to improve your CSS | favSHARE.net ~ Dec 16, 2009 at 4:34 pm

  [...] Read the original article [...]

• 16 Helal Rahmat ~ Dec 27, 2009 at 6:25 am

  Hello,

  This is blog.How can I improve it ?

• 17 Itsashirt T shirts ~ Jan 13, 2010 at 2:24 am

  I’m a newbie with css, maybe your tut will help me one step further, thnx

• 18 Joseph McCullough ~ Feb 1, 2010 at 10:07 pm

  Nice article! Coding conventions are a must! To anyone who plans on ever doing web design in a team environment, it is very important to have consistent conventions used in your code. This improves the readability for those who did not author the code but must adjust it. I believe the most underrated convention is that of the order of your CSS. Where do you put your general classes, your tag specific classes? It’s extremely easy to find a solution with your CSS code and be done with it. What separates good coders from decent coders is the patience the good coders have to collect themselves after successful results and focus hardcore on readability and logic in the code. Just because the code works doesn’t mean it’s good code!