SitePoint Sponsor

User Tag List

Page 1 of 3 123 LastLast
Results 1 to 25 of 58
  1. #1
    SitePoint Addict
    Join Date
    Oct 2003
    Location
    Mobile
    Posts
    329
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Number of Style Sheets

    Is it a good idea to have a main stylesheet for the basic format of the site adn then have individual or stylesheets for groups of pages with particularities so that the main style sheet isn't too cluttered?

    Or should i just have one stylesheet?

    What do you typically do?

    I think that one style sheet can get cluttered. With revisions, it is hard to tell what needs to be deleted and what should stay and how and where this rule applies--Is it on this page or some other page?

    I'm also afraid that dozens of stylesheet may be hard to manage. I've never done this before so before i make a big mess, i want to know if there are any dangers to breakin this stuff out.

    What do you guys do?

    Take care and Thanks!

  2. #2
    SitePoint Member
    Join Date
    Mar 2005
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I generally use just one style sheet - sometimes two. It can get cluttered though. Whatever method you choose make sure you put comments in, it makes it much easier to find which styles apply to which areas.

  3. #3
    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)
    I used to use multiple style sheets but it became a real headache to maintain. For each page I had to look at the code and find out which style sheet I was using.

    Now I do one sheet and comment it a lot if its big. The find function is also particularly useful!
    fisherboy
    Web Site Design

  4. #4
    SitePoint Evangelist spinmaster's Avatar
    Join Date
    Mar 2005
    Posts
    456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Depending on the size of the site, I usually also stick with just one and comment it properly...
    Last edited by spinmaster; Jul 13, 2006 at 04:53.

  5. #5
    SitePoint Guru momos's Avatar
    Join Date
    Apr 2004
    Location
    Belgium
    Posts
    919
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    depending on the size of the site... most of the time it's 1, but if a site is very large, I can have up to 5 (I often have a 3 times 1 or 3 times 5 for a stylesheet switch though)

  6. #6
    SitePoint Enthusiast
    Join Date
    Jun 2005
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have 1 master.

    The master links to a base stylesheet.
    It also links to one for IE5 (which does all the box model hacks, etc).

    I serve these up using filters that stops browsers seeing them if they are not to be supported (e.g. IE4)

  7. #7
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,702
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    I have two: media="screen" and media="print"
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  8. #8
    Knowledge is key 2 progression Tryst's Avatar
    Join Date
    Sep 2003
    Location
    Wales
    Posts
    1,181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by adpd
    I have 1 master.

    The master links to a base stylesheet.
    It also links to one for IE5 (which does all the box model hacks, etc).

    I serve these up using filters that stops browsers seeing them if they are not to be supported (e.g. IE4)
    I second this.

    I have a main stylesheet, and then drop style sthat apply to different browsers in another stylesheet.

    Tryst

  9. #9
    SitePoint Addict CommanderZ's Avatar
    Join Date
    Apr 2006
    Location
    Czech Republic
    Posts
    236
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I used to have multiple stylesheets linked together into one main ss. But now i usually use less style classes (I don't know why), so I put them all into one (big) file

  10. #10
    SitePoint Enthusiast
    Join Date
    Oct 2001
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have one main stylesheet, used on all pages, plus a stylesheet for form elements, included if there's a form on the page, and a stylesheet for media="print", overiding a few styles in the main stylesheet. Occasionally I might need another for groups of elements used on only a few pages, like tabulated data.

  11. #11
    SitePoint Zealot buzza_gts's Avatar
    Join Date
    Oct 2005
    Location
    Melbourne
    Posts
    157
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Depends on the size of the site, for a 5 page brochure site I would only use one.

    When working on a site that is going to have 50 pages I will generally use a global.css for all the generic styling and seperate style sheets for each similar styled page. If once the global.css is loaded there isn't going to be much in the way extra styling need I will include it directly in the HTML document.

  12. #12
    SitePoint Guru LinhGB's Avatar
    Join Date
    Apr 2004
    Location
    Melbourne, Australia
    Posts
    902
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    They call it *cascading* stylesheet for a reason. I do use multiple stylesheets for modularity and reuse. Depending on the project, I'd use different ways to manage my stylesheets. One way is:

    - core.css: basic stuff like body, p, headings, a go here
    - classes.css: where I define my classes css corresponding to the output my OO class objects.
    - site.css : site structure and layout
    - colours.css: text colours, bg colours and bg images - so that I can easily change the theme of the site
    - ie6.css: IE <= 6 hacks.
    - print.css: for media=print
    - handheld.css: for media=handheld
    "I disapprove of what I say,
    but I will defend to the death my right to say it."

  13. #13
    Pedantic Semantic blain's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    528
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    actually it's called cascading because the styles cascade not becuase it supports multiple stylesheets.

    I would suggest that three is the magic number for stylesheets.
    Global.css
    print.css
    iespecific.css (encapsulated in CC of course)
    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.

  14. #14
    SitePoint Guru LinhGB's Avatar
    Join Date
    Apr 2004
    Location
    Melbourne, Australia
    Posts
    902
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    actually it's called cascading because the styles cascade not becuase it supports multiple stylesheets.
    Yeah you're right. I just read the definition again. Shows how ignorant I am about what I work with everyday. But what I'm referring to isn't about linking to multiple stylesheets but about the modularity and inheritance between them. I only link to one stylesheet per media type. What are inside those stylesheets (links to other stylesheets) are what I think of as "cascading". Forgot about the browser default -> external stylesheet -> internal stylesheet -> inline styles.

    With your magic number 3...

    Global.css
    If you want to change the colour theme, you'll have to modify the whole file. You can't let users choose colour themes either.

    Also, you only have print.css. What about handheld?
    "I disapprove of what I say,
    but I will defend to the death my right to say it."

  15. #15
    SitePoint Wizard dreamscape's Avatar
    Join Date
    Aug 2005
    Posts
    1,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Even with multiple sheets, they can sometimes become whiley. But if your editor supports code folding, there are some tricks you can do to make large chunks foldable, which can help alot, especially if you take a few minutes to group styles in some way that makes sense to you.

    This is how I make large block of CSS foldable:
    Code:
    /**
     * Block/Group name/comment
     {{{
     */
    
    
    /* ... several styles ...*/
    
    
    /**
     * END Block/Group
     }}}
     */
    Which will fold up like:
    Code:
    /**
     * Block/Group name/comment
     {{{ (...)
     */
    Of course, depending on what folding rules your editor uses, that may not work, and you may have to play around to find a trick that will work in your editor to fold large blocks of code if you want to.

  16. #16
    Now available in Orange Tijmen's Avatar
    Join Date
    Jul 2004
    Location
    The Netherlands
    Posts
    1,469
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by adpd
    I have 1 master.

    The master links to a base stylesheet.
    It also links to one for IE5 (which does all the box model hacks, etc).

    I serve these up using filters that stops browsers seeing them if they are not to be supported (e.g. IE4)
    The same for me
    Travel Photos on Flickr - Twitter

    “Never give up. Never surrender”

  17. #17
    Non-Member
    Join Date
    Jan 2004
    Location
    Seattle
    Posts
    4,328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    None of my projects are finished, so my system remains somewhat experimental. But I use a series of stylesheets that work something like this...

    global.css
    North_America.css
    United_States.css
    Southwest.css

    ...where global.css is applied to every page, with a series of PHP switches determining which continent (e.g. North_America) and region (e.g. Southwest) a particular page (e.g. MySite/World/Arizona) gets. States, provinces, etc. also get parent pages (e.g. United_States, Canada, etc.).

    Of course, the supplementary style sheets are generally pretty brief.

    In addition, I may include thematic style sheets, like the one that gives my prehistory pages special backgrounds. You can see an example at http://www.geoworld.org/Arizona/Prehistory (It's a bit garish, but I'll work on it when I find time.)

    On top of everything else, I allow for individual identities. Thus, my Southwest.css stylesheet might include a code for New Mexico (e.g. body#nm), allowing me to display the state colors or the colors of the state flag.

    Also, if an element is restricted to a particular page, or category of pages, then I often use inline CSS, so that pages that do NOT have that particular element aren't burdened with useless code.

    I also want to include alternate style sheets, allowing visitors to choose between seasons and habitats. Thus, a particular page might have a Spring, Summer or Night look, and it might suggest a tropical rainforest or a desrt.

    I don't understand print.css. It's obviously designed for visitors who want to print a copy of your text. But how does it work? Do they access the same information on a different page, which is linked only to print.css? Would someone mind printing a copy of their print.css code? I'd like to see how you design it.

    Thanks.

  18. #18
    SitePoint Wizard
    Join Date
    Jul 2004
    Location
    Minneapolis, MN
    Posts
    1,924
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I use multiple style sheets, nearly always. Generally my styling structure is like so:

    - structure
    --- screen.css
    --- projection.csss
    --- print.css
    --- handheld.css

    - style
    --- pages
    ------ (a separate sheet for each page that needs additional styling)
    --- style.css

    So I keep a style sheet for things like colour and fonts. Then a style sheet that sets up the page layout for a particular media type. Then I have a style sheet for any page that needs specific styling for anything.

    This works great and is very easy to maintain, and it avoids loading CSS styling I don't need!

  19. #19
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    As many as the task at hand calls for. Almost always a separate one for IE5-7 fixes.

  20. #20
    SitePoint Addict
    Join Date
    Apr 2005
    Posts
    396
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I use a global.css and use server-side code to include as many page-specific ones as I need. The number of sheets depends on the size of the site, but 10 or 15 sounds about right.
    Bring out our hope and reason, before we pine away.

  21. #21
    SitePoint Evangelist
    Join Date
    Jan 2005
    Location
    ireland
    Posts
    482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi

    I have 3

    No1 = Structure
    No2 = <p> <h> etc
    No3 = Links

    works for me

  22. #22
    Non-Member Musicbox's Avatar
    Join Date
    Nov 2004
    Location
    india
    Posts
    1,331
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you can typically use single or multiple stylesheets.

  23. #23
    SitePoint Guru
    Join Date
    Jun 2002
    Posts
    616
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Each of my pages call about 5 stylesheets, there's one for each of the following: site, channel, content type, page type and finally skin.

  24. #24
    SitePoint Addict
    Join Date
    Oct 2003
    Location
    Mobile
    Posts
    329
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys for the wonderful posts. I work for a community health center and this website will begin with 10 to 15 pages and will grow over time. I think that multiple sheets for each section will help me stay organized and make changes quicker. I dont' want to have to swim through tons of code in the future just to make a few changes.

    dreamscape I'm still using notepad for a text editor. But i'm thinking about improving. I do need to be able to move a little more efficiently. However, i don't want something that is going to change and add tons of additional code i did not put in the page.

    LinhGB and charmedlover and others who use multiple pages, I like your idea of having a separate style sheet for colors and text. I would hate to have to go through each style sheet just to make sure a change was consistent throughout the website. How do you implement this without having a page full of vague and unrelated styles? It also sounds like a change in the name of a rule such as .page-content would require a change in that rule's name in two different places. I guess it would be only 2 which isn't so bad, but it is worth considering when you separate the colors out of the sheets. Another question is suppose it has basically the same structure with same rules but different color schema for that section? Any thoughts on these? Sounds like things can still get a bit confusing.

    Content Management System as soon as i get the website through its initial stage, i plan to start looking into using WordPress to help manage all the content.

    Thanks guys. At first i thought this was a stupid question, but i've learned some things! Thanks!
    Last edited by jacobpressures; Jul 13, 2006 at 08:17.

  25. #25
    SitePoint Author silver trophybronze trophy
    wwb_99's Avatar
    Join Date
    May 2003
    Location
    Washington, DC
    Posts
    10,633
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    In sites that have multiple sections with unique looks, I fell upon the following general plan:

    1) Layout.css: basic site structure. Puts things where they need to be.
    2) ContentLayout.css: handles the layout in the main content area. Could be in #1 but separation makes it easier to manage.
    3) Colors.css: Attaches colors and background images to items created in 1 & 2. Usually multiple copies and pulled in based on section of the site.

    Also there is generally a separate print stylesheet. Handheld css support is still to rudimentary, I would rather serve them unstyled pages than bother with making it work across enough devices to matter.


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
  •