種類のCSS変数を使用できますか？

Question

私のサイトですべてのCSSコードを整理しようとしていますが、そのタイプに固有のものにしたいと考えています。タイプが20ピクセル、太字、青などと設定されているとします。

<h1 bold blue>Hello world</h1 blue bold> 

だから、CSSファイルがあります：

h1 { 
font-size:20px; 
} 

bold { 
font-weight:bold: 
} 

blue { 
color:blue; 
} 

私は私の設計プロセスを経ると、私は色やサイズなどと混合し、一致させることができますが、この可能性のようなものですか？

Answer 1

これは、あなたがしたいように可能exacltyではありませんが、何を行うことができますが、このです：

<h1 bold blue>Hello world</h1 blue bold> // your idea 
<h1 class="bold blue">Hello world</h1> // correct html, even slightly shorter 

と

h1 { 
    font-size:20px; 
} 

.bold {         // added . for being a class 
    font-weight:bold: 
} 

.blue {         // added . for being a class 
    color:blue; 
} 

CSS-変数lesscssのようなものを使用した場合、それ自体は可能であり、しかしこれはあなたが言及したものとは別のやり方で動作し、HTMLマークアップはまだ有効でなければなりません。

EDIT：
edem (and others) saidとして、実際のプロジェクトでクラス名としてblueとboldを使用することは良い考えではない、ということに注意してください。私はあなたにちょうどこれを短い例として与え、さまざまな "css-rules"のセット（read：クラス）を組み合わせる方法を尋ねると仮定しました。そうでない場合は、edemsまたはtims explanationに固執し、「意味上のマークアップ」のガイドをご覧ください。

Answer 2

はい。クラスを使用する。

<h1 class"bold blue">Hello world</h1> 

h1 {font-size:20px;} 

.bold { 
    font-weight:bold: 
} 

.blue { 
    color:blue; 
} 

Answer 3

色はめったに良い識別子ではありません。 「青」が青でなくなったとしますか？たぶんあなたはそれが赤であることを望みますか？

フォントウェイト（あなたの例では太字）も良い識別子ではありません。将来的には、通常のフォントウェイトでよりよく見えるフォントを好むかもしれません。

スタイルの目的（記事の行単位や画像のキャプションなど）や適用される要素の意味的な目的を判断し、それに応じてスタイルを指定します。

目的の達成のために、クラスの組み合わせを使用することができます（前述のように）。

Answer 4

これは良い習慣に違反しています。あなたが任意の記事のページで見つけることができる記事のヘッダタイプとすべてのページにあるメインヘッダを持っているとしましょう：

.mainHeader { 
    font-size:20px; 
    font-weight:bold: 
    color:blue; 
} 

.articleHeader { 
    font-size:15px; 
    font-weight:bold: 
    color:red; 
} 

いつの日かあなたがあなたの記事のヘッダーが、それ以上の青色ではないだろうと判断した場合はどう。あなたは良いwont'be

.blue { 
    color:red; 
} 

へ

.blue { 
    color:blue; 
} 

を変更した場合。意味的な目的に応じてクラス/ IDの名前を付ける必要があります。

重要なことは、CSSがsuccintであると考えられているため、1-2行で修正してページ全体の外観を変更することができます。ここに現れたアイデアは、あなたが良い習慣とはみなされていないため、十分なものではありません。

上記の回答にless cssを使用してください。ちなみに、PythonやPHPのようなあなたのWebページ上でスクリプト言語を使用する場合、継承をサポートするテンプレートエンジンを使用することができ、あなた自身のCSSコードを生成することができ、そこで変数を使用することができます。これは単にCSSだけでは適合しません。