単一の要素に複数のCSSクラスを使用する方法

• 見積もり
• 注目
• 左

これらのクラス値の間のスペースに注目してください。 これらのスペースは、それらを個別の異なるクラスとして設定します。 また、クラス名にスペースを入れることもできません。なぜなら、クラス名をスペースで区切るのは、別のクラスとして設定するからです。

たとえば、空白なしで "pullquote-featured-left"を使用した場合、それは1つのクラス値になりますが、これらの3つの単語がスペースで区切られている上記の例は、それらを個別の値として設定しています。 Webページで使用するクラス値を決定する際には、この概念を理解することが重要です。

HTMLでクラス値を取得したら、クラスの値をCSSに割り当てて、追加したいスタイルを適用することができます。 例えば。

.pullquote {...}
.featured {...}
p.left {...}

これらの例では、CSSの宣言と値のペアは中括弧の内側にあり、スタイルが適切なセレクタに適用される方法です。

注 - クラスを特定の要素 （p.leftなど）に設定した場合でも、それをクラスのリストの一部として使用できます。 ただし、CSSで指定されている要素にのみ影響することに注意してください。 つまり、p.leftスタイルは、このクラスの段落にのみ適用されます。これは、セレクタが「leftのクラス値を持つ段落」に実際に適用すると言っているからです。 対照的に、この例の他の2つのセレクタは特定の要素を指定しないため、これらのクラス値を使用する要素に適用されます。

複数のクラスの利点

複数のクラスを使用すると、エレメントに新しいスタイルをまったく作成しなくても、エレメントに特殊効果を簡単に追加できます。

たとえば、 要素を左また​​は右に素早く浮動させることができます。 ちょうど浮動小数点数を使って左と右の2つのクラスを書くかもしれません：left; フロート：右。 それらの中に。 次に、左に浮かせなければならない要素があるときは、クラスリストにクラスleftを追加するだけです。

しかし、ここを歩く細い線があります。 Web標準はスタイルと構造の分離を命令していることを忘れないでください。 構造体はHTMLで処理され、スタイルはCSSで処理されます。

あなたのHTML文書が、 "red"や "left"のようなクラス名を持っている要素で満たされている場合、要素はどのように見えるかを指示する名前であり、構造とスタイルの間でその線を越えています。 私はこの意味で、私の非セマンティッククラス名を可能な限り制限しようとしています。

複数のクラス、セマンティクス、およびJavaScript

複数のクラスを使用するもう1つの利点は、より多くの対話性の可能性を提供することです。

初期クラスを削除せずに、JavaScriptを使用して既存の要素に新しいクラスを適用できます。 また、クラスを使用して要素のセマンティクスを定義することもできます。 つまり、追加のクラスを追加して、その要素が意味論的に意味するものを定義することができます。 これがMicroformatsの仕組みです。

複数のクラスの短所

あなたの要素に複数のクラスを使用する上での最大の欠点は、時間の経過とともに見て管理するのが面倒だということです。 どのスタイルが要素に影響を与えているのか、どのスクリプトが影響を与えているのかを判断するのが難しくなる可能性があります。 Bootstrapのように今日利用可能なフレームワークの多くは、複数のクラスを持つ要素を大量に使用しています。 あなたが慎重でない場合、そのコードは手を抜くことができ、非常に迅速に作業することができます。

複数のクラスを使用する場合は、1つのクラスのスタイルを別のクラスのスタイルよりも優先させるリスクもあります。 これにより、スタイルが適用されていない理由がわかっても、その理由がわかりにくくなる可能性があります。

あなたはその要素に適用された属性でさえ、特異性を認識する必要があります！

Chromeのウェブマスターツールのようなツールを使用すると、クラスがスタイルにどのように影響しているかをより簡単に確認でき、スタイルや属性の競合の問題を回避できます。

Jennifer Kryninのオリジナル記事。 ジェレミージラール編集：8/7/17