CSSを書くときのコツ

前回のCSSのルールを踏まえて、今回はCSSを書くときの概念的なルールです。

Contents

1 CSSのデメリット
- 1.1 抽象化が難しい
- 1.2 すべてのルールがグローバルスコープ
2 CSSを書くときのコツ
3 参考資料

CSSのデメリット

一般的には下記のようなことがデメリットと言われています。

抽象化が難しい

一般のプログラミングのように変数を使って、フォントサイズを一元管理する、といったことが一般的にはできません。※できる技術もでてきてはいます。

すべてのルールがグローバルスコープ

すべての変数が１つのソースにまとまっているような状態なので、影響度が把握できないのが難点です。

CSSを書くときのコツ

上記のようなデメリットを踏まえた上でのCSSを書くときのコツをまとめていきます。

id名、class名はわかりやすいものにする

これはプログラミングの変数名と一緒ですね。なるべくわかりやすいものにしましょう。

コードの量はなるべく減らすようにする

これはプログラミングと一緒ですかね。同じことを実現する場合、コードの量はすくなければすくないほどよいです。いかに書くよりも、いかに書かないかのほうが重要でしょう。

OOCSSやBEMなどの設計思想を知る

CSSにも設計思想といいますか、保守性をあげるための思想のようなものがあるようですね。簡単に説明させていただきます。

OOCSS

オブジェクト指向に基づいたCSSの設計指針のようです。下記のような点が特徴

構造と見た目のCSSを分ける

これは構造をきめるプロパティ(display,float,width,margin)を定義するCSSと見た目(font-size,color,border)を定義するCSSをわけよということです。

HTML

<button class="button button--success">OK</button>
<button class="button button--danger">キャンセル</button>

1 2	<button class="button button--success">OK</button> <button class="button button--danger">キャンセル</button>

CSS

.button{
  display:inline-block;
  padding:5px;
  text-align:center;
}
.button--success{
  color:#000;
}

.button--danger{
  color:#fff;
}

.button{

display:inline-block;

padding:5px;

text-align:center;

}

.button--success{

color:#000;

}

.button--danger{

color:#fff;

}

コンテンツとコンテナの分離

後にも述べますが、HTMLの構造が変わってもCSSに変更はないほうがメンテナンス性が高いので、なるべくHTML要素にCSSは書かない方向で考えよということです。

BEM

CSSを書くときに以下の3つの単位に分けます。

B=Block

Webを構成する要素ですね。ナビゲーションだったり、フォーム全体などがこれにあたります。

E=Element

Blockを構成する要素です。ナビゲーションのリストなどBlockを構成する1つ1つの要素がこれにあたります。

M=Modify

BlockやElementｎ状態を表します。

HTML

<ul　class="Tab">
  <li class="Tab__item Tab__item--active">アクティブ</li>
  <li class="Tab__item">タブ</li>
</ul>

<ul　class="Tab">

<li class="Tab__item Tab__item--active">アクティブ</li>

</ul>

CSS

/* Block */
.Tab{
  display:flex;
  align-items:centers;  
}

/* Element */
.tab__item{
  display:flex;
  height:100Px;
  width:20px;
}

/* Modify */
.Tab__item--active{
  color:#fff;
}

/* Block */

.Tab{

display:flex;

align-items:centers;

}

/* Element */

.tab__item{

display:flex;

height:100Px;

width:20px;

}

/* Modify */

.Tab__item--active{

color:#fff;

}

こんな設計思想があるとは知りませんでした・・・現実として現在書かれているCSSを完全にこれに準拠させることは難しいと思いますが、考え方のエッセンスだけでも知っておくとレイアウトを組むのが非常に楽になるでしょう。

CSSはなるべくHTML要素にはかかず、基本的にclassに書く

これはHTML要素にCSSを書いてしまうと、打消しのCSSを大量に書かなくてはいけなくなるからですね。

<h1>タイトル</h1>

1	<h1>タイトル</h1>

上記のようなHTMLがあり、cssで

CSS

h1{
  background-color: #EEE;
  border: 1px solid #222;
  color: red;
  margin-bottom: 1em;
  padding-top: 1em;
}

h1{

background-color: #EEE;

border: 1px solid #222;

color: red;

margin-bottom: 1em;

padding-top: 1em;

}

のように記述してしまうと別のh1タグを使った場合に打消しのCSSを書く可能性が高くなります。

そのためにも下記のようにclassのみにCSSを書いたほうがメンテナンス性が高くなります。

下記のようにHTMLエレメントにCSSを書いているとhtmlを変更したいとき(例としてul→divに)にcssごと変更する必要性がでてきますので再利用性もさがります。

NG div.example{}
OK .example{}

1 2	NG div.example{} OK .example{}

同様にidにcssを書かないほうがいいようです。これも再利用性がさがるからです。

知らなかったです・・・いわれてみれば確かにこれをしらないばっかりに打消しのCSSを大量に書いてました・・2年ぐらい前に知りたかったですね。

セレクタを短くする

同じルールセットであればなるべく短いほうが優れたルールです。詳細度を減らせることや、移植性を高めることにつながります。

セレクタの詳細度を上げる

主にあるブロック内で同一のブロックなどがあるにもかかわらず、特定のブロックだけに属性をあてはめたいときは子要素などをつかって限定的にする必要がある。打消しをしないために使える手法(P34～36)

クラスセレクタを活用する

主に移植性の高さにつながるため、idは使わずにクラスを使ったほうが良い。

インラインスタイルはなるべく使わない

保守性がさがるからですね。確かに例外的に使うといったイメージでした。

プロパティはアルファベット順に、なるべく数を減らす方向で、色は3桁表記で

これまた知らずにテキトーに書いてましたね。またmarginなど複数の要素を統一してかける場合はそのほうがベストです。

色も3桁のほうが推奨される書き方のようです。

スタイルの取消をしない

最初のクラスでいろんなプロパティを設定しておきながら、それを使っているクラスでpadding-bottom:0みたいなコードを書くことがあります。CSSはなるべく追加する方向で書くようにしましょう。

絶対値を多用しない

特にline-heightなど。フォントサイズが変わった時にアンバランスになります。あえて単位をつけるline-height:1.5などと書いておきましょう。

JavaScriptによるCSSの変更は最小限にする

元々あるクラスをつける、はずす以外の操作はしないほうが良いです。※JavaScriptの中で独自にCSSのプロパティを作るなどはやめておきましょう。

参考資料

WEB+DB vol93

Web制作者のためのCSS設計の教科書
 こんなHTMLとCSSのコーディング規約で書きたい

正味4年ぐらいは触っているんですけど、体系的に勉強したことがなかったんで大変助かりました。CSSも奥が深いですね・・・