« | 1 | 2 | Page 3: Specificity | 4 | »

Continued from previous page

I’m On Top! No, I’m On Top!

Specificity is about the order of things within the page cascade, the presedence, the rank if you will. If you, the site designer, are to enforce as much as possible of your design – without having your styles being overriden by browser settings or stylesheets – you have to be as specific as you conceivably can in your style declarations. For example, h-tags. Say that you give your h1, h2 and h3 tags a specific size, colour and style, because you want your headers to look a certain way, but neglect to assign a font-family to these h-tags, you will end up having your headers rendered with the font (or font-family) specified by the different browsers (and different browsers means different fonts for h-tags). So they may look like crap inspite of your best intentions. Worse still: your headers may not be rendered with the default font specified by the browser but by any given user’s style settings. If a user sets a default font for certain text items, that font will be used whenever a specific font isn’t specified elsewhere. So your headers may end up looking like Double Cr**. If your unlucky. And there’s no way you can know what they look like. Unless you style your h-tags very specifically.

Choosing what to incorporate in the stylesheet and what not to incorporate is basically a question of deciding how long the stylesheet can be to stay tolerable (it can be as long – big – as you please, it can contain all the styles ever used on the Internet if you like). I have an unofficial rule that says if my stylesheet exceeds 150 lines I will break it up into two or more stylesheets. Generally speaking though, I like to keep the basic styles in one sheet, the navigation styles in another and id’s and classes in a third sheet. It’s manageable, the sheets seldom stretch over more than 100 lines and I can concentrate my styling chores. Again it should be stressed that this is a personal choice, not any set rule.

Another thing I prefer to do is write the stylesheets in a logical order. This has nothing to do with specificity, it is more a comfort thing. I find it easier to manage my styles if I write them a) in order of appearence and b) alphabetized within the o.o.a. So I always start my basic stylesheet with body (unless I decide to put a style on the overbearing html selector) and end with p (unless I foresee a use for tables, in which case I’ll end with tr). Likewise, my specific stylesheets will start with #pagetop (because id’s are unique for every page while classes are not) and end somewhere around .legal or .copyrights (because I tend to stick that kind of content at the very bottom of the site page).

That is me. You may choose something else entirely.

Next: The actual writing.

« | 1 | 2 | Page 3: Specificity | 4 | »