By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
449,315 Members | 1,672 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 449,315 IT Pros & Developers. It's quick & easy.

Organizing a stylesheet itself

P: n/a
Hi,

Thanks for the excellent answer to my last question! One more:

Does anyone have a method they follow for organizing stylesheets
themselves? They seem like they can get bloated and hard to read. Aside
from putting all the "h1" rules together, I haven't thought of any way
to do it, if it's necessary at all.

J.
Jul 20 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a
Jamie wrote:
Does anyone have a method they follow for organizing stylesheets
themselves?
Most people seem to organize them by the role they play in the page:
font, color, layout. I've never done that, so I do it diffferently. I
start with generic elements (body, headings, paragraphs), then I have
sections for different pages or sections of the site. Forms gets its
own section, as does navigation. Probably not the best way, but it wfm.
I haven't thought of any way to do it, if it's necessary at all.


It is necessary. Use what makes sense for you. Looking over my css
files, my method does not seem like a good one. So don't use that. :-/

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/
Jul 20 '05 #2

P: n/a
In our last episode,
<fI********************@broadviewnet.net>,
the lovely and talented Jamie
broadcast on comp.infosystems.www.authoring.stylesheets:
Hi, Thanks for the excellent answer to my last question! One more: Does anyone have a method they follow for organizing stylesheets
themselves? They seem like they can get bloated and hard to read. Aside
from putting all the "h1" rules together, I haven't thought of any way
to do it, if it's necessary at all.


First, since the "C" in "css" means "cascading," order does matter
in "css" (and perhaps other kinds of stylesheets I don't know about)
if you have accidentally or on purpose used the cascade in creating
your stylesheets. You cannot just sort your stylesheets, but if
you have worked with them long enough to have internalized the
ideas of inheritance and the cascade, you can tidy them up.

One way of organizing css stylesheets is to modularize them.
You can have more than one stylesheet per page, and they are
applied in the order you link them. That means you can
have one (default.css) for site-wide defaults, one (links.css)
for section-wide styles, and one for particulars of a single
page (search-links.css) that would have things like styles
for images on the one page. Years ago Netscape did not seem
to handle multiple stylesheets and stylesheet includes properly,
but this does not seem to be a problem with modern versions.
(Or maybe it was IE - at any rate the browsers would not
both do the same thing, although I may have forgot which of
them did the right thing.)

Another way is to use a preprocessor, which is what I do now. I
happen to use chpp, which is not the most powerful preprocessor out
there, but is the one I understand (and one of the ones likely to be
easier for people who have done C or C++ programing). (Moral of
story: the best software is the kind you know how to use.) Whatever
preprocessor you use, learning whatever Make utility is available on
your system will repay the effort.

Now, I will give you some examples which are chpp. They should
give you an idea what a preprocessor can do. You can do the
same sorts of things with other preprocessors although since
chpp syntax is idiosyncratic and maddening, other preprocessor
statements are unlikely to look much like this example.

Essentially you create a template file and then use chpp to create
the final stylesheet(s).

This is the whole template file for the section of my home page
for writers. It could be called writer.scss (the extra s means
"source"). The theme of this page is supposed to suggest a
typewritten document (i.e. typed on a typewriter).

#include ../data/fonts.ccss
#include ../data/colors.ccss
BODY.writerpage { color: %<writecolor>; background-color: %<writeback>;
background-image: url(white.gif);
font-family: %<typewriter>; font-weight: 900;
font-size: medium; }
%<rightback=%sand>\
%<leftback=%'#FDF'>\
#include ../data/defaults.ccss
#include ../data/mainmenu.ccss
#include ../code/getstyles.chml

STRONG { color: red; background-color: transparent; }
B { color: red; background-color: transparent; }
EM { font-style: normal; text-decoration: underline; }
I { font-style: normal; text-decoration: underline; }
CITE { font-style: normal; text-decoration: underline; }

%getstyles(%'writerpage')\
Now to step through a little of it to show what it can do.

#include ../data/fonts.ccss
#include ../data/colors.ccss

These statements say to use some variable assignments in
files fonts.ccss and colors.ccss which are in a brother
directory of the directory containing writer.scss .

Here is a bit of colors.ccss

%<sand=%'#FFC'>\
%<writeback=%'#FFF'>\
%<writecolor=%'#000'>\

The line %<sand=%'#FFC'> simply assigns the value '#FFC'
to the variable name %<sand>.

And here is a bit of fonts.ccss

%<typewriter=%'"Courier New", "Andale Mono", \
lucidatypewriter, "American Typewriter", \
"Letter Gothic", courier, typewriter, monospaced'>\
%<roman=%'"Times New Roman", Georgia, times, roman, serif'>\
%<altroman=%' Georgia, "Times New Roman", times, roman, serif'>\
%<sans=%'"Trebuchet MS", Verdana, Arial, Helvetica, "Lucida Grande", \
Lucida, sans-serif'>\
%<comic=%'"Comic Sans MS", "Brush Script MT", Playbill, \
"Trebuchet MS", Arial, sans-serif'>\
The top line assigns to the variable %<typewriter> a list
of sort of typewriter-like fonts.

So when chpp works on this statement in writer.scss:

BODY.writerpage { color: %<writecolor>; background-color: %<writeback>;
background-image: url(white.gif);
font-family: %<typewriter>; font-weight: 900;
font-size: medium; }

it makes the substitutions and produces in writer.css (the actual
stylesheet) this:

BODY.writerpage { color: #000; background-color: #FFF;
background-image: url(white.gif);
font-family: "Courier New", "Andale Mono",
lucidatypewriter, "American Typewriter",
"Letter Gothic", courier, typewriter, monospaced;
font-weight: 900;
font-size: medium; }

If I find some other typewriter fonts or want them to have
a different order, I edit fonts.ccss, and that will
change all of typewriter fonts in all of my stylesheets the
next time I preprossess them.

Now back to writer.scss

%<rightback=%sand>\
%<leftback=%'#FDF'>\

These are just more assignment statements. Note that the
value of %<rightback> is %<sand> and the value of %<sand>
comes froms colors.ccss which was included before.

#include ../data/defaults.ccss

This includes a bunch of styles which will be used on almost
every page which are in a file defaults.ccss (such as centering
h1 - h4, class center, class both (for <br>) and so forth).

#include ../data/mainmenu.ccss

These are the styles for the menu selections which are in my
left sidebar. If I later decide to use top tabs for
the menu, I can change the menu styles by changing mainmenu.ccss
and when I preprocess writer.scss again, the changed menu
styles will be included.
#include ../code/getstyles.chml

This includes some functions definitions, the point of which we
will get to.
Back to writer.scss. These are the main styles for writer
pages. They are what make the writers section distinctive,
and why we want a writer.css:

STRONG { color: red; background-color: transparent; }
B { color: red; background-color: transparent; }
EM { font-style: normal; text-decoration: underline; }
I { font-style: normal; text-decoration: underline; }
CITE { font-style: normal; text-decoration: underline; }

This uses underlining for italics and red for bold, just
like on an old-timey typewriter. It is the point of this
stylesheet.

And finally we have:

%getstyles(%'writerpage')\
This is a function call. The function was defined by including
the file getstyles.chml .

This function takes a list of all the images on pages in the
writer's section. The list was made by another function defined
in getstyles.chml which was called when the html pages were
preprocessed. Here, this function uses the list of images
to look up the images in a hash sort of database and to makeup
the styles for each image.

Because of this function, it is important that all of the html
pages in this section be made up before the stylesheet. This
is accomplished by putting the preprossessing of the html
pages in a Makefile with the preprossing of the css pages in
the right order.

Here is the final writer.css after preprocessing (I have
wrapped some lines to fit an 80-column screen):
BODY.writerpage { color: #000; background-color: #FFF;
background-image: url(white.gif);
font-family: "Courier New", "Andale Mono",
lucidatypewriter, "American Typewriter", "Letter Gothic",
courier, typewriter, monospaced; font-weight: 900;
font-size: medium; }
..hide { display: none; }
..all { clear: both; }
DIV.rightbar { width: 220px; margin-left: 10px; padding: 10px;
float: right; background-color: #FFC; }
DIV.leftbar { width: 180px; margin-left: 10px; padding: 5px;
float: left; background-color: #FDF;
color: #000; margin-right: 10px; }
..in { list-style-position: inside; }
DIV.text P { text-indent: 2em; margin-top: 0; margin-bottom: 0; }
DIV.text P:first-child { text-indent: 0; }
DIV.text P:first-child:first-line { font-variant: small-caps;
font-weight: bold; }
DIV.text P:first-child:first-letter { font-variant: normal;
font-size: xx-large; font-weight: 900; float: left;
margin-right: 5px; font-family: "Courier New", "Times New Roman",
serif;
text-decoration: none; }
ADDRESS { text-align: center; font-weight: bold;
font-family: "Trebuchet MS", Verdana, Arial, Helvetica,
"Lucida Grande", Lucida, sans-serif;
font-style: normal; color: #000;
background-color: transparent;
text-transform: uppercase; }
..b1 { font-family: Impact, "Arial Black", Chicago, carbon, lucida,
charcoal, "Trebuchet MS",sans-serif; font-weight: bold;
color: #CCC; background-color: transparent; }
..b1 A { font-family: Impact, "Arial Black", Chicago, carbon, lucida,
charcoal, "Trebuchet MS",sans-serif; color: #000; background-color:
transparent;
font-weight: 900; text-decoration: none; }
ABBR {text-decoration: none; }
..left { float: left; margin-right: 10px; }
..caption { font-size: xx-small; font-family: "Trebuchet MS",
Verdana, Arial, Helvetica, "Lucida Grande", Lucida, sans-serif;
font-weight: bold;
color="009" background-color: transparent; }
..center { text-align: center; }
BR.clearl { clear: left; }
..mar { margin-left: 5%; margin-right: 5%; }
..menu { text-indent: 0; text-align: center; }
..paypal { width: 120px; color: #30F; background-color: #FFF;
border-width: 3px; border-color: #00A; border-style: solid;
font-size: small;
font-family: Georgia, "Times New Roman", "Times Roman",
Times, Roman, serif; }
..amgive { width: 120px; height: 150px; }
STRONG.pph { color: #009; background-color: #FFF; text-decoration: none; }
..fpright { float: right; margin-left: 10px; }
..ftabsch { color: #FFF; background-color: #000; text-align: center; }
..ftabser { color: #000; background-color: #FFF; }
..ftrsr { border: 0; }
..ftdser { color: #000; background-color: #FFF; text-align: right; }
..ftdsel { color: #000; background-color: #FFF; text-align: left; }
..fser { font-family: "Trebuchet MS", Verdana, Arial, Helvetica,
"Lucida Grande", Lucida, sans-serif; font-size: x-small; }
..ffleft { width: 140px; float: left; margin-right: 10px; }
..gaybooks { text-align: center; font-family: "Comic Sans MS",
"Brush Script MT", Playbill, "Trebuchet MS", Arial, sans-serif;
font-size: large; }
..sone { width: 93px; height: 143px; }
..home { background-color: transparent; color #CCC;
font-family: Impact, "Arial Black", Chicago, carbon, lucida, charcoal,
"Trebuchet MS",sans-serif;
font-size: small; }
..support { background-color: transparent; color #CCC;
font-family: "Comic Sans MS", "Brush Script MT", Playbill, "Trebuchet MS",
Arial, sans-serif;
font-size: small; }
..works { background-color: transparent; color #CCC;
font-family: Garamond, "Century Schoolbook", "Bookman Old Style",
"Book Antiqua", book, Georgia, Times, "Times New Roman", serif;
font-size: small; }
..writer { background-color: transparent; color #CCC;
font-family: "Courier New", "Andale Mono", lucidatypewriter,
"American Typewriter", "Letter Gothic", courier, typewriter,
monospaced; font-weight: normal;
font-size: small; }
..lars { background-color: transparent; color #CCC;
font-family: "Courier New", "Andale Mono", lucidatypewriter,
"American Typewriter", "Letter Gothic", courier, typewriter, monospaced;
font-size: small; }
..links { background-color: transparent; color #CCC;
font-family: "Comic Sans MS", "Brush Script MT", Playbill,
"Trebuchet MS", Arial, sans-serif;
font-size: small; }
..formal { background-color: transparent; color #CCC;
font-family: "Times New Roman", Georgia, times, roman, serif;
font-size: small; }
..store { background-color: transparent; color #CCC;
font-family: "Comic Sans MS", "Brush Script MT", Playbill,
"Trebuchet MS", Arial, sans-serif;
font-size: small; }
..gay { background-color: transparent; color #CCC;
font-family: "Comic Sans MS", "Brush Script MT", Playbill,
"Trebuchet MS", Arial, sans-serif;
font-size: small; }
..leather { background-color: black; color #CCC;
font-family: "Comic Sans MS", "Brush Script MT", Playbill,
"Trebuchet MS", Arial, sans-serif;
font-size: small; }

..home A { background-color: transparent; color: #F3F;
text-decoration: none; font-family: Impact, "Arial Black",
Chicago, carbon, lucida, charcoal, "Trebuchet MS",sans-serif;
font-weight: 900;
font-size: small; }
..support A { background-color: transparent; color: #D00;
text-decoration: none; font-family: "Comic Sans MS",
"Brush Script MT", Playbill, "Trebuchet MS", Arial, sans-serif;
font-weight: 900;
font-size: small; }
..works A { background-color: transparent; color: #000;
text-decoration: none; font-family: Garamond,
"Century Schoolbook", "Bookman Old Style", "Book Antiqua", book,
Georgia, Times, "Times New Roman", serif;
font-weight: 900;
font-size: small; }
..writer A { background-color: transparent; color: #000;
text-decoration: none; font-family: "Courier New", "Andale Mono",
lucidatypewriter, "American Typewriter", "Letter Gothic", courier,
typewriter, monospaced;
font-weight: 900;
font-size: small; }
..lars A { background-color: transparent; color: #F60;
text-decoration: none; font-family: "Courier New", "Andale Mono",
lucidatypewriter, "American Typewriter", "Letter Gothic", courier,
typewriter, monospaced;
font-weight: 900;
font-size: small; }
..links A { background-color: transparent; color: #000;
text-decoration: none; font-family: "Comic Sans MS",
"Brush Script MT", Playbill, "Trebuchet MS", Arial, sans-serif;
font-weight: 900;
font-size: small; }
..formal A { background-color: transparent; color: #00A;
text-decoration: none; font-family: "Times New Roman",
Georgia, times, roman, serif;
font-weight: 900;
font-size: small; }
..adult A { background-color: #000; color: #0E0;
text-decoration: none; font-family: "Times New Roman", Georgia,
times, roman, serif;
font-weight: 900;
font-size: small; }
..store A { background-color: transparent; color: #090;
text-decoration: none; font-family: "Comic Sans MS",
"Brush Script MT", Playbill, "Trebuchet MS", Arial, sans-serif;
font-weight: 900;
font-size: small; }
..gay A { background-color: transparent; color: #939;
text-decoration: none; font-family: "Comic Sans MS",
"Brush Script MT", Playbill, "Trebuchet MS", Arial, sans-serif;
font-weight: 900;
font-size: small; }
..leather A { background-color: #000; color: #FFF;
text-decoration: none; font-family: "Comic Sans MS",
"Brush Script MT", Playbill, "Trebuchet MS", Arial, sans-serif;
font-weight: 900;
font-size: small; }

STRONG { color: red; background-color: transparent; }
B { color: red; background-color: transparent; }
EM { font-style: normal; text-decoration: underline; }
I { font-style: normal; text-decoration: underline; }
CITE { font-style: normal; text-decoration: underline; }

..amgo { width: 12px; height: 12px; }
..amsearch { width: 126px; height: 32px; border: 0;}
..amshop { width: 120px; height: 90px; }
..mleaf { width: 45px; height: 30px; vertical-align: middle;}
#scribe { width: 50px; height: 50px; vertical-align: middle;}
..sportsban { width: 468px; height: 60px; border: 0;}
..ujack { width: 48px; height: 29px; vertical-align: middle;
margin-bottom: 5px;}

--
Lars Eighner -finger for geek code- ei*****@io.com http://www.io.com/~eighner/
If it wasn't for muscle spasms, I wouldn't get any exercise at all.
Jul 20 '05 #3

P: n/a
On Sat, 24 Jul 2004 10:32:44 -0500, Lars Eighner <ei*****@io.com>
wrote:
[snip]
Years ago Netscape did not seem
to handle multiple stylesheets and stylesheet includes properly,
but this does not seem to be a problem with modern versions.
(Or maybe it was IE - at any rate the browsers would not
both do the same thing, although I may have forgot which of
them did the right thing.)


If I recall correctly, IE3 had a bizarre bug where it would retrieve
all specified stylesheets but it would only use the first one to
*finish downloading*. The order they were listed didn't matter.

If you had a huge site-wide stylesheet and a little single-section
stylesheet, more often than not the little one would finish
downloading first and get used in preference to the global one. Of
course, it was also possible in odd cases to have the opposite happen.
Quite funny.

I might have got this backwards; maybe it was the *last* to download
that would win. It's been a while since I've had to think about IE3!

Best regards,
-Claire
Jul 20 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.