8

ウェブサイトでよく使う色があるとしましょう。

さまざまなCSSクラスで色を何度も定義することができます

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

または

.green {color:green;}
.nav-login { other CSS content....... }

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

つまり、コンセプトは、ヘルパーCSSクラスを使用する必要があるのか​​、それとも特定のすべてを定義する必要があるのか​​ということです。

理論的には、CSSを増やしてHTMLを減らすことで長期的に帯域幅を節約できますが、デザイン的な意味でセマンティックCSSを書いているかのように、HTMLにヘルパーCSSクラスを適用する方法がわかります。

4

4 に答える 4

3

まだお持ちでない場合は、OOCSS（およびSmashing Magの紹介）をご覧ください。また、YandexからBEMへ-再びSmashingMagのイントロ。

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

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

ここでは、CSSプリプロセッサを使用するかどうかはまったく関係ありません。CSSプリプロセッサを使用して1 kmの長さのセレクタを出力する場合、明らかに間違って使用しています。これらはCSSをより速く、より少ない苦痛で書くための単なる方法です（マクロのおかげで各CSS3プロパティに必要なプレフィックスをわざわざ学ぶ必要はありませんが、それでも以前とほぼ同じCSSを出力するはずです）。重要なのは、プリプロセッサの有無にかかわらず、効率的なCSSを作成することです。ZenCoding / Emmetと同じです。毎日同じ繰り返しの行/指示を書くことにうんざりしているときに、それが必要であることを知っています。しかし、CSSのこれらの同じ行を出力します。ここでは魔法のようなものは何もありません。

于 2013-02-24T19:15:25.260 に答える
3

.green個人的には、緑色のテキストのように、プロパティに基づいてクラスに名前を付けるのは良い考えではないと思います。.approved代わりに、たとえば緑色のテキストや.warning警告、アラートなどに修飾子を使用してください。

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

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

Chris Coyier はかなり包括的なCSS スタイル ガイドをまとめました。これは黄金律ではありませんが、従うのは良いことです。

于 2013-02-24T17:48:04.820 に答える
2

実際、それは良い考えです。私も使っていますが、あなたが言ったように名前を付けていません。teddyrisedの例は良いです。

私の例として、巨大なページ構造と最小限のCSSを必要としない単純なプロジェクトを作成する場合、次のように名前を付けます。

.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;
}

ですから実際に使っても大丈夫です。それらに名前を付けることに注意してください:)

于 2013-02-24T18:12:38.047 に答える
0

私はあなたの問題に対して全く異なる解決策を提供するつもりです. Lessを使用します。

これを使用すると、変数や他の多くのクールなものも定義できます。

変数を使用すると、広く使用されている値を 1 か所で指定し、スタイル シート全体でそれらを再利用して、コードを 1 行変更するのと同じくらい簡単にグローバルな変更を行うことができます。

于 2013-02-24T17:48:28.953 に答える