Grow your CSS skills. Land your dream job.

how to write single line css

  • # September 14, 2008 at 12:40 am

    My question is how set dreamweaver for writing single line css. when it writes .via properties panel

    # September 14, 2008 at 2:27 am

    for this question, I would recomend that you go to the adobe website and ask this question in the dreamweaver forums

    http://www.adobe.com/cfusion/webforums/ … &catid=189

    if you find the answer, be sure to come back and tell us what it is.

    # September 15, 2008 at 12:10 am

    Well i found that you can set an option in dreamweaver cs3 to have your css code written in a single line format. but this option is not in dreamweaver 8. I would assume that older versions also do not have this option.

    # September 15, 2008 at 7:56 am

    Yes cybershot you are right. this option is only available in Lastest CS3 version of dreamweaver. and it’s good to use according Jonathan Snoock http://snook.ca

    One of Jonathan’s tenants to coding CSS is to keep declarations in one line.

    Quote:
    The second one may look prettier but it sure doesn’t help me find anything. When looking for something in a style sheet, the most important thing is the ruleset (that’s the part before the { and } ). I’m looking for an element, an id or a class. Having everything on one line makes scanning the document much quicker as you simply see more on a page. Once I’ve found the ruleset I was looking for, find the property I want is usually straightforward enough as there are rarely that many.

    Jonathan goes on to give an example for single line declarations that looks like this:

    Good

    Code:
    {font-size:18px; border:1px solid blue; color:#000; background-color:#FFF;}

    Bad

    h2 {

    Code:
    font-size:18px;
    border:1px solid blue;
    color:#000;
    background-color:#FFF;

    }

    From this place in Dreamweaver CS3 you can change CSS coding style Multi line to Single line.
    [img]http://farm4.static.flickr.com/3045/2858631431_323a53c655.jpg[/img]
    for clear image click here : http://farm4.static.flickr.com/3045/2858631431_7323aee6f2_o.gif


    And for any multiline css file to single line you just need to select the css code in any Html or css file and apply this command.

    [img]http://farm4.static.flickr.com/3141/2858631433_9324eb4f92.jpg?v=0[/img]


    by the way i’m goint to be shifted Dreamweaver to Aptana after exploring Aptana’s functions

    box
    # September 23, 2008 at 5:28 am

    There are very few professional web designers who agree with Jonathan Snook on this matter. They way you set out your CSS is down to personal preference and has absolutely no baring on file size whatsoever (I have performed many experiments on this). Personally I (Like many of this industry’s leading designers) find single line code less accessible visually and much prefer multi-line. But don’t take my work for it, and don’t take Snook’s word for it – use the method that works for you and don’t label one as ‘good‘ and one as ‘bad‘.

    # September 23, 2008 at 3:10 pm
    Quote:
    Personally I (Like many of this industry’s leading designers) find single line code less accessible visually and much prefer multi-line

    Fully agreed. I find multi-line to be much more readable. Single-line is okay for short stuff, but when you start specifying lots of properties for one selector, it becomes difficult to find any particular one.

    There’s no reason why you can’t mix and match within the same stylesheet, though. Often I’ll use multi-line by default, but switch to single-line if I have a bunch of selectors in a row that have similar properties, so I can see the differences between them easily. For example:

    Code:
    #header {
    background: url(‘../images/bg_header.jpg’) no-repeat;
    color: #000;
    font: 12px Tahoma, Arial, Helvetica, sans-serif;
    height: 200px;
    margin: 0;
    padding: 0;
    }

    box1 {color: #000;}
    box2 {color: #ddd;}
    box3 {color: #999;}
    box4 {color: #666;}

    #footer {
    color: #000;
    height: 24px;
    text-align: center;
    }

    # September 23, 2008 at 4:51 pm

    It’s good to hear that the standard seems to be that there is no standard. After looking at many examples of how people lay out their style sheets, I came to the decision long ago to use a combination of both styles depending on which is the most readable (to me) for the given tag.

    Along those lines I also add whitespace:

    Code:
    P.main { color: #000000; text-align: left; }

    opposed to:

    Code:
    P.main{color:#000000;text-align:left;}

    and indent two spaces when using the other format:

    Code:
    P.main {
    color: #000000;
    text-align: left;
    }

    I’m sure that there must be an impact on loading time but I would hope it is negligible. Imo, the time the readability saves me is well worth a minor hit in file size.

    # September 25, 2008 at 10:20 pm

    I think one line CSS is easier to organize. For example:

    Code:
    /*- – – – – – – – – –
    Contents
    ——————–
    AA01. Header
    AB01. Content
    ——————*/

    /*- – – – – – – – – –
    AA01. Header
    ——————*/
    #header { background-color: #000; width: 500px; }
    #header.logo { background: transparent url(logo.gif) no-repeat; float: left; }
    #header.search { float: right; padding: 5px; }
    /*- – – – – – – – – –
    AB01. Content
    ——————*/
    #content { border: 3px solid #000; width: 500px; }
    #content.sidebar { float: left; width: 100px; }

    As you can see, I also create a table of contents at the top of my CSS file, complete with unique call numbers for each section of my css so anyone can find what they want using CTRL+F. And I organize my selectors alphabetically. OCD? Maybe, but it helps me.

    # September 26, 2008 at 12:42 am

    Wow, that’s a very handy tip. Saves going through it manually. Good work.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".