CSS Authoring For Quick Indexing

  • Published by: christopher
  • October 1, 2008

When authoring your CSS files, generally the only real rules are..

  • Don’t repeat the same element name more than once.
  • Don’t forget the opening curly brace.
  • Don’t forget the closing semi-colon after each statement. However, the last statement can be written without a closing semi-colon.
  • Don’t forget the closing curly brace.
  • And, if you’re writing the files for Wordpress, you’ll probably want to keep the main CSS file named style.css.
  • This doesn’t neccessarily matter generally, but it might matter to you; Div ID’s are meant to be used once, while Div Classes are meant for repeated use.

While all of this is great to know, sometimes it would be nice if CSS came with a rule-set on how to keep your files neat and tidy. In this article I’m going to show you various ways that I myself have written my CSS files with an emphasis on some sort of order. This is my evolution of CSS authoring, if you will. I’ll also be coining phrases as I go along to give some sort of personality to the aggregation of code. Maybe they will catch on..

CSSloppy

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

body {
 background:#000;
 color:#fff;
 font-size:14px;
 width:1003px;
 height:auto;
 margin:auto;
 padding:0;
font-family:Arial, sans-serif;
 
}
 
ul {
margin:0;
padding:0
}
 
li {
 margin:0;
 padding:0
}
 
.wrapper {
 float:left; 
 background: #fff; 
 width:1000px; 
 height:auto; 
 margin: auto;
}
 
ul { 
 padding:0; 
 margin:0;
 list-style:none;
}
 
li { 
 padding:0;
 margin:0;
 list-style:none;
}
 
.head {
 float:left;
 width:1000px;
 height:auto;
}

This resembles very much how I started out writing my CSS code. Even though this example stylesheet was crafted for this article, it’s accurate. Let’s step back and see how this could be improved.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

ul {
margin:0;
padding:0
}
 
li {
 margin:0;
 padding:0
}
 
ul { 
 padding:0; 
 margin:0;
 list-style:none;
}
 
li { 
 padding:0;
 margin:0;
 list-style:none;
}

Styling the same tags more than once. I still to this day sometimes catch myself doing this. The best way to prevent this from happening? Near the top of your stylesheet, create a “setup” section. The purpose of this is to go ahead and define styling rules that are commonly used for that particular HTML tag / CSS Division. And to make sure it works, make it habit to create this in your stylesheet before anything else, and eventually it’ll become second nature, and you’ll remember exactly which tags/elements have already been modified. So, let’s do that with our entire style sheet..

Outer Space

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

body {
 background:#000;
 color:#fff;
 font-size:14px;
 width:1003px;
 height:auto;
 margin:auto;
 padding:0;
font-family:Arial, sans-serif;
 
}
 
ul {
 margin:0;
 padding:0;
 list-style:none
}
 
li {
 margin:0;
 padding:0;
 list-style:none
}
 
.wrapper {
 float:left; 
 background: #fff; 
 width:1000px; 
 height:auto; 
 margin: auto;
}
 
.head {
 float:left;
 width:1000px;
 height:auto;
}

I’m not one to write my CSS code like I copied it straight from a WYSIWYG or CSS-specific file editor. I don’t like to space things out too much, but I do keep them uniformed. Notice how some of the above CSS code is spaced out unevenly..

1
2
3
4
5
6
7

.wrapper {
 float:left; 
 background: #fff; 
 width:1000px; 
 height:auto; 
 margin: auto;
}

Look at the height and margin properties. See the difference in spacing? Now I know this normally would not confuse anyone and really is not a big deal; However; style sheets generally can become very long and one extra space can very easily lead to two or five. We can’t let ourselves get sloppy.

Another tip to catch your attention: Use semi-colons as stop signs. Note how in our example style sheet the very last style declaration has a semi-colon only sometimes. This won’t make your CSS erroneous with the big w3c, but it can throw you off. I’ve found it helps to get into the habit when reading my CSS code that when I’m looking at one specific element, such as the wrapper in the above example, that when I stop seeing semi-colons after my declarations, the CSS division is done.

So, let’s go ahead and correct these two things.

I have no comment.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

body {
 background:#000;
 color:#fff;
 font-size:14px;
 width:1003px;
 height:auto;
 margin:auto;
 padding:0;
 font-family:Arial, sans-serif
}
 
ul {
 margin:0;
 padding:0;
 list-style:none
}
 
li {
 margin:0;
 padding:0;
 list-style:none
}
 
.wrapper {
 float:left; 
 background:#fff; 
 width:1000px; 
 height:auto; 
 margin:auto
}
 
.head {
 float:left;
 width:1000px;
 height:auto
}

This is the single most important thing to do when authoring your CSS file. Use comments and use them often! Comments can be placed ANYWHERE in your stylesheet and spaces do not matter. However, you want to stay uniformed while keeping your code flexible. Comments are added into style sheets with the opening tag /* and the closing tag */. Anything can go in between, but you’ll want to describe the code in some form or fashion. Otherwise, why even bother? Let’s go ahead and do that…

I have no comment.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

/* SETUP */
body {
 background:#000;
 color:#fff;
 font-size:14px;
 width:1003px;
 height:auto;
 margin:auto;
 padding:0;
 font-family:Arial, sans-serif
}
ul {
 margin:0;
 padding:0;
 list-style:none
}
li {
 margin:0;
 padding:0;
 list-style:none
}
/* END SETUP */
 
.wrapper {
 float:left; 
 background:#fff; 
 width:1003px;  /* The width of the wrapper is the same as 
 height:auto;         the width of the body tag */
 margin:auto
}
 
.head {
 float:left;
 width:1000px;
 height:auto
}

At this point, most people would be finished and would have a pretty nice style sheet going on. I, however, never liked having to scroll over and over to reach different sections on my style sheet, and I always felt as though the default way of writing CSS just had entirely too much whitespace. So, I started writing CSS my own little way. Take a look..

CSStream

1
2
3
4
5
6
7
8
9
10
11

/* SETUP */
body { background:#000; color:#fff; font-size:14px; width:1003px; height:auto; 
          margin:auto; padding:0; font-family:Arial, sans-serif }
ul { margin:0; padding:0; list-style:none }
li { margin:0; padding:0; list-style:none }
/* END SETUP */
 
.wrapper { float:left; background:#fff; width:1003px; height:auto; margin:auto }
/* The width of the wrapper is the same width as the body tag */
 
.head { float:left; width:1000px; height:auto }

Notice how much space we just took out? Notice how the code remains uniformed anyway? To me, this is a much easier/quicker way of writing/indexing my CSS. This last part is more so based on preference though than the other tips.

Now the last thing I would do is write my style rules to as many tags at once as possible, only if they are going to be using the same declarations. Take a look at my final CSS style sheet below. We went from 47 lines of CSS at the beginning of this tutorial to just 10 lines of CSS at the end.

CSStream

1
2
3
4
5
6
7
8
9
10

/* SETUP */
body { background:#000; color:#fff; font-size:14px; width:1003px; height:auto; 
          margin:auto; padding:0; font-family:Arial, sans-serif }
ul, li { margin:0; padding:0; list-style:none }
/* END SETUP */
 
.wrapper { float:left; background:#fff; width:1003px; height:auto; margin:auto }
/* The width of the wrapper is the same width as the body tag */
 
.head { float:left; width:1000px; height:auto }
  • Just a few things before you go..
  • No matter which method you use to write your CSS, if your website is mature and rather large, you may want to chop up the CSS code and place CSS-specific code into its own .css file and link to it in your header.
  • If you do this, try to keep similar items together. For example, if I had img classes all over the place, it would obviously be best if I cut them out of my main style sheet and pasted them all into img.css

Welp, that’s it! I sincerely hope this helps you guys keep your code clean.

Leave a Reply

Friends
JungleJar On Twitter
© JungleJar.com 2007-2008 All Rights Reserved.