0

私はWebデザイナーやプログラマーではありませんが、CSSクラスでこの問題に遭遇しているようです。属性を共有するCSSクラスのセットを管理する最良の方法は何ですか？

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

一般的に、最善のアプローチは何ですか。

  1. 「statusbar」クラスと「transfer-failed」クラスを個別にdivに追加し、それらが組み合わされて存在するかどうかを確認しますか？
  2. 「statusbar」クラスと「statusbar-failed」クラスを用意し、クラスを適切に設定し、コードの繰り返しを避けるために慎重なCSS構造を使用します。
  3. 「statusbar」クラスを作成し、「summary」テーブル内にあるdivや「transfer-failed」divなどのコンテキストを使用して、さらに特殊化します。

一般的なルールはありますか？一見無関係に見えるクラスの名前を変更すると問題が発生する可能性があるため、アプローチ3は壊れやすいようです。アプローチ1はどういうわけか奇妙に感じます。「失敗」のようなクラスは、別のクラスがないと意味がなく、さまざまなコンテキストでさまざまな意味を持つ可能性があります（たとえば、「失敗」は失敗したフォームの検証にも適用できます...）アプローチ2長い名前を持つ非常に特殊なクラスがたくさんあるため、扱いにくくなることがあります。

4

2 に答える 2

1

  1. 「ステータスバー」が常に1つしかない場合は、の id代わりに自由に使用classしてください。

  2. 同じページに複数のページがあり、それらが同じように見える場合は 、に固執しclassます。

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

  4. @LokaseのSMACSSは素晴らしいです。CSSを整理するためのその他のヒントについては、次を確認してください：http: //coding.smashingmagazine.com/2007/05/10/70-expert-ideas-for-better-css-coding/

于 2012-05-01T13:18:23.680 に答える
0

CSS の方法論やフレームワークをいくつか見てみましょう。私はSMACSSのファンです。

ベスト プラクティスの例はたくさんあります。それらを見つけて学習曲線をたどる必要があります。

于 2012-05-01T13:06:11.493 に答える