SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    SitePoint Enthusiast JMouse's Avatar
    Join Date
    Jun 2006
    Location
    England
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    best practice for stylesheet layout

    How do you all lay out your stylesheets? Is there a 'best practice' way to do it?

    personally, I would lay out each element as follows:

    selector {
    ____property1: xxxx;
    ____property2: xxxx;
    ____}

    (_ used to denote tab or 4 spaces)
    but I notice that people also put everything on one line, and embed a great deal in the html, where I would put everything externally wherever possible.
    Certainly my way means that stylesheets get very long, and you have to keep switching and saving while developing.

    I also comment everything like mad.

    Am I making a rod for my own back, or being prudent?

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I prefer to put one rule on one line, and I indent rules to indicate structural relations (makes it easier to find things later).
    Code:
    selector {property1:xxx; property2:xxx}
      selector subselector {property1:xxx; property2:xxx}
    Just a matter of taste, though. I'm not claiming that this is a 'best practice' or anything. It works for me 's all.

    Oh, and I also use a standard 'order' for my properties.
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Enthusiast JMouse's Avatar
    Join Date
    Jun 2006
    Location
    England
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I like the idea of indenting. I think I'll do that in future.

  4. #4
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I find it rather difficult to read some CSS rules that are all on one line.

    I prefer two or three space indentations. Like this:
    Code:
    h1,h2 {
      color: #000;
      margin: 0;
      padding: .5em;
    }
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  5. #5
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I do either/or depending on how many rules are applied to each element.

  6. #6
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kravvitz
    I find it rather difficult to read some CSS rules that are all on one line.
    It doesn't work very well unless you have an editor with syntax highlighting, i.e., colour-coding the CSS.
    Birnam wood is come to Dunsinane

  7. #7
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Huh? What doesn't work very well? Am I correct in assuming that you mean that you find it difficult to read multi-line rules in a text editor without syntax highlighting?

    My main text editor does have syntax highlighting, which is helpful, but I still find it easier to read multi-line rules even in a text editor that does not have syntax highlighting.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  8. #8
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry for being unclear (for the second time today!)

    I mean that my method doesn't work well without colour-coding. You also need a high-resolution monitor.

    The main reason I'm not too fond of the multi-line version is that it takes up so much vertical space. Sometimes you want to keep an eye on one rule while editing another, and that's difficult if you can't keep both in sight at the same time.
    Birnam wood is come to Dunsinane

  9. #9
    SitePoint Addict
    Join Date
    Feb 2004
    Location
    Netherlands
    Posts
    381
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would go for this style:
    Code:
    selector {
         property:value;
         property:value;
         property:value;
         property:value;
    }

  10. #10
    SitePoint Wizard bronze trophy Tailslide's Avatar
    Join Date
    Feb 2006
    Location
    Bedford, UK
    Posts
    1,687
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm odd - I like rules all on one line in general.
    Little Blue Plane Web Design
    Blood, Sweat & Rust - A Land Rover restoration project

  11. #11
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah! That makes so much more sense now. Thanks for clarifying, Tommy.

    Sometimes when I want to refer to a rule or two while writing another, I will copy-and-paste them into another text editor window so that I can see them all at the same time.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  12. #12
    Carpe Diem = Fish of the Day fisherboy's Avatar
    Join Date
    Dec 2005
    Location
    New Zealand
    Posts
    488
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For me, the simpler and clearer it is, the better. I like to be able to scan down the left-hand side for the selectors, then have all the properties indented on their own lines (a la Kravvitz and sergeant).
    The reason for this is that I can't read CSS quickly (my understanding just isn't that great) So my comprehension speed goes up along with the length of the sheet.

    Simplicity rules!
    fisherboy
    Web Site Design

  13. #13
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Code:
    a {
      property: value;
      property: value;
    }
    
    a,
    b {
      property: value;
      property: value;
    }
    
      b c {
        property: value;
      }
    I don't think there's a wrong way to format your styles. What's really important is grouping, using short-hands where ever possible and being consistent with the order of properties.

  14. #14
    Carpe Diem = Fish of the Day fisherboy's Avatar
    Join Date
    Dec 2005
    Location
    New Zealand
    Posts
    488
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Egor
    Code:
    a {
      property: value;
      property: value;
    }
    
    a,
    b {
      property: value;
      property: value;
    }
    
      b c {
        property: value;
      }
    I don't think there's a wrong way to format your styles. What's really important is grouping and using short-hands where ever possible, and being consistent with the order of properties.
    Nicely said Egor.
    fisherboy
    Web Site Design

  15. #15
    Pedantic Semantic blain's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    528
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Being a stickler for neat code I opt for

    Code:
    body
         {
         color: #fff;
         }
    Technology is dominated by two types of people:
    those who understand what they do not manage,
    and those who manage what they do not understand.

  16. #16
    SitePoint Zealot
    Join Date
    Apr 2003
    Location
    New Zealand
    Posts
    168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A related question.

    How do you list/group your styles?

    Alphabetically?
    By type (html tags in one group, classes in another group, ids in another)?
    By id (i.e. all styles within an id are grouped together)?
    Other?

    Do you separate positioning/layout from the rest?

    What method do you find gives you the best control over where to find what you're looking for?

  17. #17
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I do html, body and container first. Then usually I have my structural elements together and text styles that apply to all pages. Then I group styles together by individual page.

  18. #18
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Element type selectors first (alphabetical order).
    Classes next (alphabetical order).
    IDs last (structural order with indention).
    Birnam wood is come to Dunsinane


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •