2012-01-19 7 views
2

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

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

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

h1 { 
font-size:20px; 
} 

bold { 
font-weight:bold: 
} 

blue { 
color:blue; 
} 

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

+1

これはクラスでも可能ですが、装飾的な属性やクラスでマークアップを汚染することはほとんどありません。 – BoltClock

答えて

7

これは、あなたがしたいように可能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として、実際のプロジェクトでクラス名としてblueboldを使用することは良い考えではない、ということに注意してください。私はあなたにちょうどこれを短い例として与え、さまざまな "css-rules"のセット(read:クラス)を組み合わせる方法を尋ねると仮定しました。そうでない場合は、edemsまたはtims explanationに固執し、「意味上のマークアップ」のガイドをご覧ください。

+0

いいえ。以下の私の説明を見てください。 –

+0

@edem:あなたは絶対に正しいですが、私は '青い'と '大胆な'は、彼が別のクラスを結合したいと思う短い例です。 – oezi

+0

心配しないで、私はdownvoteをキャンセルしました。 –

0

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

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

h1 {font-size:20px;} 

.bold { 
    font-weight:bold: 
} 

.blue { 
    color:blue; 
} 
+0

.boldや.blueを使用すると、他の色やフォントの種類に変更することができます。これは、もう見栄えが悪く、その場合は.blue {color:red}がとても意味深い。 –

4

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

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

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

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

+0

ポイントがあります。 –

3

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

.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だけでは適合しません。

+0

+1なぜ意味的なマークアップが重要であるか説明する。 – oezi

関連する問題