Single Line CSS: Selection Made Simple

If you are always having a difficult time scanning through lines upon lines of CSS code trying to locate the correct selector, try out this idea by Steve Smith: Single Line CSS.

Try comparing this:

#wrapper {
    width:800px;
    margin:0 auto;
}

#header {
    height:100px;
    position:relative;
}

#feature .post {
    width:490px;
    float:left;
}

#feature .link {
    width:195px;
    display:inline;
    margin:0 10px 0 0;
    float:right;
}

#footer {
    clear:both;
    font-size:93%;
    float:none;
}

To this:

#wrapper            {width:800px; margin:0 auto;}
#header             {height:100px; position:relative;}
#feature .post      {width:490px; float:left;}
#feature .link      {width:195px; display:inline; margin:0 10px 0 0; float:right;}
#footer             {clear:both; font-size:93%; float:none;}

Of course, there’s always the option of using an IDE to edit your CSS files and get to style your markup as much as you want.

Link to article

This entry was posted on Friday, July 27th, 2007 at 3:47 pm and is filed under CSS, Coding, Development, Tips, Tricks. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

« Code Beautifier
We’re Back! »

4 Responses to “Single Line CSS: Selection Made Simple”

  1. Scott Lenger Says:
    August 17th, 2007 at 10:03 am

    I think what is most important is to have a clear, consistent structure for organizing CSS properties. Having said that, I find a hybrid approach is the easiest to scan without becoming unwieldy.

    My hybrid format is as follows:
    1. Positioning Properties: margin; padding; height; width; display; float; clear; position;
    2. Font and List Properties: font; letter-spacing; text-align; list-style; color;
    3. Background and Border Properties: background; border;

  2. Dennison Uy - Graphic Designer Says:
    August 18th, 2007 at 12:09 am

    Hey Scott thanks for dropping by! I don’t quite get what you’re getting at. Are you referring to the ordering of the CSS properties? Nice site by the way! One good practice also involves the use of comments to delineate the key divisions in a site. I see that you do this too. So on a CSS file I have comments like so:

    /* css reset */

    (css reset properties like yui or sandbox etc)

    /* tools */

    (.clear, .invisible, etc)

    /* sitewide */

    (definitions for body, html, font color and size, etc)

    /* containers */

    (definitions for containers e.g. #header, #body, #footer, etc)

    /* styles */

    (styles that will be reused e.g. .red, .pullquote, .left, .right, etc)

  3. San Says:
    October 20th, 2007 at 6:24 pm

    I am totally new to website designing , css and everything else about Web.. .. Just wanna drop by and say I LOVE CSS ( passionately ) !

  4. Joel Says:
    October 11th, 2008 at 4:03 am

    I just wrote a tool that converts between the two formats that you might find handy:

    http://www.newmediacampaigns.com/page/single-line-vs-multi-line-css-a-tool-to-end-the-debate

Leave a Reply