writing maintainable stylesheets

[Jeff Thies]

I've been thinking about writing CSS that's easy to read and adjust at a
later date (often by someone else).

Here's where I seem to be headed:

Breaking the page down into container divs, setting a class for each of them
like:

..header, .left_column, .main_content ,.right_column, .footer, .nav

(maybe not those names, but obvious ones)

creating very few other classes, instead styling like this:

..header p{...}
..header p img{...}

no @import , NS4 readble but not necessarily beautiful.
Checking IE5,Opera7, NS7.1 and Safari. (Usually nearly identical)

Everything external, but few stylesheets. Usually just one site wide, but
that may because I'm doing static (CMS) and database pages using the same
template for both.

Where are we headed with maintainability ? What approaches are being used
that are successfull? What am I doing that may be wrong? What is right?

I'm just a programmer, so I don't have much experience with this. But I find
myself writing more and more templates lately as many webdevelopers need
cleaner, more precise HTML than you can write with Dreamweaver! Oh what
tangled tables I've disposed of!

Jeff

[Neal]

On Mon, 09 Feb 2004 06:39:44 GMT, Jeff Thies <no****@nospam. net> wrote:

I've been thinking about writing CSS that's easy to read and adjust at a
later date (often by someone else).

Here's where I seem to be headed:

Breaking the page down into container divs, setting a class for each of
them
like:

.header, .left_column, .main_content ,.right_column, .footer, .nav

(maybe not those names, but obvious ones)
I don't know about others, but I find using ID's for major divisions of a
page is easier, and lends itself to easy organization.
creating very few other classes, instead styling like this:

.header p{...}
.header p img{...}
Right, and sorting under the div they go with.
no @import , NS4 readble but not necessarily beautiful.
Well, I prefer a link to common styles and importing styles that won't mix
with older browsers. Not the only way to do it, of course.
Checking IE5,Opera7, NS7.1 and Safari. (Usually nearly identical)

Everything external, but few stylesheets. Usually just one site wide, but
that may because I'm doing static (CMS) and database pages using the same
template for both.
External is a given. Internal is as hard to maintain as doing it the old
way.
Where are we headed with maintainability ? What approaches are being used
that are successfull? What am I doing that may be wrong? What is right?

I'm just a programmer, so I don't have much experience with this. But I
find
myself writing more and more templates lately as many webdevelopers need
cleaner, more precise HTML than you can write with Dreamweaver! Oh what
tangled tables I've disposed of!

An external CSS or two (one imported into the linked file) are so much
easier to alter, adjust and maintain than a site full of style.
Occasionally, you have to go thru each page and alter the structure,
adding or moving a div, but that's quick work. Far easier than
finding/replacing a formatting change in every document whether it has it
or not.

I keep a txt template (current to the latest format) in with the local
files. Everything but content is there, makes new page generation simple.

[Jeff Thies]

> > I've been thinking about writing CSS that's easy to read and adjust at a

later date (often by someone else).

Here's where I seem to be headed:

Breaking the page down into container divs, setting a class for each of
them
like:

.header, .left_column, .main_content ,.right_column, .footer, .nav

(maybe not those names, but obvious ones)
I don't know about others, but I find using ID's for major divisions of a
page is easier, and lends itself to easy organization.

Hmmm, that may be easier to pick up the major divisions as an ID, #'s really
standout. I rarely use id's in stylesheets anyhow.

Might be a good idea to add some whitespace in between stylesheet "sections"
and add comments about the architecture. I've never seen that though!

<snip>
I keep a txt template (current to the latest format) in with the local
files. Everything but content is there, makes new page generation simple.

Good idea. I usually have a templates folder. (with one or two templates)

Cheers,
Jeff

[Greg Schmidt]

On Mon, 09 Feb 2004 01:56:12 -0500, Neal wrote:

On Mon, 09 Feb 2004 06:39:44 GMT, Jeff Thies <no****@nospam. net> wrote:

I've been thinking about writing CSS that's easy to read and adjust at a
later date (often by someone else).

Here's where I seem to be headed:

Breaking the page down into container divs, setting a class for each of
them
like:

.header, .left_column, .main_content ,.right_column, .footer, .nav

(maybe not those names, but obvious ones)

I don't know about others, but I find using ID's for major divisions of a
page is easier, and lends itself to easy organization.

I agree with using IDs instead of classes for this. However, I would argue
that some of the names above are not good. In particular, left_column and
right_column. Instead, use names that describe what is in them. (header,
footer, nav are all good for this reason.) What you want to avoid is a
situation where you end up doing a redesign where what used to appear on
the left now appears on the right, but is still named left.

creating very few other classes, instead styling like this:

.header p{...}
.header p img{...}

Right, and sorting under the div they go with.

I'm not sure if this is what you mean, but I often try to style things with
whichever of child, descendant, and adjacent-sibling selectors is most
appropriate, rather than defining new classes. For example, if I want a
particular style on the headings of the content div, I'd use #content>h1
rather than .content_header . Of course there are lots of good times to use
classes, but they seem to be used by many people as a catch-all method,
when some other way is often cleaner.

no @import , NS4 readble but not necessarily beautiful.

Well, I prefer a link to common styles and importing styles that won't mix
with older browsers. Not the only way to do it, of course.

Agreed. The only variant on this that I use is that my script for header
generation detects MSNTV and doesn't give them the @import, because they
try to use it, but tend to botch things up royally due to very broken CSS
support.

Checking IE5,Opera7, NS7.1 and Safari. (Usually nearly identical)

Everything external, but few stylesheets. Usually just one site wide, but
that may because I'm doing static (CMS) and database pages using the same
template for both.

External is a given. Internal is as hard to maintain as doing it the old
way.

Agreed again, although there are a couple of isolated instances where I
need a style in only a single place so I inline it.

--
Greg Schmidt gr***@trawna.co m
Trawna Publications http://www.trawna.com/

[Neal]

On Sun, 15 Feb 2004 04:43:30 GMT, Greg Schmidt <gr***@trawna.c om> wrote:

Agreed again, although there are a couple of isolated instances where I
need a style in only a single place so I inline it.

That's certainly appropriate on occasion. Still, you'll agree that the
average web author will want to have an external .css document contain
almost every style. I'd advise a beginner who has worked out their style
sheet in the header for one page to clip it and make an external css file
before beginning page 2. The instances where an inline style or a
permanent page-specific head style declaration are actually worthwhile
take a bit of time to recognize.

[Stan Brown]

It seems "Greg Schmidt" wrote in
comp.infosystem s.www.authoring.stylesheets:

However, I would argue
that some of the names above are not good. In particular, left_column and
right_column . Instead, use names that describe what is in them. (header,
footer, nav are all good for this reason.)

Just out of curiosity, aren't "header" and "footer" just as
positionally named as "left" and "right"?

--
Stan Brown, Oak Road Systems, Cortland County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2 spec: http://www.w3.org/TR/REC-CSS2/
2.1 changes: http://www.w3.org/TR/CSS21/changes.html
validator: http://jigsaw.w3.org/css-validator/

[Stan Brown]

It seems "Neal" wrote in comp.infosystem s.www.authoring.stylesheets:

On Sun, 15 Feb 2004 04:43:30 GMT, Greg Schmidt <gr***@trawna.c om> wrote:

Agreed again, although there are a couple of isolated instances where I
need a style in only a single place so I inline it.

That's certainly appropriate on occasion. Still, you'll agree that the
average web author will want to have an external .css document contain
almost every style.

I agree. I know that pretty much every time I've created a style in
line, or even in a <head><style> section, I've very quickly found I
needed it in another document. Then I have to do (a bit) more work
than if I had put it in the style sheet to begin with.

--
Stan Brown, Oak Road Systems, Cortland County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2 spec: http://www.w3.org/TR/REC-CSS2/
2.1 changes: http://www.w3.org/TR/CSS21/changes.html
validator: http://jigsaw.w3.org/css-validator/