Standard Layout for CSS

[wishiwasageek]

Sorry for ignorance, is there a "standard" way of laying out the CSS?

ie.

1. should the "base elements" come first (body paragraph etc)
2. Is it 'better' or 'more standard' to have lots of simple stylesheets linked together or a longer one with everything on it? (go grammar girl!)
3. Should the attributes be listed on one line, or many?
4. Should the end curly braces be on a line by themselves?

I realise that this doesn't neccessarily affect the outcome but I'm just trying to be a bit more professional about things and code stuff properly (thanx mwinter for making me care )

Cheers!
WIWAG

[jscheuer1]

1. should the "base elements" come first (body paragraph etc)
   Not critical, the important thing is that what comes later will override what comes earlier if they are in conflict. Still, it is a good organizational practice.
2. Is it 'better' or 'more standard' to have lots of simple stylesheets linked together or a longer one with everything on it? (go grammar girl!)
   More standard to have one. Better, depends upon the situation.
3. Should the attributes be listed on one line, or many?
   Using one line per property* is easiest for humans to read, makes no difference to the browsers.
4. Should the end curly braces be on a line by themselves?
   Once again, this is a convention designed for clarity to the human eye only, and a good one for that purpose.

*Property is the correct term in CSS, attributes are the inline element modifiers like 'width=12' that were all we had before CSS.

[mwinter]

If you're the only person that will ever have to manage what you're writing, then choose any style that suits you, and that makes life easier for you. Obviously, if this is a team effort, or someone else is responsible for maintanence, then you'll have to compromise.

1. should the "base elements" come first (body paragraph etc)
Not critical, the important thing is that what comes later will override what comes earlier if they are in conflict. Still, it is a good organizational practice.

I tend to group styles based on their relationship with one another, or alphabetically (if there's no real alternative). This does tend to mean that simple element selectors, and other general rules come first. Next tends to come rules that revolve heavily around classes, and finally those that revolve around ids.

Coincidentially, this is pretty much how specificity is calculated: elements and pseudo-elements count as '1' (least specific), attribute selectors (which includes classes) and pseudo-classes as '10', and ids as '100' (most specific). When you add these values together, a rule with a higher number will override anything that is less specific. If the specificity is the same, a rule later in the style sheet will take precedence.

The specification explains specificity slightly differently (and gives some examples), but it's more or less the same.

2. Is it 'better' or 'more standard' to have lots of simple stylesheets linked together or a longer one with everything on it? (go grammar girl!)
More standard to have one. Better, depends upon the situation.

It's more common to have one, which is what I assume John meant. In all but the simplest cases, I'd say it's best to separate style sheets. You shouldn't go crazy, but if sections of your site have a substantial number of unique rules, it would seem sensible to make them separate from the more common rules. Trying to scan through hundreds of lines is very difficult. Though using split panes and a Find tool to search for comments can help, it's not of much use if your editor doesn't supply the former, or you forget the latter.

*Property is the correct term in CSS

Indeed.

  property: value;

which together are termed a declaration.

  selector {
    declarations;
  }

which in all is called a rule set (or just 'rule'). Rules can have multiple selectors separated by commas:

  h1,
  h2 {
    font-weight: bold;
  }

The last main syntactic element is the at-rule. For example,

  @import url(common.css);

and

  @media screen {
    rule sets
  }

Mike