CSS -- Organizing Style Sheets

[c-low]

is your style sheet out of control!!!

I'd love to hear your opinion on the best way to organize CSS (cascading style sheets)
files across a site ::::::

The issue has arisen because my main stylesheet just keeps
getting longer and loooooooonger... and I want to break it up a bit.

[Costin Trifan]

The simplest solution is to group your classes:

div.Container, table.cTable td.cCell, p.pParagraph {
...
values here
...
}

and so on...

I use this technique as follows:

the global declarations includes: *, html, body, form, links, headings, div.PageContainer

then, depending on the page structure, I might have:
- a header
- a content
- a footer
Then I'll group all elements which belong to the page structures described above.
This way, I have a compact css file, and I don't have to search it to find something, like a class or something.
If the class is in the header zone, then all I have to do is go to the css file and look in the header zone to find that class.

[chicgeek]

Within my css file, I add comments as section headers. Usually...

/* General */
Global tags: html, body, link styles, etc.

/* Structure */
div ids to determine page structure

/* [Section] Styles */
Like "Header Styles", "Content Styles", which are section-specific styles, such as li #header, or p footer, etc. Depending on the site, I have 3 or more of these sections.

[c-low]

Part of the problem here is:
as pages get added to the site i find myself adding more styles to the main
stylesheet

so, the approach that I have been trying to implement is:
I have 1 main stylesheet (style.css) which contains all
sitewide styles--like common text styles, html redefined
and basic layout.
Deeper in the site you get to pages which are different in design
and utilize a different layout, different elements etc. For those layouts
I have specific stylesheets that are only accessed by those pages and which
are imported after style.css(and possibly overwrite some of it's rules)

[chicgeek]

You can have multiple stylesheets, as needed.

ie. from my university's site:

<link rel="stylesheet" href="http://communications.uwo.ca/standard1c.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://communications.uwo.ca/standard2c.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://communications.uwo.ca/style3c.css" type="text/css" />
<link rel="stylesheet" href="http://communications.uwo.ca/print.css" type="text/css" media="print" />

I think the hierarchy is such that the first stylesheet overrides the second, and so on.

[Karen_Harwood]

I like to create one main style sheet for the layout styles then create separate sheets for fonts, navigation and other stuff. I included these separate style sheets in the beginning of the layout.css with code like this:

@import url(font.css);
@import url(side-nav.css);
@import url(opt-nav.css);
@import url(top-nav.css);
@import url(pullquote.css);

And to help keep things organized I also comment sections of my css files like this:

/* General styles */

body {
background-image: url(../image/backg.gif);
margin: 0; padding: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: x-small;
}

When a stylesheet gets to long these commented areas could be broken off into new stylesheets too.

One more thing you can do is to combine styles instead of listing them separating only to repeat common aspects. For example your headers might share a common theme so these can be combined together followed by separate styles for the things that are different:

h1, h2, h3 {
font-weight: bold;
color: #000000;
}
h1 {
font-size: 150%;
}
h2 {
font-size: 130%;
}
h3 {
font-size: 110%;
}

Hope this wasn't too much and I hope it helps!

[LazyJim]

This is good but does anyone know for sure about the precedence of rules loaded from style sheets before vs after both from html <link> and CSS @import, and also <link> vs @import??


Also I like to make some comments stand out a bit more...

/* ***** Header ***** */

[c-low]

Basically it goes like this:

CSS precedence is determined first by specificity of selector. So, for:

<p class="blueParagraph" id="orangeParagraph">This is my test paragraph</p>

p {color:red;}

/* is overridden by... */

p.blueParagraph {color:blue;}

/* which is in turn overridden by... */

p#orangeParagraph {color:orange;}

regardless of cascading order because p#orangeParagraph is the
most specific selector.

Also note that an inline style will override all other declarations.


then by importance

p {color:red;}

is overridden by

p {color:blue !important;}

then by the cascading order

The rules that come earlier in the stylesheet are overridden by equally weighted rules that come later.
The same goes for linked and imported stylesheets, so in this example:

<style type="text/css">
	
	@import url(test-01.css);
	@import url(test-02.css);
	@import url(test-03.css);

</style>

for conflicting styles that appear in all 3 stylesheets, the rule in test-03.css will
win out.

[c-low]

On @import vs link:

The link method is used in the head of an HTML document, it does essentially the same thing as @import, so:

<link rel="stylesheet" type="text/css" href="test-01.css" />

will do the same thing as the @import example above.

However, there are reasons to use one over the other:

css files can not contain any markup, so @import is the only way for a stylesheet to access styles from another style sheet.

If you want to offer alternate stylesheets you must do this with the HTML link tag:

<link rel="stylesheet" type="text/css" media="screen" href="test-01.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="Charlie's second stylesheet" href="test-02.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="Charlie's third stylesheet" href="test-03.css" />

Finally, using different versions of the @import rule is a way to hide certain stylesheets from certain browsers as not all forms of @import are supported by all browsers.

see http://centricle.com/ref/css/filters/ for info on which browsers support which forms of the @import directive

[c-low]

i just read an interesting article called frameworks for designers by Jeff Croft. he talks about abstracting common css tasks to a self-defined css framework layer. Some interesting points, and i like the way recommends organizing stylesheets.