SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Wizard
    Join Date
    Jan 2005
    Location
    blahblahblah
    Posts
    1,447
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Are there standards when it comes to organizing your stylesheets?

    It's all in the title. I should mention that I'm particularly interested in designing themes for Wordpress.

    regards,

    -jj.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Perhaps be more specific. What do you mean by organizing? Some people have different practices, like separating style info from layout, but personally, I tend towards just a single style sheet.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Wizard
    Join Date
    Jan 2005
    Location
    blahblahblah
    Posts
    1,447
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here are the two types of organization I've seen so far:

    Code:
    /* layout */
    
    /* fonts */
    
    /* links */
    and
    Code:
    /* header */
    
    /* aside */ 
    
    /* content */
    Many stylesheets are actually a mix of these two approaches.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,289
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I don't like working with stylesheets where they are organised as in your first method because it means that when you want to change an element you have to search through and find all its bits and pieces that have been spread over the whole stylesheet.

    It usually results in that you have missed something you didn't know existed and takes many times longer than locating the one main rule block. I guess though that if you were dealing with simple theme colour changes on a regular basis then separating colours etc may work. It's just that it never suited my approach.

    I usually start the stylesheet with the global rules (e.g. a small reset and then any global rules and link colours etc). After that I work from a top down approach.

    Start with body then the main outer and then header, main, footer in logical order. In that way I know that if a change is to be made to the footer then the code is at the end of the stylesheet.

    The main problem is what to do when code is changed at a later date and where to make the changes and how to remain consistent.

    Whatever method you use it should be consistent and at least logical and suit the way that you work.

  5. #5
    SitePoint Zealot zbing's Avatar
    Join Date
    Jun 2002
    Location
    Lisbon, Portugal
    Posts
    159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tend to follow the approach described by Paul by i like to add comments to separate the bits of code. A bit like bookmarks within the css code:

    /* sec:reset */
    /* sec:global */
    /* sec:mainWrapper */
    /* sec:header */
    /* sec:navigation */

    etc...

    I use the "sec:" thing to make sure that these "section" (sec markers are different from other comments and therefore easy to search for.
    zbing

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,289
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by zbing View Post

    I use the "sec:" thing to make sure that these "section" (sec markers are different from other comments and therefore easy to search for.
    Yes good tip

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    I stopped searching for things in style sheets when I discovered tools like Firebug. I just inspect the element and then identify the line number(s) of the styles I need to change.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  8. #8
    SitePoint Member
    Join Date
    Apr 2011
    Location
    india
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)


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
  •