シェアする
Indentation Practices for CSS - Japanese Only
みなさまどうもこんにちは。
続いてCSSのインデントマナーについて確認していきましょう。
一般的なインデントされたCSSの記述はこのような形ですね。大多数の方がこのように記述していると思います。
p {
font-size: 18px;
font-weight: bold;
}
まずセレクタを記述し、そこに波括弧の左側を置きます。そのあと改行して宣言を記述します。宣言の文頭にタブ文字か、もしくは半角スペースを置いて位置を揃えます。半角スペースの数は2つか4つであることが多いですね。半角スペース3つや6つなどはあまり見たことありません。
あとは必要なプロパティの数だけ記述し、最後に改行して波括弧を閉じます。これがひとつのパターンです。
次に少数派ですが、改行をしないパターンがあります。
p { font-size: 18px; font-weight: bold;}
こちらは半角スペースを1つだけ空けて宣言を記述していくだけですので簡単かと思います。同じセレクタのプロパティは一行で書く、というイメージですね。
ちなみに私は上記のように改行をしないで記述しています。理由としては宣言の被りに気づきやすいからです。
例えば先の記事で解説する子孫要素、というのがあるのですが、
p { font-size: 18px; font-weight: bold;}
p span { font-size: 18px; color: red;}
上記の場合は『font-size: 18px』という同じ宣言が記述されてしまっています。これは間違いではないですが必要のない記述です。正しくはこうなります。
p { font-size: 18px; font-weight: bold;}
p span { color: red;}
このような宣言の重複は横並びでCSSを記述していった方が気づきやすいです。見比べてみてください。
p { font-size: 18px; font-weight: bold;}
p span { font-size: 18px; color: red;}
p {
font-size: 18px;
font-weight: bold;
}
p span {
font-size: 18px;
color: red;
}
いかがでしょうか。他には一万個くらいのセレクタが記述されたCSSファイルを構築したり修正したりすることがあるのですが、一万個のセレクタの宣言一つ一つに改行を加えていくと全部で六万行くらいになってしまいます。そうすると改行が逆に仇になって読みにくくなってしまうので後者のようにセレクタごとに改行してあったほうが読みやすいです。
どちらもメリットデメリットがありますのでみなさんはお好きなほうのインデントマナーで記述してしまって問題ありません。
もし決めかねているのであれば改行を加えていくインデントの方が大多数派ですのでCSSに慣れないうちは改行していく方でインデントしたほうが無難かもしれません。
というわけでこの辺で。次の記事ではCSSのコメントアウトについて確認していきましょう。
ではでは～。
This article was written by Sakurama.
Author's beloved small mammal |
桜舞 春人 Sakurama HarutoA Tokyo-based programmer who has been creating various content since the ISDN era, with a bit of concern about his hair. A true long sleeper who generally feels unwell without at least 10 hours of sleep. His dream is to live a life where he can sleep as much as he wants. Loves games, sports, and music. Please share some hair with him. |
If you find any errors or copyright issues, please contact us.
