CSS設計を考える｜ちゃんとしたCSSの書き方
WEB制作には欠かせない言語、それが「CSS」
単純だからこそ難しい「CSS」
フロントエンドの方が最も触るものの１つがCSSではないでしょうか。
現にHTMLを書くよりCSSをいじっている時間のほうが長いはずです。普段何気なく書いているCSSですが、そのCSS設計について今一度見直してみたいと思います。
書くだけなら簡単な「CSS」。簡単で自由に書けるからこそ、その反面破綻しやすいのも事実です。
作るサイト規模が大きかったり、後々大きくなる場合など、安易にコーディングを行っていると後の修正がとても大変になってしまったりします。
今一度、基本的なCSSの書き方から命名規則などについても考えなおしてみたいと思います。
まずは、CSSのルールを決める
CSSの書き方には一定のルールを決めておくようにします。ルールを決める際で一番重要なことが、とにかく一貫性を持たせるということです。
１. ファイルサイズ削減を意識した書き方をする
CSSを書く際にはなるべくファイルサイズ削減を意識した書き方を心がけます。
クラス名を短縮する
クラス名についてですが、できる限り短縮した形で表現するようにします。
ただし、意味がわからないほど短縮しないようにします。
例えば以下のような例です。
・image → img
・text → txt
・navigation → nav
・bottom → btm
・button → btn
・category → cat
・arrow → arw
【例】
.btn {
margin: 0 auto;
}
- ポイント！
- あくまで意味がわからなくならない程度に省略します。
プロパティを短縮して書く
プロパティについて、短縮して書ける場合は、なるべく短縮して書くようにします。
もちろん目的はファイルサイズ節約のためですが、後のメンテナンスを楽にしてくれます。
以下例です。
【ダメな例】
.box {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
border-width: 10px;
border-style: solid;
border-color: red;
}
【イイ例】
.box {
margin: 10px 20px;
border: 10px solid red;
}
ダメな例とイイ例を比較してもらえば一目瞭然かと思いますが、
短縮形で書くことによってかなり短く書くことができます。
またメンテナンス性も向上します。
たとえば途中で「marginの値を変えたいな」となった時、ダメな例では行自体を書き換える必要がありますが、イイ例では値のみを変更するだけで済みます。
もし、セレクタの下に10pxマージンを指定したいだけの場合、margin-bottom: 10px;といった記述でもよいのですが、後のメンテナンス性を考えるのであれば、
margin: 0 0 10px;と記述するべきです。
16進数の定義はなるべく３桁で書く
色定義について、３桁で書ける場合はそのように書くようにします。
【ダメな例】 background: #000000; 【イイ例】 background: #000;
0以下の小数の場合は、接頭の0を省略する
色定義について、３桁で書ける場合はそのように書くようにします。
【ダメな例】 font-size:0.9em; 【イイ例】 font-size:.9em;
2. CSSの詳細度について理解した書き方をする
CSSは基本的に後から宣言されたものが上書きされるといったものになります。
しかし、CSSの記述の仕方により、それぞれの詳細度は変わってきます。
この詳細度への理解を深めることで、破綻しにくいメンテナンス性の高いCSSが書けると思います。
- ▼詳細度高
- !important
- インライン記述
- IDセレクタ
- クラスセレクタ・属性セレクタ・擬似クラス
- 要素セレクタ、擬似要素
- ユニバーサルセレクタ
- ▲詳細度低
基本的に詳細度が高いもののスタイルが適用されます。
以下例になります。
.wrap .box{
margin: 10px;
}
.box{
margin: 20px;
}
上の例では、.boxに対し、後から指定しているほうが優先されるのではないかと思いがちです。
しかし、.wrap内にある.boxに対しては上の指定のほうが優先されます。
CSSを大量に書いていくと、このように詳細度について戸惑うようになることがあるかと思います。
詳細度についての計算が面倒な場合は、SASSなどの使用をおすすめします。
また、詳細度についてのルール決めは、以下の「NG集」に記載しております。
３. CSSのNG集
次に、CSSを書くうえでやってしまいがちだけど、やってはいけないルールを決めましょう。
!importantは使わない
CSSが破綻してしまう大きな原因になりがちなのが、「!important」です。
場合によっては使う必要性もありますが、基本的には使うのはやめましょう。
【ダメな例】 background: #000000 !important; 【イイ例】 background: #000;
IDセレクタは使わない
基本的にIDはJSでの指定のためのみに使うようにします。
IDの一番大きな特徴は「１ページに１度しか使えない」というものです。
そのためIDセレクタに対してスタイルを指定することはやめましょう。
詳細度が高くなりすぎてしまい、汎用性もなくなります。
インライン記述はしない
これはプログラマの方に多いかもしれません。
HTMLに直接スタイルを記述するというものです。
【ダメな例】 <section style="background-color:red">...</section>
動的にスタイルを追加させる場合などを除き、基本的にはこの書き方は避けます。
（JSで動的にスタイルを変える場合は、クラスの追加・削除といったやり方のほうが望ましいです。）
また、直接HTMLに記述したスタイルのほうが、CSSファイルでの指定より優先度が高くなります。
そのため、CSSファイルで指定しているスタイルを打ち消してしまい、後の混乱を招きやすくなります。
タイプセレクタへの指定はしない
これは結構やってしまう人は多いのではないのでしょうか。
なるべく簡略的にコーディングをしようと思い、タイプセレクタにスタイルを指定する人は多いと思います。
【ダメな例】
article {
margin: 10px;
}
article h2 {
font-weight: bold;
}
上記の書き方の場合、すべてのarticleに対してmargin: 10px;が効いてしまいます。
さらに、すべてのarticle内のh2に対してfont-weight: bold;が効いてしまいます。
このように書いてしまうと、後の運用時に、一部のarticleのスタイルを変えたい時などに無駄にCSSを書いたりしなくてはいけなくなってしまいます。
以下良い例になります。
【イイ例】
h2 {
margin: 0;
padding: 0;
}
.article1 {
margin: 10px;
}
.article2 {
margin: 20px;
}
基本的に、タイプセレクタに対してはリセット用のスタイルしか記述しないようにします。
それ以外にはクラス名を付け、それに対してスタイルを記述するようにします。
ユニバーサルセレクタを使用しない
ユニバーサルセレクタとは、「*」を使うことですべての要素に対して効くセレクタのことです。
【ダメな例】
* {
font-color: #333;
}
【イイ例】
html,body {
font-color: #333;
}
ユニバーサルセレクタは詳細度を持ちません。また、どのセレクタよりも弱いです。
主にリセット目的で用いられることが多いと思いますが、なるべく使用しないようにします。
CSSハックを使用しない
基本的に以下のようなCSSハックの使用は避けます。
【ダメな例】
.selector {
background-color: red; /* ハックなし */
background-color: green\9; /* IE10以下 */
*background-color: blue; /* IE7以下 */
_background-color: yellow; /* IE6 */
}
CSSハックは後にどうなるかわからないため、極力記述を避けます。
CSSハックよりも、条件分岐コメントなどを使うようにします。
絶対値を多用しない
以下例になります。
【ダメな例】
.selector {
line-hight: 27px;
}
【イイ例】
.selector {
line-hight: 1.5;
}
ダメな例の場合、後にフォントサイズが変わったとしても、
絶対値のため、相対的には変化してくれません。
しかし、イイ例の場合は、後にフォントサイズを変えたとしても、
相対的に値が効くので、無駄にスタイルの書き換えをしなくて済みます。
このように後のことを考え、相対的に効いてほしい場合はそれに合った値を指定するようにします。
４. プロパティ記述の順番を考える
これに関しては、各ブラウザのガイドラインも異なり、
書く時意識するのが面倒でもあるため、それほど深く考える必要はないかと思っています。。
ただ、長くCSSを書いているとやはり順番を揃えたくなってくるのも事実です。
また、各プロパティの順番を揃えておくことで、可読性も上がります。
プロパティの記述順
以下、例になります。弊社では以下のような並びを意識してCSSを記述しております。
- ①【表示系】display,z-index…
- ②【配置系】position,float…
- ③【サイズ系】margin,padding,width,height,border…
- ④【文字系】font,line-hight,text-align,letter-spacing…
- ⑤【背景系】background…
- ⑥【その他】animation,transition…
CSSの命名規則
次に命名規則について、、
といきたいところですが、時間がなくて書けません。。この続きはまた後日アップします。
