Simon Levy wrote:
> I have a few questions about how to layout and organise your CSS files
>
> A) I have many selectors, classes and ID's that all have the following
> value:property - font-weight:bold
> is it best practice to have
>
> a) multiple selectors, classes and ID's in one line like so with
> one value
>
> .a,.b,.c,#id1,#id2{font-weight:bold}
>
> or
>
> b) to have font-weight:bold on each individual selector, class
> or ID
>
> What are the advantages/disadvantages?
>
My feeling is that if the selectors that share the common property-value
pair are related, you should group them. If they aren't related, and
it's just a coincidence that they all share a particular value, don't
group them. Here's an example of what I mean.
In my sites, I usually use multiple classes to float images, named left,
right, horizontal, and vertical. These are all related elements. Let's
say that in one particular site I want my images to have borders. I'd do
this:
.left,
.right {
border: 1px solid #ccc;
}
I'd group the selectors because they are related, and I'm probably
always going to want both left and right images to have the same border
style. It makes sense to only declare the value once so I can change it
just once down the line.
I might have a number of different elements, however, that just so
happen to share a certain color text in the current site iteration --
let's say table captions, form legends, photo captions, and footer text.
None of these are related to each other, and if I wanted to change the
footer text color it wouldn't necessarily follow that I would want to
change the text color of the table captions, form legends, and photo
captions. So I wouldn't group these elements together. Instead, I'd keep
the rules for each in their own section. If I scattered rules for the
footer throughout my document, for example, there'd be a very good
chance that I would drive myself crazy later wondering where some
mystery style for the footer was coming from, when it was hidden in a
group of selectors away from the footer styles section of my style sheet
all along.
Hope this makes sense. :-)
> B) What are the advantages/disadvantages of having multiple CSS files
> broken down into navigation.css, common.css, main.css, list.css etc and
> using the @import
>
I feel that any advantages or disadvantages are entirely personal.
People can tell you about extra hits to the server, etc, etc, but the
most important thing is that you do it in a way that makes sense to you.
The server implications are not going to make that big of a difference,
IMO, especially if you set things up in a way to please the server and
just end up confusing yourself.
What I tend to do is this:
-- Link base.css from each page.
-- base.css has rules for NN4 consisting of setting the body background
color, text color, link colors, and font families, and that's about it.
-- base.css imports in one big sheet with everything else in it,
separated with comments into sections that make sense to me
-- Conditional comments contain link to ie-hacks.css.
-- Link print.css to each page.
Zoe
--
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
