473,287 Members | 1,827 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,287 software developers and data experts.

writing maintainable stylesheets

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

Jul 20 '05 #1
6 1989
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.
Jul 20 '05 #2
> > 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
Jul 20 '05 #3
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.com
Trawna Publications http://www.trawna.com/
Jul 20 '05 #4
On Sun, 15 Feb 2004 04:43:30 GMT, Greg Schmidt <gr***@trawna.com> 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.
Jul 20 '05 #5
It seems "Greg Schmidt" wrote in
comp.infosystems.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/
Jul 20 '05 #6
It seems "Neal" wrote in comp.infosystems.www.authoring.stylesheets:
On Sun, 15 Feb 2004 04:43:30 GMT, Greg Schmidt <gr***@trawna.com> 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/
Jul 20 '05 #7

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

6
by: Jan Roland Eriksson | last post by:
Archive-name: www/stylesheets/newsgroup-faq Posting-Frequency: twice a week (mondays and thursdays) Last-modified: March 10, 2001 Version: 1.95 URL: http://css.nu/faq/ciwas-mFAQ.html Maintainer:...
2
by: Jan Roland Eriksson | last post by:
Archive-name: www/stylesheets/newsgroup-faq Posting-Frequency: once a week Last-modified: 2004-07-26 Version: 2.00 URL: <http://css.nu/faq/ciwas-mFAQ.html> Maintainer: Jan Roland Eriksson...
0
by: Jan Roland Eriksson | last post by:
Archive-name: www/stylesheets/newsgroup-faq Posting-Frequency: once a week Last-modified: 2004-07-26 Version: 2.00 URL: <http://css.nu/faq/ciwas-mFAQ.html> Maintainer: Jan Roland Eriksson...
0
by: Jan Roland Eriksson | last post by:
Archive-name: www/stylesheets/newsgroup-faq Posting-Frequency: once a week Last-modified: 2004-07-26 Version: 2.00 URL: <http://css.nu/faq/ciwas-mFAQ.html> Maintainer: Jan Roland Eriksson...
17
by: Eric Lindsay | last post by:
Is learning to write CSS a better use of time than finding and using a package that produces complete web pages? I've moved to a new platform (Macintosh), taking with me about 400 personal web...
22
by: JoeC | last post by:
I am working on another game project and it is comming along. It is an improvment over a previous version I wrote. I am trying to write better programs and often wonder how to get better at...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: Aftab Ahmad | last post by:
Hello Experts! I have written a code in MS Access for a cmd called "WhatsApp Message" to open WhatsApp using that very code but the problem is that it gives a popup message everytime I clicked on...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
by: marcoviolo | last post by:
Dear all, I would like to implement on my worksheet an vlookup dynamic , that consider a change of pivot excel via win32com, from an external excel (without open it) and save the new file into a...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.