Code

Accessible CSS

wordpress-themes-css
0

wordpress-themes-cssWhen 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?

Baki Goxhaj
I’m a web consultant specializing in WordPress. I love elegant solutions, quality code and a good laughter.
You may also like
php-tux
Easy PHP II: Variables
Terminal Tip #1 – Aliases
4 Comments
  • nemoprincess Jan 23,2010 at 6:41 pm

    The single line method is easier to read and using this method we can have a smaller css file. I think it is the best method in css writing code.

  • thegands Apr 21,2009 at 8:48 am

    @banago:
    you’re welcome ban.. 🙂

  • BANAGO Apr 21,2009 at 8:34 am

    @thegands: That is perfectly right – thanks for your comment.

  • thegands Apr 21,2009 at 7:43 am

    I agree with you. Reading any long type css file is waste of my time to by scrolling my mouse.

Leave Your Comment

Your Comment*

Your Name*
Your Webpage