シンプルなコンマで簡単にコーディングできる理由
CSS、またはカスケーディングスタイルシートは、サイトにビジュアルスタイルを追加するWebデザイン業界で認められている方法です。 CSSを使用すると、ページレイアウト、色、 タイポグラフィ 、背景イメージなどを制御できます。 基本的に、ビジュアルスタイルの場合、CSSはそれらのスタイルをあなたのウェブサイトに持ち込む方法です。
ドキュメントにCSSスタイルを追加すると、ドキュメントが長くなったり長くなったりすることがあります。 少数のページしかない小規模なサイトでも、かなりのCSSファイルが作成される可能性があります。非常に大きなサイトには多数のユニークなコンテンツがあり、非常に大きなCSSファイルを持つことができます。 これは、スタイルシートに含まれる多数のメディアクエリを含む反応性のあるサイトによって複合化され、ビジュアルがどのように見え、ページが異なるスクリーンにレイアウトされるかを変更します。
はい、CSSファイルが長くなることがあります。 これはサイトのパフォーマンスやダウンロード速度に関しては大きな問題ではありません。なぜなら、長いCSSファイルでさえ非常に小さくなる可能性が高いからです（実際は単なるテキストドキュメントなので）。 それでも、ページスピードに関しては少しずつカウントされるので、スタイルシートを薄くすることができれば、それは良い考えです。 これは "コンマ"があなたのスタイルシートに非常に便利になる場所です！
コンマとCSS
あなたは、 CSSセレクタ構文でカンマがどのような役割を果たすのか疑問に思っているかもしれません。 文章のように、カンマは区切り文字に明確なコードではなく明瞭さをもたらします。 CSSセレクタのカンマは、複数のセレクタを同じスタイル内で区切ります。
たとえば、以下のCSSを見てみましょう。
th {色：赤; }
td {色：赤; }
p.red {色：赤; }
div＃firstred {color：red; }
この構文では、タグ、 tdタグ、段落タグをクラス赤で、divタグをIDで最初にスタイルの色を赤にします。
これは完全に受け入れられるCSSですが、このように書くには2つの重大な欠点があります：
- 将来、これらのプロパティのフォント色を青色に変更する場合は、スタイルシートでその変更を4回行う必要があります。
- スタイルシートには、必要のないたくさんの余分な文字が追加されます。 これらの4つのスタイルは過度のように見えないかもしれませんが、スタイルシート全体でこれを続けていくと、ラインが追加され、そのシートは必要以上に大きくなります。
これらの欠点を回避し、CSSファイルを合理化するために、カンマを使用してみます。
カンマを使用してセレクタを区切る
別々の4つのCSSセレクタと4つのルールを書く代わりに、個々のセレクタをカンマで区切って、これらのスタイルをすべて1つのルールプロパティに組み合わせることができます。 それがどのように行われるのです：
th、td、p.red、div＃firstred {color：red; }
カンマ文字は基本的にセレクタの中で単語 "and"として機能します。 これはt hタグとtdタグと段落タグと、クラスredと、最初のIDを持つdivタグに適用されます。 これは以前と同じですが、4つのCSSルールが必要ではなく、複数のセレクタを持つ単一のルールがあります。 これはコンマがセレクタ内で行うことで、1つのルール内に複数のセレクタを持つことができます。
このアプローチは、よりクリーンなCSSファイルを作成するだけでなく、将来の更新をさらに容易にします。 赤色から青色に色を変更したい場合は、元の4つのスタイルのルールではなく、1つの場所で変更するだけです。 CSSファイル全体でこれらの時間節約について考えてみましょう。これにより、これがどのようにしてロング・ルーンの時間とスペースを節約できるのかがわかります！
構文のバリエーション
上記のように1行にすべてを書くのではなく、各セレクタをそれぞれの行に分けることで、CSSを読みやすくすることを選択する人もいます。 これがどのように行われるのかです：
th、
td、
p.red、
div＃firstred
{
赤色;
}
各セレクタの後にコンマを置き、 "Enter"を使用して次のセレクタをそれ自身の行に壊すことに注意してください。 最終セレクタの後にコンマを追加しないでください。
セレクタ間でカンマを使用することで、よりコンパクトなスタイルシートを作成して、将来的に更新しやすくなり、今日読みやすくなります。
Jennifer Kryninのオリジナル記事。 ジェレミージラール編集：5/8/17