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 ------------]
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 ------------]
Comment