Simply Code

You have been working on your website for the past few hours, and your CSS is getting bigger and bigger… At this point it is critical that your CSS is “readable” and its classes and ids are easy to find, otherwise your time spent on this project will expand beyond your budged limits (if you have any).

In this article I will explain some methods that will help you avoid this problem and make your work with CSS easier and more comfortable.

1. Break the code into sections using comments

Use comments to organize your CSS code into sections. This way there will be no doubts about which part of stylesheet belongs to the specific section or element in HTML markup and scanning through stylesheet will become allot easier task for your eyes.

HTML:
<div id="wrap">
<div id="header"></div>
<div id="content"></div>
</div>

CSS:
/* WRAP
*************************************/
... your css goes here
.
/* HEADER
*************************************/
... your css goes here
.
/* CONTENT
*************************************/
... your css goes here
.


2. Use section anchors

Section anchors are also known as flags or section selectors… but I prefer to name them section anchors because they have quite similar function like anchors in HTML documents. By now you already have the idea why we should use them. Placed before section title (described in previous chapter) they help us locating the specific section using search tools (search function).

Take a look at this example: If you name the section LISTS, when searching for this section your search tool will also find the list-style property because it contains list, and you will be forced to browse to “next” and “next” and “next” result until you get to the section title that you have been looking for.

This problem can be solved using section anchors, by placing them before section title.
Section anchors can be any sign or character that is not used in your stylesheet,
like plus (+).

The section title with the anchor “+” placed before it, would look like this:
/* +LIST
*************************************/

Now, search your stylesheet for the term +LIST and you will locate this section title directly.

3. Multiple CSS files - using @import

CSS file can become really huge (containing allot of code lines), especially when building complex websites, and you can easily get lost in it. In this case, you could spend too much time for searching for particular section, class or id… and that can be quite frustrating.

At this point, besides using comments to organize your CSS code into sections, you should consider breaking you CSS into multiple files. This way you can easily manage sections of your stylesheet with less time spent on searching.

For example, instead of having only one stylesheet file like main.css containing CSS rules for navigation and article, you could have multiple files like main.css, navigation.css and article.css and import navigation.css and article.css into main.css at the beginning of the code.

In this case main.css would look like this:
@import url("navigation.css");
@import url("article.css");
.
body {
background:white;
color:black;
font: normal 11px/140% Arial, Verdana, Tahoma;
}
.
...

Also use this method if you need to add some hacks in stylesheet, like IE specific style properties, hacks and similar. It is almost always a good practice to separate those and have them as standalone stylesheet files which you can include into HTML using conditional comments.

4. Do not unnecessary repeat the rules

This is something that you should respect every time your start coding your stylesheet.
Do not unnecessary repeat the rules in your stylesheet. Define the basic rules for specific elements like headings, paragraphs, list and similar at the beginning and then define them different only if needed.

Example
If you defined at the beginning of your stylesheet that H2 has no margins and padding like this:

h2 {
margin:0;
padding:0;
}

For the next heading that would have to have the left margin,
define only the changed rules:

h2.hasMarginLeft {
margin-left:10px;
}

As you can see above, rules for the other margins or padding do not have to be defined again. Think about it, really. :)

5. Use CSS shorthands

Using CSS shorthands can really save your time and reduce the weight of stylesheet files.
For the beginners this can be tricky to learn, but it is so simple that you should definitely give it a try. Instead of defining every property for itself, sometimes you can combine them into just one line of code.

For example, take a look at this:
div#foo {
background-color:#FFFFFF;
background-image: url(image.jpg);
background-repeat:no-repeat;
background-position:0 0;
}

This can be declared also using this shorthand:
div#foo {
background:white url(image.jpg) 0 0 no-repeat;
}

Is this fun or what? :) For more information about CSS shorthands
read the article CSS Shorthand Guide on dustindiaz.com.

6. Indent your code blocks

I personally have just started indenting my CSS code blocks, and I must say; It helps. Do not overreact with it because you could end up with quite strangely looking stylesheet that would be even harder to scan through. Use this method wisely. With code block indenting you can define how the elements relate to each other. Be creative with this one, and have a try… if you like it, use it :). I know, I will.

Example of CSS code block indenting:
ul.nav {
list-style:disc;
margin:10px;
padding:0;
}
  ul.nav li {
  width:200px;
  background:black;
  }