グローバルCSSヘルパークラスは良い考えですか？

Question

私は色があると私は知っている私は多くのWebサイトで使用するつもりです。

私はそうコンセプトはあなたがヘルパーCSSクラスを使用する必要がありますか、あなたが特定のすべてを定義する必要があり、ある様々なCSSクラスの

.nav-login { color:#green; other css....... } 

それとも

.green {color:green;} 
.nav-login { other css....... } 

<div class="nav-login green">stuff</div> 

に倍の色の多くを定義することができますどちらか。

理論的には、より多くのCSSとより少ないHTMLを書くことで、長期的に帯域幅を節約できますが、設計上のセマンティックCSSを書いているかのように、ヘルパーCSSクラスをHTMLに適用する方法があります。

Answer 1

緑色のテキストの場合は、.greenのように、プロパティに基づいてクラスに名前を付けることをおすすめします。代わりに、修飾子を使用し、緑色のテキストの.approved、そして.warning警告、警告のため等、私の愚見で

、セレクタ（クラス、ID）を要素の役割/目的を反映すべきではなく、彼らを言います外観。たとえば、サイトを再設計して新しい配色を採用し、ナビゲーションメニューが緑色から青色に変わった場合、.greenセレクタはほとんど意味を持たず、乗っている人には理解しにくいでしょうもしあれば、将来のプロジェクト。

.nav-loginを使用して既に指定できる場合は、クラスをナビゲーションログイン<div>に割り当てる必要はありません。

Chris Coyierさんはかなり包括的に編集しています。それはゴールデンルールではありませんが、それに従うのは良いことです。

Answer 2

私はあなたの問題を完全に別の方法で解決するつもりです。これを使用するLESS

を使用して、あなたも変数を定義することができると他のクールなものをたくさんします

変数を使用すると、1つの場所で広く使われている値を指定することができ、その後、全体で再利用し、それら1行のコードを変更するだけで簡単にグローバルな変更を行うことができます。

Answer 3

実際に、それは良いアイデアですが、私はあまりにもそれらを使用しますが、彼らにあなたが言った道に名前を付けていない、teddyrised例は良いですが、

ちょうど私の例で、私にはないものを単純なプロジェクトを作ります（OOCSSを見てください

Answer 4

:)だから、実際にはそれだけでそれらをnameingのためにwhatch、それらを使用しても大丈夫OS私はこの

.push-right { 
    float: right; 
} 

push-left { 
    float: left; 
} 

.no-float { 
    float: none; 
} 

.centered { 
    margin: 0 auto; 
} 

.success { 
    color: green; 
} 

.error { 
    color: red; 
} 

.warning { 
    color: orange; 
} 

.info { 
    color: blue; 
} 

のようにそれらに名前を付け、巨大なページ構造と最小限のCSSを必要とし、 Smashing Mag introduction to it））を持っていなければなりません。また、YandexのBEMに - Smashing Mag intro to itもあります。

数年前にコンテンツ（HTML）をスタイル（CSS）から厳密に分離していないということを笑ってしまったのですが、私が出席した会議でNicole "stubbornella" Sullivanが話をしたときに頭を傷つけましたPSDからHTML/CSSに移行しなければならない数のページからなるプロジェクトに取り組んでいるので、私の要件は大幅に変更されました。 作成したCSSを再利用するクライアントのチームのまたはが、スタートアップの単一プロジェクトにあるチームのまたはを変更するだけで、CSSだけで作業することは全く同じではありません。

OOCSSについて、またそれがあなたのためにできることを学び、それを試してみて、それが適切でない場合はプロジェクトで使用しないでください。そうですか。

CSSプリプロセッサを使用するかどうかは、ここではまったく関係ありません。1kmの長さのセレクタを出力する場合は、間違った使い方をしています。 CSSを高速かつ苦痛なく書ける方法です（CSS3プロパティごとに必要なプレフィックスはマクロには必要ですが、以前と同じCSSを出力する必要はありません）。ポイントは、プリプロセッサの有無にかかわらず、効率的なCSSを書くことです。 ZenCoding/Emmetと同じです。毎日同じ繰り返し行/指示を書いていることにうんざりしているときに必要なことは分かっています。しかし、彼らはCSSのこれらの同じラインを出力します、何もここに魔法のない。