読者です 読者をやめる 読者になる 読者になる

青空コメントアウト

WEBのこと、デザインのこと、ご飯のこと、趣味のこと。青空の向こうの誰かに届きますように。

CSSのセレクタ設計の基本 -デザインしやすいマークアップの方法-

このエントリーをはてなブックマークに追加

f:id:cocoro27:20160505002132j:plain まいどです。
WEBエンジニアのあろえりーな(@aloerina_)です。

今回はCSSに関するお話。
保守しやすい設計ってどの言語にもだいたいありますよね。でもCSSの設計についてはあんまりドキュメントを見かけないなーと前々から思っていました。 そのせいとは言わないけれど、苦労しているWEBデザイナーさんは多いのではないでしょうか。あとでデザイン修正しようと思ったらHTMLも変えないとダメだった!みたいな事故に遭遇する人を救いたい。そんな被害に遭うのはあろえだけで十分だ!

そんなわけで、あろえ流のCSSのセレクタ設計についてまとめてみます。




セレクタはclass属性が鉄則

セレクタには強弱関係を決める詳細度というものがあります。

developer.mozilla.org


ざっくりいうと、id属性はclass属性より強くて…みたいな関係(計算方法)です。CSSが思うように当たらない場合これを読み解くことになりますが、いろんな詳細度のセレクタが乱用されているとかなりの重労働になるのでCSSで使うセレクタはclass属性のみとしています。

その分HTML書くとき大変じゃん!と思うかもしれませんが、むしろ各エレメントにきちんと命名することでHTML自体も読みやすくなるので、この鉄則は守るべきです。

ちなみによく言われることですが、同様の理由で !important の利用も原則禁止です。




HTMLタグは正確に割り当てる

<h1> 〜 <h6> <div> <span> <p> くらいは当然ですが、<article> <nav> などHTML5で登場したsection系も上手に使えると読みやすいマークアップとなります。

CSSセレクタにclass属性しか使わないなら最悪全部divでもいいだろうなんて乱暴な考え方はアカンです。それは極論だとしても、後で直そうと思ってとりあえずdiv使っておく…なんてのもおすすめしません。その「後で」が来ないことが多いからです(その時間があったらBigFixしたり機能追加したりしたくなっちゃうことが多い気がする)。

なぜタグを正しく使うべきかと言うと、CSSを書くにあたってHTMLを読み解く作業は必須だからです。読み解くのに時間のかかるコードがどれくらいイケてないかは……。きっと誰しも一度くらいはイケてないコードに苦しめられていると思うので、これ以上は言いませぬ(被害者面した文章ですが、当然あろえもかつてイケてないコード量産しました)。




マルチクラス

考え方のきほん

マルチクラスとは、ひとつのエレメントに複数のclass属性を付与して、それらを組み合わせてStyleを決めることです(たぶん)。つまり、Styleを分割して部品化するのです。オブジェクト指向的なのかも。ちなみにbootstrapもこの考え方です。

画面に複数ある普通のボタン → class="btn"
画面で唯一のメインボタン → class="btn main"


共通パーツには基盤となるclassを

例えばボタンやアンカーリンクなど、ひとつのページに複数置かれる汎用部品にはシンプルなclass属性をつけましょう。


特別な要素は基盤class + オプションclass

汎用的なボタンには class="button" とつけましたが、submitボタンなので特別に青くしたい場合はどうしましょう。また削除ボタンなので赤くしたい場合もありますよね。こういう場合は、オプションclass(あろえ命名)を付け足します。オプションclassとは、基盤classにハイフンつなぎでオプション名をつけたものです。先程の例の場合…

submitボタン用のオプションclass → button-submit
削除ボタン用のオプションclass → button-delete

といった感じです。これをひとつのボタンに『基盤class』と『オプションclass』を適用してstyleを決める、というのがマルチクラスの考え方です。以下サンプル。


親子関係のエレメントの命名

親子関係のある要素は、親の名前に子供の名前をハイフン繋ぎで付け足していきましょう。lessやSCSS書くときに便利ですし、役割が明確になりやすいです。逆に言うと、親のほうが名前が長くなるのは基本NGです。

(良い例)エリアとそのインナー
親:area
子:area-inner

(悪い例)エリアとラッパー
親:area-wrapper
子:area

以下サンプル(今回はlessサンプルも用意しました)。




デザインの単位を意識する

HTMLマークアップをするときに、どの単位でデザインするのかを意識することは大切です。例えばtable要素の場合、

  • 「ヘッダー」の行高を変えたい
  • 「偶数行」の背景色を変えたい
  • 「カラムの項目ごと」に横幅を変えたい
  • 「選択されているセル」の背景色を変えたい

といったようなことが想定されますよね。もちろん全部を想定してclass属性割り振っとくのは大変ですが、ある程度意識してclassを割り振っておくと、HTMLの可読性もあがって一石二鳥です。




おわり

いかがでしょうか。これらのルールを守ったらCSS書くときの負荷が下がるような気がしませんか?
(しねえよ、もっとこうしろよ。ってのがあったら是非アドバイスください…いかんせん我流ですので…)

CSS書くのって慣れるまでは本当に大変で、慣れてからもすごく大変だと思うんです。最近は我流の方法を考えたり、lessやSCSSを試してみたりして、随分実装速度が上がりましたが…やっぱり大変なことには変わりません。ですので、デザイナやフロントエンジニアが力を合わせてより良い方法を編み出していけたらなあなんてことを考えたり考えなかったり。

ひとまず、同業のみなさんのお力に少しでもなれればと思います。
以上。

TOP