このCSS Inheritance conundrumはどのように扱うべきですか？

Question

私はグリフと呼ばれる画像のクラスを持っています。かつて、彼らはすべてglyphと呼ばれていました。彼らはただ一つの箱にしか現れなかった。そのボックスは特定のサイズで、JavaScriptのメソッドを使用してテキストが常に収まるようにし、グリフは常にテキストの残りの部分とほぼ同じ高さになるようにしました。これは簡単で、グリフは自分のスタイルシートのためにデフォルトで始まりました。

ここでは、1ページに複数のボックスを入れ、可変量のテキストを含めることにしました。各ボックスは独立したサイズになります。サイジングルーチンを遅らせることを試みましたが、これはユーザーの接続速度に大きく依存しています。私がサイジングルーチンを実行しないと、すべてが正しく見えないので、少なくともすべてのデフォルトサイズを選択したいと思います。もちろん、ロードされるまでjavascriptでサイズを変更することはできません。スネークはテールを食べる。

基本的に、複数のボックスがあるので、各グリフはクラスグリフ：1、グリフ：2などを取得します。この数値は、自分のサイトでユーザーが送信したアイテムの数と同じになる可能性があります。 CSSはこれをどのように処理しますか？これらの項目は基本的に私が見る限り2つのクラス名が必要です。しかし、私はそれが許されないと確信しています。

私は必要なもの：「グリフ：」で始まるすべての画像クラスを設定し

これは右、存在しない1EMするには？グリフ：*

また、：おそらくCSSクラス名で使用するのは悪いですか？

Answer 1

は使用しないでください。あなたはとても他人よう

<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

CSSクラス名には、:シンボルを含めることはできません。 :の後のすべては疑似クラス（:hoverのような）として解釈され、適切に解析されません。

あなたのクラスについては、なぜそれらはすべてユニークでなければなりませんか？クラスは一度に複数の要素を選択するように作られていますので、あなたはこれを行うことができます。

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

をそして1つのセレクタでそれらすべてを選択：記号：

.glyph { 
    color: red; 
} 

Answer 3

のようにそれを行うの要素に複数のクラスを持つことができますが、クラス名にコロン記号を使用してはならない、と述べています。ハイフンとハイフンは、使用するのが賢明な句読記号です。

クラスでコロンを使用し、CSSコードでエスケープすることはできますが、実際には面倒なので不要です。

第2に（これは他の回答よりもさらに進んでいます）、要素の固有のクラス名を生成していると、おそらく何か間違っているでしょう。

id属性は、要素に一意の名前を付けるための属性です。 classは、複数の要素に同じクラス（または複数のクラス）を適用できるようにするため、すべての要素を同じスタイルにすることができます。あなたはすでにこれを知っているでしょう。私が言っていることは、classではなくidを使用しているように聞こえるということです。

次のように、2つのクラス名が許可されていないとはかなり確信していますが、実際は許可されています。class="glyph bob"を持つことは完全に許されており、要素はクラスglyphとクラスbobの両方からスタイルを取得します。あなたは好きなだけ多くのクラスを持つことができます。しかし、私はまだ彼らに一意の名前を付けるためにはIDでなければならないと言っています。

また、すべてのglyph*クラスを設定するCSS構文を求めます。ここでも、あなたは間違っている：この構文はextended attr syntaxを経由して、存在しない：

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

あなたは、サイジングルーチンを遅らせる、と紹介した問題について話しています。このための1つの解決策は、ブラウザがどのように見えるべきかを調べるまでアイテムを完全に隠すことである。あなたは、それを意図的な効果のように見えるように見えるように消えるかもしれません。

しかし、結局のところ、私はグリフを画像に入れて、それを独立してサイジングする理由を疑問に思っています。それは少し奇妙に聞こえる。質問のあなたの記述は私があなたが達成しようとしているものが不思議に思えます。

イメージではなくスケーラブルグラフィックス（SVG/VML）またはカスタムフォントをグリフに使用することを検討しましたか？カスタムフォントを使用した場合は、通常どおりフォントサイズを指定するだけで、ブラウザがそのフォントをすべて使用できるようにすることができます。

そのうちのいくつかが役に立ちました。