『はじめてのCSS設計_フロントエンドエンジニアが教えるメンテナブルなCSS設計手法』

田辺丈士/大江遼/藤岡龍太/安光太郎/株式会社アイ・エム・ジェイ 著

書籍の購入はこちらから>

 

メンテナブルなCSSを構築・維持して運用していくためには何が必要なのか?エンジニアだけでなく、企業のWEB担当者・ディレクターも知っておくべきCSS設計のポイントについて、本書の執筆メンバーであり、現場の第一線で働くエンジニアである藤岡さんに話を聞きました。

CSS設計が“超”重要な理由

_“CSS設計”はなぜ重要なのですか?

CSS自体は、言語としての難易度は低いのでエンジニア以外でも書ける人が多いのですが、そのぶん書く人によって使用するエディタやプリプロセッサなどのツール、classやidの命名などが異なるため、トラブルが起きやすくなります。Webサイトの構築から運用・改善というフェーズに移っていく中でトラブルを未然に防ぐためには、最初にきちんとルールを定め、要素を正しく整理・分類し、そのルールの下で制作することが重要です。

 

_CSS設計ができていないと、具体的にどのようなトラブルが起きるのでしょうか?

よくあるのは「ある箇所を修正しようとCSSを書き直してもなぜか反映されない」 、「CSSを一箇所変更したら、予期せぬ箇所が崩れてしまった…」といったトラブルですね。
そのような、いわゆる“破綻する”CSSの原因は、初めにちゃんとルールが定められていない、または設計したルールが守られていないことがほとんどです。

 

_最初に“ルール”を作ることがCSS設計の大きなポイントのようですね。

はい。破綻しないCSSを設計するポイントは、第一に「最初にルールを作り、ルールに基づいて要素を整理・分類すること」です。そして、その上でルールを「ドキュメント化する」こともポイントになります。ルールを共有できるようにしておかないと、せっかく設計したとしてもちゃんと機能せず、破綻に繋がってしまいます。

自分の経験で実際にあったことなのですが、やっていた業務が急に増えたため途中から他のメンバーにヘルプに入ってもらった時、CSSを含めたサイト全体の設計ルールが自分の頭の中だけにしかなくドキュメント化していなかったせいでスムーズな共有ができず、余分な時間が掛かってしまったことがありました。
頭の中に設計ルールはあってもそれを都度書いて残していかないと、相手に伝えるのも大変ですし、引き継ぐほうも他の誰かが書いたCSSを読み解きながら修正していくことはとても時間がかかる上に、トラブルが発生する原因となります。なかには特殊な箇所もあるので、それを忘れないためにも、ドキュメント化しておくことが大切です。

 

_なるほど。ドキュメント化するのにも時間はかかるけど、こまめにドキュメント化する癖をつけておくことで結果的に効率のよい引き継ぎ、運用ができるのですね。

あとは「有名な設計手法を使う」ということも効果的ですね。チームで共有、引き継ぐことを考えると皆が理解しやすい周知の手法を使ったほうが理解が早く、属人的にならずに一定のクオリティを保つことにも繋がります。

企業の担当者やディレクターにも知ってほしい、CSS設計の重要性

_大規模サイトであるほど大勢の人間が関わることになるため、最初にCSSを設計し、ルールを共有することがより重要となってきますよね。大規模サイトだからこそ気をつけるポイントはありますか?

複数のエンジニアや制作会社が携わるような大規模プロジェクトの場合、同時並行で制作が進むことも多く、自分の担当するパート以外とのコードの整合性を合わせることが難しくなり、トラブルが発生しやすくなる傾向があります。

 

_確かに、複数の制作会社でルールを共有しながら同時に開発を進めることは難しそうですね。

そこで企業のWeb担当者やディレクター、プロデューサーといった人達がCSS設計の重要性を意識できているかどうかが重要だと思います。
大規模サイトでCSSのトラブルを回避するには、実際のサイト制作に入る前にサイト全体のCSS設計のルールを定めてドキュメント化し、関係者へ共有する必要があります。また、運用ではルールに従い制作し、運用の中で生じた特殊な箇所をドキュメントに追加して共有・管理していく必要があります。
このようにトラブルの起きないメンテナブルなCSSを実現するには、エンジニア以外の協力が不可欠だと考えています。そのために私たちエンジニアも、エンジニア以外の人たちにCSS設計の重要性を知ってもらう努力が必要だという課題がありますね。

まずは手を動かして勉強しよう!

_では、実際にどうやってCSS設計を身につけていけばいいのでしょうか?
ネットでCSS設計の方法を検索してみると、じつにさまざまな手法やTIPSがヒットします。でも、初心者はここで「一体どの手法を使えばいいんだ??」と、一気に混乱してしまいます…。

そうですよね。人によってやり方は様々ですし、いくつかの手法を組み合わせていたりすることもあるので、どこからどうやって学んでいけばよいか迷うと思います。そんな時は、まずひとつの手法を実際に試してみると理解が早いと思います。基盤ができたら、そこからプロジェクトやサイトの特性に応じてカスタマイズをしてみてください。

この書籍では、1章から4章の間でCSS設計の「基礎知識→手法紹介→実践」というように読者が段階を踏んで学べるようサポートしています。4章の実践パートでは、最近リニューアルした弊社サイトのデザインを基にして、この書籍用に設計したコードを解説しています。ぜひ実際に自分の手でコーディングしてみてください。
また付録では、比較的つまずく人が多い「Flexbox」の各プロパティについて分かりやすく丁寧に解説しています。ぜひ活用していただければと思います。

まとめ

_CSS設計をこれから学んでいく人に対して最後に一言お願いします。

CSS設計の手法はたくさんあり、新しい技術の進歩も非常に早いです。この書籍で紹介、使用しているSassやGulpといったツールもこの先違う物に置き換わっていくかもしれません。しかし、CSSを設計する上での根本的な考え方は変わりませんので、この先違う技術やツールに置き換わったとしても応用していくことができると思います。

ぜひ、この本を参考に、CSS設計の基本を習得してください。