A website’s design gets all the glory. When someone visits a site, you’ll hear them talk about how awesome the design is–but, do you ever hear someone talk about how awesome the code is? Never!

Regular people can’t see code, nor do they care to see it or what it looks like. It’s precisely this reason that there’s so much ugly code in the web world today. People don’t see it so developers don’t believe that clean code is important, but it is.

It’s quite rare to find a clean coded site, even from huge companies who should have the budget to pay for a good developer. However, it’s just as important to have beautiful code as it is to have a beautiful design.

Why Should It Matter?

Most of the time, messy code works just as well as clean code. So why should it matter if it’s pretty or not?

• Quicker to update–Organized code is easy to navigate and update. Save yourself some time in the future by making stuff easier to find now.
• Faster loads–Often, clean coding uses less code, which means it’s faster to load.
• Professionally–Would you rather pay someone who gives you a junk heap of code you can’t read, or someone who hands you correctly nested and organized code? Which one would make your life easier? Which one shows more professionalism?
• Find errors–With organized code, there’s less of a chance you forgot to close a tag or that you closed them in the wrong order. Plus, if you do make a mistake, it’s a lot quicker to find it.

Beautify Your CSS

There are several ways that I’ll show you how to organize your CSS. Of course, beauty is in the eye of the beholder, so you may not find that what works for me, works for you. Experiment with a few different ways you can organize your code to find what works for you.

• All in one line–Placing the entire rule on one line shortens the document, making it a smaller file size, easier to read and quicker to locate what you need. For example, instead of:
  • div {
background: #FFF;
font-style: italic;
font-size: 18px;
margin: 20px;
padding: 10px;
font-weight: bold;
}

  Try doing this instead:

  • div { background: #FFF; font-style: italic; font-size: 18px; margin: 20px; }
• Group like elements–I like to group similar rules together so that I can find everything I’m looking for in one section. For example:
  • div.element {}
div.element a {}
div.element ul {}
div.element .class p {}

    div.other {}
div.other a {}
div.other p.class {}

• Sectioning–It’s also good to section off your CSS by the area of the website where it is located. I use comments to call attention to the sections and usually section them off by header, nav, footer, main page and subpages.

continue reading…