CSS formatting style

[Florian Brucker]

Yeah, that's right, this question is not about styling HTML with CSS,
but instead about how one should arrange his CSS code so that it is easy
to understand and modify.

The thing that I've got problems is that CSS does not seem to support
variables or conditionals (if/else). This makes it IMO difficult to
arrange the code, especially if several tags share one attribute (same
background for example). How do you organise your files?

1. Arrange everything according to HTML tags, e.g.
p { /* all settings for p go here */ }
h1 { /* all settings for h1 go here */ }

2. Arrange everything "logical", e.g.
h1, h2, h3, h4, h5 { font-weight:bold; }
h1, h2 { margin:0.5em; }
p, h4, h5 { padding:1.5em 0.5em 1.5em 0.5em; }

Or do you use a mixture of both? In the first version, it's easy to find
a style for a specific tag, but it's hard to change all those green
backgrounds to blue (and search&replace does not always do the job). The
second method makes that easy (because all elements which should have
the same background are grouped together). However the style
declarations get really messy, because every element is noted several
times in the whole file.

With variables it would be like (very simple example, of course)

$background:#FF F url(myimage.gif );
$border:1px solid #000;

p {
background:$bac kground;
/*other options*/
}

h1 {
border:$border;
}

h2 {
border:$border;
background:$bac kground;
}
Perhaps my opinion is based on my background of doing more programming
than markup, but that's why I ask you :)

I've also looked at some CSS files on the net, but I often found them
hard to understand, because I missed the logical grouping.

I'd be glad to hear some opinions on how this is done professionally.
Thanks,
Florian
--
Minimum Requirement #10: The mouse is there to rest your hand upon when
you're not typing (WEB.DE help-wanted ad: Linux Guru)
[------------ http://www.torfbold.com - POV-Ray gallery ------------]

[Brian]

Florian Brucker wrote:

The thing that I've got problems is that CSS does not seem to support
variables or conditionals (if/else).
Correct. CSS is not a programming language.
How do you organise your files?
By site. Site wide styles (body, p, h1, h2, etc.). After that, I create
sections for different pages/sections of a site, along with a separate
section for form styling.

1. Arrange everything according to HTML tags, e.g.
p { /* all settings for p go here */ }
h1 { /* all settings for h1 go here */ }

2. Arrange everything "logical", e.g.
h1, h2, h3, h4, h5 { font-weight:bold; }
h1, h2 { margin:0.5em; }
p, h4, h5 { padding:1.5em 0.5em 1.5em 0.5em; }

Or do you use a mixture of both?
Use a mixture. There is no right and wrong. And only you know how your
css breaks down, and how you can best organize it to reduce the file
size and make it easier to change later.
I'd be glad to hear some opinions on how this is done professionally.

Oh, in that case, I should not have responded, since I'm a mere amateur.
;-)

--
Brian (remove "invalid" to email me)
http://www.tsmchughs.com/

[Neal]

On Sat, 09 Oct 2004 15:46:31 +0200, Florian Brucker <to**@torfbold. com>
wrote:

Yeah, that's right, this question is not about styling HTML with CSS,
but instead about how one should arrange his CSS code so that it is easy
to understand and modify.

More important - proper cascade. And you generally need to go general to
specific.

So, start with default body, heading, p, etc. styles that are mostly
applicable site-wide. Then styles for id- and class-contained versions of
elements. Then do the ones that change in a more random fashion. Remember,
a later rule overrides a previous rule with the same specificity, so watch
for that.