SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)

    Where -exactly- to put those styles...

    I've been working with websites, HTML, and CSS for quite a while now. I've never really sat down and thought too much about where I put my styles within my code. There for a while I would embed it into directly into the HTML or tags (I know, bad idea). After that I started putting it into (a) separate file(s).

    Nowadays, I typically place all (or most) of the style into a single file (usually global.css), and split CSS that is only used on one or two pages into a separate file (such as for specific forms).

    I'm posting this because I'm curious exactly how you organize your styles, and if you think there is a better method for doing this. Do you use a method similar to me, do you split it into a larger number of files based on common threads, embed some styles into the pages, or something totally different?

  2. #2
    SitePoint Evangelist Karpie's Avatar
    Join Date
    Jul 2007
    Location
    Perth, Australia
    Posts
    445
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've been known to lump it all into one CSS file, unless styles are specifically only used on one page, then I'll put them in their own CSS file (but that rarely happens, finicky clients and their 'hey we might want to use this everywhere later so make it all general and stuffz k').

  3. #3
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I put style rules that are common to the whole site into two separate, external style sheets: one for screen media and one for print. If I don't have to worry about IE5/Win I can even use a single style sheet and @media rules, provided the print styling isn't too different from the screen styling.

    Page-specific styling, like forms, usually go in an internal style sheet (a <style> element in the <head>). If that's not possible, e.g., due to a rigid template system, they go in their own separate external style sheets.
    Birnam wood is come to Dunsinane

  4. #4
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    I group my css into categories. I have a single CSS file which holds all the default styles for my design, the print version, the mobile version and aural version which are all separated by media types. I usually have an alternative StyleSheet which acts as a high contrast version for low vision users. And finally I provide a CSS file for any conditional comment code needed to patch IE browsers.

  5. #5
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, IE-only style sheets are separate for me too. Except on the intranet, where the only IE version I have to worry about is IE7, which doesn't require that many workarounds.
    Birnam wood is come to Dunsinane

  6. #6
    SitePoint Guru james_littler's Avatar
    Join Date
    May 2007
    Location
    Portsmouth, UK
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    personally I embed 1 stylesheet, global.css, this imports page.css (positioning), images.css (images), text.css (text) and any other global styles.

    I find this alot easer than scrolling through hundreds of lines of css for all sorts of things, as it would be if everythinbg was direcly in global.css.

    If I need a css file for one page only then I import that along with global.css (in html)

  7. #7
    SitePoint Enthusiast
    Join Date
    Mar 2009
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I dont know why I dislike external sheets. I usually put the style inline or in the header.

  8. #8
    SitePoint Guru james_littler's Avatar
    Join Date
    May 2007
    Location
    Portsmouth, UK
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    By putting them in a separate file you can update a global setting with only a few lines of code, rather than going through every page in the site.


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
  •