Making Your Code as Beautiful as the Design Itself

screenshot_01A 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.
  • Semantics–Semantics are all about giving your items proper names. Name your classes and IDs with pertinent names, such as “header”, “nav”, or “bkg.jpg”. This allows anyone who needs to make updates to the site to find what they’re looking for quickly.
  • Shorthand–Shorten your background, font, padding, margin and border properties by using shorthands. Instead of using a single property for each, combine them into one. Instead of:
    • div { padding-left: 20px; padding-right: 30px;  padding-top: 50px; padding-bottom: 10px; }

    do this:

    • div { padding: 50px 30px 10px 20px; }

One CSS organization “tip” I personally hate is tabbing your rules into a hierarchy. In my opinion, this wastes space and makes it harder to read, but you can try that out and see if it works for you.

Organizing Your HTML

Organizing HTML is pretty quick and easy. Here are a few tips.

  • Tabbing–It’s important to properly tab your HTML code, otherwise it becomes almost impossible to read or find that one missing closed div. Convention says to tab once for each nested div, or div inside of a div.
  • Space sparing–It’s good to put some blank lines in between sections of your code, but too many can be counterproductive. I tend to space out separate main divs.
  • Semantics–Like your CSS class and ID names, everything should be named properly, including images and video. This can save you loads of time in the future. Your main background image should be name bkg.jpg (or something similar), not image2345.jpg.

Do I Hafta??

Of course, you don’t have to organize your code or make it look good. After all, no one is really going to look at it, right?

Wrong. If you’re planning on coding for a living, lots of people are going to look at your code. In fact, you may be losing business without even knowing it! A lot of potential clients will pass on a coder if their portfolio and own site are filled with nasty code.

Share Your Tips!

What are some of your tips for great looking code?