CSSのガイドラインを作ろう

どうして必要？

数の人でサイトの制作・運用を行う時、あるいはコンテンツの量が膨大なサイトの運営に途中から関わる事になった時など、CSSの取り扱いで悩んだ事はありませんか？

クラス名や定義内容が被ったり、意味不明のクラス名に迷ったり、複数のCSSファイルを読み込ませている場合には、そのクラスがどのCSSファイルを参照しているのかわからなくなってしまい、手間取った経験のあるWeb制作者は少なくないと思います。

ルールが明確に定義されていない状況で、制作・運営を進めた結果、同じ内容を定義した様々な名前のクラスをいつのまにか複数存在させる事になったり、HTMLファイル上にインライン記述するケースが発生したり等、その後のメンテナンスに多くの手間や時間が費やされる事になります。

そういった事態を避けるためにも、CSSの運用ルールを明確にし、追加修正等のメンテナンス内容とともにチームの全員で共有する事が大切です。

Googleをはじめとする様々な企業から、コーディングガイドラインが公開されている事から、ガイドラインを定義するようになったサイトも近頃は多いのではないでしょうか。

参考：Google HTML/CSS Style Guide

どんなルールにする？

ルールの付け方はサイトによって違いがあり、どれが正解でどれが間違いという性質のものではありません。

制作するサイトの特徴に合わせてルールを決めていく事になるのですが、最初は公開されているガイドラインを参考にして大きな決まり事を用意し、細かな部分を制作サイトに合わせて調整していく方法が、ルール決めをしやすいように思います。

ここから先は以前私自身が経験した、サイトのリニューアル時に作成したガイドラインと運用の方法を例としてお話していきます。

ガイドライン作成・運用に意識した事

ガイドラインは、以下のような点を意識して作成しました。

IDセレクタは使用しない事

命名規則を明確にする事

適度に汎用性の高いCSSファイルを用意する

メンテナンスのしやすさを考える

参照のしやすさを考える

ガイドライン作成中は、とりあえず一人で最初から最後まで全部書きあげ、それを元に全員でミーティングを行い、ルールの一つ一つを検証していきます。

このルールで適用が可能か、不可能ならどこを改善すればよいか等を話し合います。話し合った結果を反映させて、確認しての繰り返しを数回行いました。

このミーティングでチームの全員が内容を理解した上で進めていく事が、その後の運用においてのポイントとなってくるように思いました。

やって良かった事、大変だった事

ガイドラインを作成して良かった点は、思っていた以上にその後の制作スピードが上がった事と、新しいメンバーが入った時に迅速にルールの理解を得ることが出来た点です。担当変更の際の引継ぎもとてもスムーズになりました。

大変だった点は、ガイドラインの作成よりも、作成後にチーム全員がそのガイドラインを守って運用していく事でした。

チーム全体で共通の認識を！

今回、ざっくりとガイドラインの作成について紹介させていただきましたが、取り上げたルール等はあくまでも一例です。

ルールの内容一つ一つというよりも、チーム全体で認識を共有し、一貫性を持って実践していく事が大切です。

Googleのガイドラインの他にも参考になるガイドラインは多数ありますので、目的と用途に沿ったものを参考になさってみてください。