我应该如何处理CSS继承难题？

Question

I have a class of images called glyphs that appear through out my site. Once upon a time they were all called just called glyph . They used to only appear in one box. That box was a specific size and I used a javascript method to make sure the text always fit and the glyphs were always about the same height as the rest of the text. This was easy to do and the glyphs started off with a default due to my style sheet.

Now, I've decided to include multiple boxes per page with variable amounts of text. Each box gets sized independently. I've tried delaying the sizing routine, but this is highly reliant on a user's connection speed. If I don't run the sizing routine then things don't look right at all, so I'd at least like to pick a default starting size for everything. Of course, you can't size stuff with javascript until it has been loaded. Snake eats tail.

So basically, now that I have more than one box, each glyph gets a class glyph:1, glyph:2, etc. This number can go as large as the number of user submitted items on my site. How does CSS handle this? These items basically need two class names as far as I can see. But I'm pretty sure that's not allowed.

What I need: Set all images classes that begin with "glyph:" to 1em

This doesn't exist, right? glyph:*

Also, : is probably bad to use in a css class name, huh?

Answer 1

Don't use the : symbol. you can have more than one class for an element so do it like so

<div class="glyph glyph-1">Foo</div>
<div class="glyph glyph-2">Foo</div>
<div class="glyph glyph-3">Foo</div>
<div class="glyph glyph-4">Foo</div>

Answer 2

As others have said, you shouldn't use the colon symbol in class names. Hyphens and dashes are the only punctuation that is sensible to use.

It is possible to use colons in classes and escape them in your CSS code, but it gets really messy and is unnecessary.

Secondly (and this is where I'll go further than the other answers), if you're generating unique class names for your elements then you're probably doing something wrong.

The id attribute is there to give your elements a unique name; the class is intended to allow you to apply the same class (or classes) to multiple elements, thus allowing you to style all those elements the same. You probably know this already; I guess what I'm saying is that it sounds like you should be using id rather than class .

Next: You say you're pretty sure two class names is not allowed, but in fact it is allowed. It is perfectly permissible to have class="glyph bob" and your element will pick up styles from both class glyph and class bob . You can have as many classes as you like. I would still say, however, that if you want to give them unique names, it should be an ID.

You also ask for CSS syntax to set all the glyph* classes. Again, you're wrong: this syntax does exist, via the extended attr syntax :

[class^="glyph"] {
    /*styles here for classes beginning with 'glyph'
}

You talk about delaying the sizing routine, and the problems that introduces. One solution to this could be to have the items hidden entirely until the browser has finished working out how they should look. You could even fade them into view or something to make it look like it was a deliberate effect.

But after all that, I'm left wondering why you're putting glyphs in images and sizing them independently? It all sounds a bit odd; your description in the question leaves me wondering what you're trying to achieve.

Have you considered using scalable graphics (SVG/VML) or a custom font for your glyphs, rather than images? If you used a custom font, you could simply specify the font size as normal, and let the browser work it all out.

Hope some of that was helpful.

Answer 3

CSS class names can't contain the : symbol. Everything after the : will be interpreted as a pseudo-class (like :hover ) and will not be parsed properly.

As for your classes, why do they all have to be unique? Classes are made to select multiple elements at once, so you can just do this:

<div class="glyph">Foo</div>
<div class="glyph">Foo</div>
<div class="glyph">Foo</div>
<div class="glyph">Foo</div>

And select them all with one selector:

.glyph {
  color: red;
}