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.
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.
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?