1

かなり基本的な質問です: インライン スタイルのようなクラスを使用しても大丈夫ですか?

基本的に私が行ったことは、「ブートストラップ」を構築することです。しかし、要素ごとに行うのではなく、プロパティごとに行いました。基本的に、CSS は定義済みのスタイルのセットにすぎません。

例えば：

.margin-left-1 {margin-left:1px;}
.margin-right-1 {margin-right:1px;}
.bg-blue {background-color:blue;}
.padding-5 {padding: 5px;}
.radius-10 {border-radius:10px;}
.width-10 {width:10%;}
.width-10px {width:10px;}
.font-arial {font-family: 'Arial';}

等

これにより、Web サイトとそのスタイルを HTML ですばやく簡単に構築できます。しかし、これは悪い習慣ですか？ボーダー半径、色、ボタンなどのスタイルを設定し、パディング、マージンなど (一般的なボックス レイアウト プロパティ) をクラス/ID 内で定義したままにしておく必要がありますか?

4

5 に答える 5

3

あなたがやるべきこととは正反対です。CSS セレクター名は、セレクターの内容を表すのではなく、オブジェクトの性質 (スタイル) を表します。言い換えれば、セレクターの名前は、セレクターのコンテンツ自体にどれだけ依存するかという点で、可能な限り抽象化する必要があります。

これは、システムを使用することに決めた場合に遭遇する実際的な問題です。クラスのmargin-right属性の値を変更することにした場合はどうなるでしょうか。.margin-right-1ロジックに従って、その名前を let say に変更する必要があります。それだけでなく、 withクラスmargin-right-10への参照を置き換えるために、完全な HTML コードを更新する必要があります。margin-right-1margin-right-10

ただし、名前付きのクラスセレクターを定義すると、たとえば、.wrapper後で好きなようにその属性を再定義できます。

margin-leftそれだけでなく、セレクターにも属性がある場合はどうしますか? その特定のセレクターに名前を付けるために、どれが支配的になるでしょうか?

于 2012-07-11T20:25:44.893 に答える
1

LESSを使用することをお勧めします。

次に、いわゆる「ミックスイン」を作成して、スタイルで使用できます。例えば

.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}
于 2012-07-11T20:19:05.827 に答える
1

次に、モバイル Web サイトに同じ HTML を使用することに決めたとしますが、スタイルシートは異なります。幅 800px に設定した記事コンテナーがあるとします。持つのではなく、持つ.article {width: 800px}ことになります.width-800 {width: 400px}。新しいレイアウトを作成してデバッグしようとするとき、どのくらい混乱しますか?

また、幅が 800px だったすべての要素を 400px にするのではなく、記事だけにしたい場合もあります。したがって、メソッドを使用して記事コンテナーをターゲットにするには、それによって使用されるさまざまなクラスをすべてチェーンする必要があります。たとえば、次のようになります。

.float-left.border-solid-black.padding-10.bg-blue.font-arial.width-800 {
    width: 400px;
}

この非常に長いセレクターは、次のことを意味します。

  • CSSファイルでより多くのスペース（ファイルの重量）を占めるため、ページの読み込みが遅くなります
  • XPath または JavaScript を介してノードを解析するのが遅い
  • 他の div が影響を受ける可能性があるかどうかがわからないため (同じクラスが適用されている場合)、変更に対して脆弱です。
  • バグ修正をデバッグして分離するのははるかに困難です (誤ってページの他の領域に悪影響を与えないようにします)。
于 2012-07-11T23:16:23.053 に答える
1

良いクラス名を構成するものについては、多くの議論がありました。コミュニティのコンセンサスとHTML 仕様自体は、クラス名が要素がどのように見えるかではなく、要素が何であるかを表すことを示唆しています。

作成者が class 属性で使用できるトークンに追加の制限はありませんが、作成者は、コンテンツの望ましい表現を記述する値ではなく、コンテンツの性質を記述する値を使用することをお勧めします。

ウィキペディアのセマンティック HTMLページも参照してください。

于 2012-07-11T20:23:12.043 に答える
0

一般に、クラスを使用してテキストが何であるかを示し、CSS を使用してそのようなものをどのように表示するかを示します。このように、見出しの下に 0.3em のスペースではなく 0.5em のスペースを設けることに決めた場合、それは簡単なことです (特に FireBug のようなツールを使用する場合)。

あなたが示した方法でそれらを使用することは、この分離を利用していません。これはもろく、インライン スタイルをあちこちに配置する以外に追加機能はありません。

とは言っても、通常、.collapsed { display: none }トグルなどのために、このようなユーティリティ クラスがいくつかあります (例: )。

于 2012-07-11T20:22:46.553 に答える