Where -exactly- to put those styles...

**samanime** · Mar 27, 2009 00:32

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?

**Karpie** · Mar 27, 2009 00:41

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').

**AutisticCuckoo** · Mar 27, 2009 00:45

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.

**AlexDawson** · Mar 27, 2009 03:11

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.

**AutisticCuckoo** · Mar 27, 2009 09:04

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.

**james_littler** · Mar 27, 2009 09:12

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)

**kbeus21** · Mar 28, 2009 07:43

I dont know why I dislike external sheets. I usually put the style inline or in the header.

**james_littler** · Mar 28, 2009 13:29

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.

User Tag List

Thread: Where -exactly- to put those styles...

Thread Tools

Display

Where -exactly- to put those styles...

Bookmarks

Bookmarks

Posting Permissions