- Giving names to values in style sheets?
- Posted by Barry Pearson on September 8th, 2003
I find that my CSSs have a lot of repetition in their values. I end up with a
number of classes using (say) a particular colour, or font style. (And I
observe that a lot of the CSSs on the web are also like this).
Obviously, one way of reducing the repetition is to specify classes in steps.
If I want all my headings to have the same colour, I can have start with a
simple statement that gives h1, h2, h3 (etc) just the colour property, and
following this with the statements that give different other properties such
as size & weight to each level of heading. Indeed, sometimes this approach has
the right semantics, as it probably does in that example.
But other times what I would really like to do is a give a name to the value,
then use the name. Many languages (OK, CSS isn't a programming language!) have
"identity declarations" or whatever. They can make code both more robust and
more readable. And sometimes I just can't work out the inheritance/cascading
sequence which would achieve what I want. For example, what if I wanted to fix
certain borders as the same colour as the headings in the above example? Could
I do it but still only have the colour value once in the CSS?
I keep expecting that I just haven't learned enough yet, and that "the next"
document I read about CSSs will explain it to me. But I'm losing hope!
Am I missing something? Does it exist? Is it a problem that should be solved
in the tools used to edit CSSs, not in the CSS itself? What do others do?
(The answer isn't the use the extended range of colour names. I want to assign
logical names to colours, etc, not visual names).
--
Barry Pearson
http://www.Barry.Pearson.name/photography/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/
- Posted by Richard Watson on September 8th, 2003
"Barry Pearson" <news@childsupportanalysis.co.uk> writes:
If you want to modularise you can use two (or more) class names at
once like so:
<p class="main important">Stuff</p>
..main {
padding : 1em;
}
..important {
color: red;
}
--
Richard Watson
http://www.opencolo.com/
High Quality, Value for money colocation
- Posted by Barry Pearson on September 12th, 2003
Richard Watson wrote:
Thanks. Rather surprising, I knew you could do that. Why surprising? Because
it appears to be one of the most under-publicised features of the use of
styles. It rarely appears to be explicitly mentioned. (It doesn't appear to be
something that Dreamweaver 4 handles naturally).
It may be a useful technique for some purposes, but not for what I want. A
problem is that it commits the modularisation of properties at the HTML stage.
If (say) the HTML-writer "knows" that spacing & sizing is in one set of
classes, and colour and fonts in another, then some flexibility of CSSs is
lost. (In your example, the HTML-writer probably knows that one style from a
certain set and another from a different set has to be chosen, and it would be
tricky to hide the reasons for the choice, or to stop them having an impact on
flexibility). Another issue is that I want a way of headling style invoked by
other types of selectors, not just class-names. Eg. giving all headings the
same colour.
I have just spent some hours editting some CSSs, exploiting the inheritance &
precedence features and the ability to have multiple selectors in one rule.
(Remember I'm a bit newer to CSSs than many here). So now many, perhaps most,
of my selectors appear in more than one rule. I've tried not to go too far,
and just to stick to the "logically identical" properties. It has become
obvious that my CSSs sometimes "just growed like Topsy". One or two classes
have ended up null, because inheritance turns out to be sufficient. Just about
all the CSSs ended up smaller, because of less repetition of properties. They
are now easier to edit.
It hasn't solved all the problems behind my original request, but I am now
resigned to have some repetition that an "identity declaration" feature could
have avoided had it existed.
--
Barry Pearson
http://www.Barry.Pearson.name/photography/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/
- Posted by Richard Watson on September 12th, 2003
"Barry Pearson" <news@childsupportanalysis.co.uk> writes:
We'll add that one to the list then ;-) </troll>
It sounds to me like you want to use some scripting and/or learn to
use a preprocessor.
Well, you don't have to organise it like this, you can arrange in an
intersecting kind of way, so that you build up rules. So for instance
you might have a style for a section of a page, and a style for a type
of paragraph. When they intersect they combine, and you can even write
a rule in css for that.
I increasingly write fewer styles for straightforward classes. They
more often go:
p em { ... }
for emphasised text in a paragraph. Or probably more likely:
p.main em.name {...}
For emphasisied text of class "name" inside a paragraph of class
"main".
Indeed. It's one of those areas where a few moments' thought and a bit
of experience can save you a lot of time.
However my stylesheets still get out of hand :-)
--
Richard Watson
http://www.opencolo.com/
High Quality, Value for money colocation
- Posted by Jim Dabell on September 12th, 2003
Barry Pearson wrote:
I think that older browsers (Internet Explorer 4.x and Netscape 4.x) had
problems in this area, they would only see the first class or something.
Don't quote me on it though. It explains why it's traditionally
under-used.
Being able to 'inherit' properties from one class to another would be handy.
That way, you could come up with purely presentational classes without
having to litter your HTML with them. For example:
..box {
display: block;
margin: 1em;
padding: 1em;
color: black;
background: white;
border: thin solid;
}
..timestamp {
inherits: box;
font-size: 90%;
}
#content h2 {
inherits: box;
color: red;
background: yellow; /* I know, hideous */
}
Even if it were to be put into CSS today though, it would be a good five
years or so before widespread implementation. A bit frustrating really.
It sounds like you are doing well. Support for the direct descendant
selector ( > ) would help me out quite a bit, unfortunately Internet
Explorer doesn't support it.
--
Jim Dabell
- Posted by Chris Morris on September 12th, 2003
Jim Dabell <jim-usenet@jimdabell.com> writes:
Yes, though it's easy enough to fake.
..timestamp,
--
Chris
- Posted by Barry Pearson on September 12th, 2003
Chris Morris wrote:
I think what I'm now doing after the last few days is what you are suggesting.
I wanted simple HTML with massive flexibility in the CSS. (I use a different
CSS for each colour scheme, but apart from that the HTML template is the same
for all photograph pages, and the CSSs currently differ only in the colour
values).
URL:
http://www.birdsandanimals.info/bcp/...95_22_23_3.htm
HTML (subset):
<div class="outer">
<div class="middle">
<div class="inner">
<img src="s" height="h" width="w" alt="a">
</div>
</div>
</div>
CSS (subset):
div.middle, div.inner { padding: 7px; border: solid #000000 1px; }
div.middle { border-left-color: #666666; border-top-color: #666666; }
div.inner { border-right-color: #666666; border-bottom-color: #666666; }
There are logically only 2 border colours in such a scheme. What I wanted to
do, but can't see how to, is only have each colour once in the CSS. I can
manage one of them (here #000000) but I then end up overriding 4 of the 8
borders explicitly as above. (The short-cut ways of supplying border
properties don't match what I want).
I can obviously live with the above! This is now "it would have been nice, but
....".
Thanks.
--
Barry Pearson
http://www.Barry.Pearson.name/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/
- Posted by Barry Pearson on September 12th, 2003
Richard Watson wrote:
Thank you. Another construct that will be useful. (The CSS language is a lot
more subtle and powerful than typical tutorials make out!)
--
Barry Pearson
http://www.Barry.Pearson.name/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/
- Posted by Barry Pearson on September 12th, 2003
Jim Dabell wrote:
Yup! A long time before we can rely on all the new standards coming out,
except in selected "communities".
But the up-side is that even new browsers will have to support Transitional
HTML 4.01 (which is what I now aim at) for a very long time! So I can delay
going for "4.01 Strict" or XHTML. I'll probably go there eventually, but not
this year!
--
Barry Pearson
http://www.Barry.Pearson.name/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/
- Posted by Geoff Berrow on September 12th, 2003
Message-ID: <Kdi8b.183$et5.324556@newsfep1-win.server.ntli.net> from Barry
Pearson contained the following:
Indeed, so what are the advantages in going strict?
--
Geoff Berrow
It's only Usenet, no one dies.
My opinions, not the committee's, mine.
Simple RFDs http://www.ckdog.co.uk/rfdmaker/


