CSSのガイドラインを作ろう
WEBSASを支えるデザイン担当者がお届けする連載コラム。
第十一弾は、「CSSのガイドラインを作ろう」。
2016年06月01日 デザイナー
どうして必要？
数の人でサイトの制作・運用を行う時、あるいはコンテンツの量が膨大なサイトの運営に途中から関わる事になった時など、CSSの取り扱いで悩んだ事はありませんか？
クラス名や定義内容が被ったり、意味不明のクラス名に迷ったり、複数のCSSファイルを読み込ませている場合には、そのクラスがどのCSSファイルを参照しているのかわからなくなってしまい、手間取った経験のあるWeb制作者は少なくないと思います。
ルールが明確に定義されていない状況で、制作・運営を進めた結果、同じ内容を定義した様々な名前のクラスをいつのまにか複数存在させる事になったり、HTMLファイル上にインライン記述するケースが発生したり等、その後のメンテナンスに多くの手間や時間が費やされる事になります。
そういった事態を避けるためにも、CSSの運用ルールを明確にし、追加修正等のメンテナンス内容とともにチームの全員で共有する事が大切です。
Googleをはじめとする様々な企業から、コーディングガイドラインが公開されている事から、ガイドラインを定義するようになったサイトも近頃は多いのではないでしょうか。
どんなルールにする？
ルールの付け方はサイトによって違いがあり、どれが正解でどれが間違いという性質のものではありません。
制作するサイトの特徴に合わせてルールを決めていく事になるのですが、最初は公開されているガイドラインを参考にして大きな決まり事を用意し、細かな部分を制作サイトに合わせて調整していく方法が、ルール決めをしやすいように思います。
ここから先は以前私自身が経験した、サイトのリニューアル時に作成したガイドラインと運用の方法を例としてお話していきます。
ガイドライン作成・運用に意識した事
ガイドラインは、以下のような点を意識して作成しました。
IDセレクタは使用しない事
- IDセレクタは1ページに1つしか利用できないため、汎用性がない
- JavaScriptで要素を指定する際に用いるため、CSSでの利用はなるべく避ける
命名規則を明確にする事
プレフィックスの付け方や、単語の繋ぎ方、数値の扱いなどを、コーディングに入った際に迷いのないよう決めておく
- 例：分かりやすい省略は可能だが、一見して意味が分からないような省略の仕方は避ける 等
適度に汎用性の高いCSSファイルを用意する
構造を記したCSSファイルとは別に、汎用性のあるCSSファイルを一つ作って全ページに適用する
Bootstrapなども汎用クラスとして利用できる
メンテナンスのしやすさを考える
CSSファイルのインデントやコメントの書式も決めておく
ネストはなるべくしない。どうしても必要な場合は「子まで」「孫まで」と、階層数を限定しておく 等
参照のしやすさを考える
コメントの活用
チーム全員が参照、編集する事のできる共有ディレクトリに、スタイル参照用ファイルを作る 等
ガイドライン作成中は、とりあえず一人で最初から最後まで全部書きあげ、それを元に全員でミーティングを行い、ルールの一つ一つを検証していきます。
このルールで適用が可能か、不可能ならどこを改善すればよいか等を話し合います。話し合った結果を反映させて、確認しての繰り返しを数回行いました。
このミーティングでチームの全員が内容を理解した上で進めていく事が、その後の運用においてのポイントとなってくるように思いました。
やって良かった事、大変だった事
ガイドラインを作成して良かった点は、思っていた以上にその後の制作スピードが上がった事と、新しいメンバーが入った時に迅速にルールの理解を得ることが出来た点です。担当変更の際の引継ぎもとてもスムーズになりました。
大変だった点は、ガイドラインの作成よりも、作成後にチーム全員がそのガイドラインを守って運用していく事でした。
チーム全体で共通の認識を！
今回、ざっくりとガイドラインの作成について紹介させていただきましたが、取り上げたルール等はあくまでも一例です。
ルールの内容一つ一つというよりも、チーム全体で認識を共有し、一貫性を持って実践していく事が大切です。
Googleのガイドラインの他にも参考になるガイドラインは多数ありますので、目的と用途に沿ったものを参考になさってみてください。