スタイルの組み合わせを管理する方法：複数のクラス、特定のクラス、またはコンテキスト？

私はWebデザイナーやプログラマーではあまりありませんが、CSSクラスでこの問題に遭遇しているようです。属性を共有するCSSクラスのセットを管理する最良の方法は何ですか？スタイルの組み合わせを管理する方法：複数のクラス、特定のクラス、またはコンテキスト？

たとえば、私は現在、ファイル転送のステータスを表すステータスバーを持つアプリケーションを作成しています。それは3つの異なる場所で使用され、それぞれは異なるサイズです。さらに、転送が失敗した場合、バーは異なる色にする必要があります。

一般に、最適なアプローチ何ですか：

独立したdivに「ステータスバー」と「転送失敗」のクラスを追加し、その組み合わせ存在するかどうかを確認？
"statusbar"クラスと "statusbar-failed"クラスを用意し、クラスを適切に設定し、慎重なCSS構造化を使用してコードを繰り返さないようにしてください。
「ステータスバー」クラスを持っていて、「サマリー」テーブル内のdivや「転送に失敗した」divのようなコンテキストを使用して、さらに専門化します。

一般的なルールはありますか？アプローチ3は、一見無関係なクラスの名前を変更すると、物が壊れる可能性があるため、壊れやすいようです。アプローチ1は、何らかの形で、何か別のクラスがなければ無意味である "失敗"のようなクラスを持ち、異なるコンテキストで異なることを意味するかもしれません（例えば失敗したフォームの検証にも "失敗"時には扱いにくくなり、長い名前の非常に特殊なクラスがたくさんあります。

出典

2012-05-01 Steve Bennett ㄹ

コンテキストセレクタの[CSSでの第二の天性]（http://www.w3.org/TR/CSS1/#contextual-selectors）です。あなたは毎日それを使います。 – BoltClock

それを id代わりclassのを使用して自由に感じます。
が同じページに複数あること、そして、彼らは似 何かを見て、classに固執れます。

適切な場合は、transfer-failedクラスを割り当てます。あなたのCSSでは、このクラスのには、がデフォルトの「ステータスバー」を区別するプロパティのみが必要です。個人的には、＃3 （コンテキストアプローチ）が好きです。 WordPressと他のCSMは、の名前とカテゴリ（および他に希望するもの）を<body> クラスとして割り当てます。 Modernizrは<html>タグを使用します。詳細はこちらhttp://perishablepress.com/dynamic-body-class-id-php-wordpress/

@LokaseのSMACSSは素晴らしいです。あなたのCSSを整理する上でより多くのヒントについては、これをチェックアウト：http://coding.smashingmagazine.com/2007/05/10/70-expert-ideas-for-better-css-coding/

出典

2012-05-01 13:18:23

それは素晴らしいリンクです - ありがとう！ –

何とかこれで終わった：http://css-tricks.com/multiple-class-id-selectors/ –

いくつかのCSSの方法論やフレームワークを見ていくつかの時間をかけて、私はSMACSS

ベストプラクティスの多くの例がそこにありますのファンです、あなたはちょうどそれらを見つけ、学習曲線を通過する必要があります。常に唯一の「ステータスバー」が存在することになる場合

出典

2012-05-01 13:06:11 Lowkase

...プロジェクトの他のメンバーを説得してみてください。:) –

ベストプラクティスは、チーム環境で簡単に防御されます。一番のハフを置いているマネージャー。 – Lowkase

ええ、他の仕事に取り組んでいる分散型オープンソースチームは難しいです。（私は試してはいけないと言っているわけではない...） –

スタイルの組み合わせを管理する方法：複数のクラス、特定のクラス、またはコンテキスト？

答えて

関連する問題