When I needed to hack a WordPress theme and I got my hands dirty with CSS code, sometimes I came across with in-line written CSS code i.e. every CSS selector occupied only one row. I found this practice very ugly and not scannable. I was used to CSS written in the classic way where every value is written in a new line. So, I would often break the single lines into multiple ones to distinguish them better. But this did not last forever. What happened?

Not very far in the past, I came across a article about single line CSS, where Steve Smith, the designer at OrderedList.Com had written of the same topic. He had gone thought the same dilemma I went and his conclusion is no different from mine. He says:

But imagine now that you have over 200 selectors, each with a laundry-list of attributes. That’s quite a mess to search through. My issue with CSS files like these is when they get large, it becomes very difficult to scan the document for a particular selector. They’re all separated by loads of attribute and value pairs. So what if we took out that separation, and put each selector, and it’s attributes and values all on the same line?

Let’s look at a live example taken from a site I have been developing lately. This is the way the code would look like if it was coded classically.

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

h1{
float: left;
width: 120px;
height: 40px;
margin-top: 35px;
}
h1 span{
display: none;
}
h2 {
padding: 0 0 15px 0;
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
line-height: 20px;
color: #159089;
font-weight:200;}
h2 a {
color: #159089
}
h3 {
padding: 0 0 15px 0;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
line-height: 18px;
color: #159089;
font-weight:200;
}
h4 {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size:22px;
line-height: 24px;
color: #d21d1d;
font-weight:500;
text-align:left;
}
h5 {
padding: 10px 0 0 0;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size:16px;
line-height: 19px;
color: #4b4141;
font-weight:500;
text-align:left;
}

And this is actual code I have coded of the site using the single line method.

1
2
3
4
5
6
7
8
9
10
11
12
13

h1{ float: left; width: 120px; height: 40px; margin-top: 35px;}
h1 span{ display: none; }
h2 { padding: 0 0 15px 0; font-family:Arial, Helvetica, sans-serif; font-size:18px; line-height: 20px; color: #159089; font-weight:200;}
h2 a { color: #159089 }
h3 { padding: 0 0 15px 0; font-family:Arial, Helvetica, sans-serif; font-size:16px; line-height: 18px; color: #159089; font-weight:200;}
h4 { font-family: Geneva, Arial, Helvetica, sans-serif; font-size:22px; line-height: 24px; color: #d21d1d; font-weight:500; text-align:left;}
h5 { padding: 10px 0 0 0; font-family: Geneva, Arial, Helvetica, sans-serif; font-size:16px; line-height: 19px; color:#4b4141; font-weight:500; text-align:left;}

Note the length of the first sample and keep in mind that this is only less than 5% of all the CSS code I wrote for that site. Can you imagine how long the file would be if it weren’t in a single line and how difficult it would be to look for a certain selector to edit? You would spend more time browsing up and down thought the code rather than actually writing or editing it. That is why I chose to write all my CSS code in single line selectors method, so that I can speed up my work and spend less time looking for selectors in a super-long CSS file.

So, why not give it a try yourself? I think it is worth trying and I strongly hope you will get to love it as I do now. What do you think?

WordPress themes are being a great online resource for everybody to use, modify and share. This applies to GPL themes only though. However, in order to offer our online neighbors good themes that they will be happy using, theme developers, including me, should take care of some peculiar aspects in themes such as the use of CSS code. Along with WordPress theme evolution, some default CSS code needs to be included in very theme so that certain in-built features work well. This is mostly the case of images, but not only.

In WordPress 2.5 several classes for aligning images and block elements like DIV, P, TABLE etc. were introduced.Every theme should have these CSS classes – you can alter the style if need – in its style.css. The same classes are used to align images that have a caption, introduced in WordPress 2.6. Three additional CSS classes are needed for the captions, together the alignment and caption classes are:

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

.aligncenter, div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.alignleft {
float: left;
}
.alignright {
float: right;
}
.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
/* optional rounded corners for browsers that support it */
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}

Additionally, there are a few more WordPress CSS classes that you may optionally wish to style because WordPress generates them by default. I make use of most of them in my themes and I suggest very body uses them in their themes. There they are:

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

.categories {...}
.cat-item {...}
.current-cat {...}
.current-cat-parent {...}
.pagenav {...}
.page_item {...}
.current_page_item {...}
.current_page_parent {...}
.widget {...}
.widget_text {...}
.blogroll {...}
.linkcat{...}

Did you find this information helpful? Do you have anything else to add? Your opinion is very much appreciated.

When I decided to begin a new project of mine, Open Book Critic, for time reasons, I just browsed the WordPress Themes Directory, typed ‘book’ in the search and some four or five themes appeared in the results. I chose one, NoteBook 1.0 theme. Well, my intention was that this would be a temporary theme, until I would find some time to design and code one myself. That is why I was not interested in retouching the code. Well, this did not change until my fiancee had a look at Open Book Critic and decided to have that same template for the site of her new English teaching center ‘Smart Center‘. And here begins the sad story.

Expect that I had to give up from my original theme for Smart Center, I had to redesign the template in Inkscpe as it had to be my fiancée’s favorite color, pink. For this reason I had a look at the xhtml/css code to grasp the designing manner. Well, this was the most bitter part; I came across with a painful TABLE-TR-TD mosaic. This made me pessimistic.

To make the situation less terrible, I begun to rewrite the xhtml/css from the beginning, following another layout principle with the image layout. And you can have a look at it at Smart Center and another at Open Book Critic to see the difference in look and in code. The look is almost the same, but the code very very different.

So, if you are someone who uses table-based design user, try to keep up with web standards and new tech. Make a Google search and don’t get back look back; tables belong to the past. And than none will dare to call you a terrible person.