5 Tips for Better CSS Files

While working on medium to fairly large websites, I’ve recently found it helpful to apply certain coding practices in my CSS files to help readability, and to ensure that any future developers (including me) will have little difficulty editing the CSS code. Since my main CSS files nowadays often end up being anywhere from 1000 to 2000 lines long, here are some quick tips that I think help CSS code to be more readable and web developer-friendly.

1. Indent CSS Using the Same Structure as the HTML

I don’t know why this isn’t more prevalent (at least it’s not written about a lot online), but I recently started doing this after viewing an online video from a fairly popular CSS developer and blogger. Having the Web Developer Tool Bar in Firefox helps track down CSS fairly quickly, I find the indenting actually assists the development of the site itself. It’s much easier to read the CSS and see what the code is doing, even as you type. Especially is this important if the project spans many weeks or months, as the structure of the HTML and how it relates to the CSS styles can easily go forgotten. So, indent your CSS in a hierarchical manner so you can easily match a nested section of HTML to its CSS counterpart.

2. Use Lots of Spacing and Comments

The comments are generally a no-brainer. All good code is commented. But the spacing is simply for readability. I know, the more white space you have, the more bandwidth it’ll cost you, but you can always remove the white space towards the end of the project, if necessary. And spacing should not just include that which occurs as entire lines between ID and Class groupings — I personally like to see white space in between all the selectors and colons as well as between grouped styles that are organized all on one line (as opposed to one on each line within the group, as seems to be most common). So do this:

#example_section {
  float: left;
  width: 300px;
  height: 400px;
  background: url(../images/example_image.jpg) no-repeat 0 0;
}

.example_section_2 {
  color: #fff;
  line-height: 14px;
}

Not this:

#example_section{
  float:left;
  width:300px;
  height:400px;
  background:url(../images/example_image.jpg) no-repeat 0 0;
}
.example_section_2{
  color:#fff;
  line-height: 14px;
}

The difference is subtle in this short example, but the first example is much easier to read when applied to a 1000+ line CSS file.

3. Always Use External Files to Hold Your CSS Code

This is a basic tip, and all good developers should do this. If your main CSS file applies to dozens, or even hundreds, of content pages, then your pages will load faster with an external file because all subsequent page loads will get the CSS code from your browser’s cache. Thus the CSS will only load once, saving bandwidth and improving user wait times. And of course, the other benefit is that the CSS stays separate from the HTML, the same way the JavaScript should, keeping the 3 layers of front end web development clean and separate.

4. Keep Default Styles and Link Styles Near the Top

For me, this one is a bit of a personal preference. I like to know that all my default styles (CSS reset code, heading styles, unordered list styles, hyperlink styles) are easily accesible near the top of the CSS document. After all, those styles are not always part of the HTML hierarchy, and often won’t fit well with the DIVs, custom paragraph tags and the like. So when I do a high-speed scroll through my CSS code, I know that when I get to a certain section near the top (in my case the section that styles all hyper links on the page), then I know that all my default styles have ended and the hierarchical section begins. And with some effective commenting, the rest of the document can be just as easy to scroll through and find a particular section.

5. Use Shorthand Notation

This will improve your CSS code immensely, as well as save a few kilobytes in bandwidth. Basically it means putting related CSS styles on one line instead of declaring them all using separate selectors. So for example, here is a long-winded example of applying a background image to a DIV tag:

#my_example {
  background-image: url(../example_image.jpg);
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: 0 0;
}

And here is the better shorthand version of the above code:

#my_example {
  background: url(../example_image.jpg) transparent no-repeat 0 0;
}

Much easier to read, easier to maintain, and the order of the values doesn’t matter, so you can make the reference to the JPEG image the last value if you prefer.

Benefits While You Develop as Well as in The Future

The benefits reaped from these tips will not only help developers working on the site in the future, but will help you during the process of developing the site. Often, client requests and other project details interrupt the workflow. That can put a damper on your mental ability to stay focused on how you’ve organized your code. To ensure that your code doesn’t become an unintelligible mess, keep things neat and organized and you’ll see the benefits now as well as in the future.