CSSの基本: CSSを記述するルールで、重要な構文と重要ではない構文

CSSを使用する際には、他の言語と同様に、構文を正しく理解しておく必要があります。CSSの構文は難しいものではありませんが、見落とされがちな小さいポイントがいくつかあります。その中でも特に、一部の文字とその配置は非常に重要で、CSSが正常に動作するために必要です。

CSSを記述するルールで、特に重要な構文、場合によっては重要な構文、重要ではない構文を紹介します。

CSS Basics: The Syntax That Matters & The Syntax That Doesn't

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

• 用語の解説
• 【重要】CSSの記述ルール: ブレース
• 【時には重要】CSSの記述ルール: スペース
• 【最も重要】CSSの記述ルール: セミコロン
• 【重要】CSSの記述ルール: タイプミスの文字
• 【重要ではない】CSSの記述ルール: 改行

用語の解説

まずは、ここで使用する用語の解説から。

CSSのルールセットとは、セレクタとブレース（中括弧）で囲まれた宣言で構成されています。宣言には、プロパティと値が含まれます。

【重要】CSSの記述ルール: ブレース

CSSのルールセットを記述する際には、必ずブレース（中括弧）が必要です。

CSSの記述ルール: ブレース

もし最初の開き括弧を忘れてしまうと、CSSはその後に続く文字をセレクタの一部であると認識してしまいます。その文字の中には、セレクタとして無効な文字が含まれる可能性もあります。可能性があるということは、そのCSSの記述が自分自身とそれ以降の記述を台無しにしてしまうことを意味します。デモページで、括弧を忘れてしまった時にどうなるか見てみてください。

閉じ括弧の場合はさらに深刻です。CSSファイル全体の残りの部分全てを台無しする可能性があります。

重要なポイント: ブレースは非常に重要です！

【時には重要】CSSの記述ルール: スペース

CSSで、スペースが重要な場所がいくつかあります。最も重要なものの一つは、セレクタです。セレクタ内の1つのスペースは、セレクタの前の部分の子孫を選択していることを意味します。例えばセレクタ「body p」は、「body要素の子孫であるp要素を選択する」ことを意味しています。この時のスペースには、大きな意味があります。

スペースを忘れてしまうと「bodyp」になってしまい、これは何も選択しません（bodyp要素はありません）。「body      p」ではどうなるでしょうか。スペースは複数連続している場合は、一つのスペースとして扱われます。

CSSの記述ルール: スペース

プロパティや値、関数名、変数名にスペースを入れることはできません。これらにスペースを加えてしまうと、そのルールは無効になります。

CSSの記述ルール: スペース

上記以外は、CSSにおいてスペースはあまり重要ではありません。

CSSの記述ルール: スペース

これらの記述ルールを踏まえ、スペースを使用して、きれいで読みやすいCSSを作成することをお勧めします。書式設定のベストプラクティスについては、CSSスタイルガイドを参考にしてください。

CSSのスペースを取り除くことはパフォーマンスにおいて最善の方法です。実際のWebサイトのCSSを見ていると気付くかもしれません。

実際のWebサイトのCSS

制作する時のオリジナルのCSSは残しておき、Webサイト用には軽量化されたCSSを使用するのがよい方法です。

【最も重要】CSSの記述ルール: セミコロン

CSSのルールセット内の各宣言（プロパティと値のペア）はセミコロンで終わります。このセミコロンは必須です。もしセミコロンがなければ、CSSは前の値の一部であるかのように次のプロパティを読み続けます。

CSSの記述ルール: セミコロン

セミコロンを省略できる場合があります。それは宣言の最後です。CSSの軽量化のために最後のセミコロンを手動で削除するのはお勧めしません、これはトラブルの原因になります。省略する場合はツールを利用して、自動的に削除するのをお勧めします。

実際のWebサイトのCSS

「実際のWebサイトのCSS」にも最後のセミコロンが削除されているのを確認できます。

【重要】CSSの記述ルール: タイプミスの文字

これはCSSに限らず、あらゆる言語で重要です。
コードのすべての文字が重要です。そんなコードの中にタイプミスした文字があると正常に動作しないでしょう。

CSSの記述ルール: タイプミスの文字

【重要ではない】CSSの記述ルール: 改行

CSSにおいて、改行は空白スペースのように扱われるため、上記の他のルールを破らない限り、必要に応じて自由に使用してください。

CSSの記述ルール: 改行

全体的に、CSSの構文はそれほど難しくありません。
あなたのCSSがうまくいきますように！