Organized CSS

CSS code can get messy if you aren't careful. It might not seem like a big deal when you're working by yourself but as soon as you start working with someone else you'll probably hear some complaints about your messy code.

Clean formatting is always a good practice but beyond that there are some basic things you can do in your CSS files to keep them organized and easy to track.

One thing that can get out of hand are font sizes. At the top of my the main CSS file for a site I like to set a default size for fonts for a bunch of tags all at once. Something like this:

body, div, p, td, form, input, textarea {
  font-size: 11px;
}

Then to create variation in my font sizes, for instance a titles class, I'll use percentages of that global size like this:

.titles {
  font-size: 120%;
}

By setting all other font sizes as a percentage of the global size it also makes it very easy to change the font sizes of the entire site all in one shot which is nice during the development process.

Mixing ID settings with class settings is a great way to keep things organized as well. For example, I might have two blocks on a page that both have a content to them but they also have different font sizes and colors from each other. I'd like to name the classes for them both "content" so it's readable so I'll use ID blocks with sub-classes. For instance:

#block1 .content {
  background-color: #232323;
  color: #fffffe;
}

#block2 .content {
  background-color: #dfdfdf;
  color: #000000;
}

Then I could use those in the HTML like this:

<div id="block1">
  <div class="content">
  Hey, this is block 1!
  </div>
</div>

<div id="block2">
  <div class="content">
  Hey, block 2 is here!
  </div>
</div>

Now I've got readable names and code that's easy to follow. Anything that's within the div tag's with id block1 that has its class set to content will have a dark background with light colored text. Let's say we take this up a notch though. Let's say that on a specific page I'd like to use block1 and content but I want the content on that page to have a different font size. To solve this I'll create another class that extends block1's content class like this:

#block1 .content.pagename {
  font-size: [size]; // size would be defined, duh
}

My HTML to use that style would look like this:

<div id="block1">
  <div class="content pagename">
  Here's the content with a different font.
  </div>
</div>

Note the space between content and pagename in the HTML. The first time I saw that I thought something was coded wrong but it is no mistake. That's how it works.

So, have at it then!