Sarah Atkinson wrote:
One thing I tend to do is instead of having all my styles in main.css
I will have a css folder and in it usualy something like main.css,
header.css, footer.css, maybe other things that are item specific
like menu.css, documenttable.css, sidemenu.css.
I use this so that it¹s easier to find my styles when I need to and I
can exclude some pages if they are not needed. But some I talk to
think everything should be in one very long css file.
My take is that "it depends on what type of site it is and what the
plans are for it". I usually split site-types into 3 major groups.
Type 1: "normal".
For sites with one layout throughout - without layout variations, I
organize everything in a reasonably good order in one, main, stylesheet.
The only additional stylesheets for such sites are "corrections for IE7
and older", which I normally @import into the main stylesheet. I find it
easier to keep control over corrections, and easier to drop them when
they're not needed anymore, when they're kept separated.
Type 2: "normal with variations".
For sites that have layout variations - not necessarily major
variations, I use one stylesheet for each variation. These are normally
quite small/short stylesheets containing styles for the main source-code
elements and other styles that are unique to a layout-variant.
Into these layout stylesheets I @import the main stylesheet with all
common styles, and also all "corrections for IE7 and older" that should
follow that layout-variant.
Type 3: "evolving/unstable sites with variations".
Sites that I know or expect layout-variations to sneak in on over time,
gets the "type 2" treatment from the start to make it easier to throw in
such variations at any one time without having to mess up the main
stylesheet with its common look/feel/whatever.
Such sites may also reuse some basic styles in one layout-variant, while
needing new basic styles in another layout-variant. To facilitate this I
split the main stylesheet into smaller parts/stylesheets, and can then
@import only the parts needed into the layout stylesheet in question.
In such evolving/unstable sites I use both replace and override as I see
fit, and let the @imports in the top stylesheet for each layout-variant
tell me which pieces that variant consists of.
-------
For all 3 types there's usually a wish for a common trend throughout,
giving all layout-variants a somewhat common look throughout. Having a
somewhat common source-code and a main stylesheet takes care of that,
but for more complex sites that is of course only possible if its all
well organized from the start.
I usually optimize for performance, and a multi-stylesheet solution
usually gets punished slightly - slower to get up and running - on first
load. For later loads there's not much of a difference if the
cache-procedure is set up normal at the user-end.
In my own experience - on a very slow connection - there's more to be
gained by writing compact stylesheets (acting on equally compact and
efficient source-code) than by packing them all into one, for the more
complex sites. On the other hand: compact stylesheets may not be all
that developer-friendly, so one may have to strike a balance here.
Personally I find it easier to find my way around in compact code that
is optimized for performance across connections and in browsers, than in
heavily commented and indented stylesheets and source-code. New lines
for each element and good IDs/CLASSes, is enough - for me.
That clearly shows on my own site which is an extreme "type 3" case with
over 30 major stylesheets and at least that many minor ones, that I
@import and link to in all kinds of "strange" orders. That's of course
intentional since the entire site is a test-bed.
I try to make what I create for others slightly more developer-friendly
though, and may even comment and indent the CSS at times :-)
regards
Georg
--
http://www.gunlaug.no
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
