CSSを書くときに命名や構造のルールをシンプルにすることで、他のCSS編集者が理解しやすくなります。せざるを得ないといった問題が起こりやすくなります。このような問題を解決するアプローチとして、CSSを設計するという考え方があります。ウェブサイトの規模が大きくなり複雑化していく現代では、CSS設計を意識することの重要性が高まってきています。今回は、CSS設計をしたことがなくても意識してほしいCSS設計の基礎になる考え方と、基本の手法についてご紹介します。CSS設計に共通する考え方ほとんどのCSS設計手法に共通する考え方が、ウェブサイトをパーツの集合体として考え、そのパーツごとに分けてCSSを考えることです。ヘッダー、フッダー、大見出し、小見出し、リスト、表、ボタンなどウェブサイトに配置されているものがパーツです。MEDIAのページの上部を、ロゴ・プッシュ通知ボタン・シェアボタン(RSSも含ませました)・見出し・カテゴリーナビゲーションのパーツとして、それぞれ赤枠で囲みました。この例より大きいまたは小さいパーツの単位で考えることもあります。ヘッダーパーツの中にロゴのパーツがある、というような入れ子にすることもあります。CSS設計にはさまざまな考え方があり、パーツのつくり方も多種多様です。CSS設計をすることでどんな目的を達成しようとするのかが、違うからです。ウェブサイトの運用でスタイルの追加が予想できるときは、柔軟で拡張しやすい設計にしておくのがよいでしょう。逆に、修正がほとんど発生しないだろうというときは、拡張性は必要がなく、壊れにくいようにしておくのがよいかもしれません。私たちがCSS設計をプロジェクトに採用するときにも、そのプロジェクトでどんな管理をしていくのがいいか、よく考える必要があります。今から紹介する3つのCSS設計手法は、多くのCSS設計手法のベースとなっています。この3つのCSS設計の考え方を理解していれば、さまざまなCSS設計手法の理解や、プロジェクトに合ったCSS設計を選択する際の助けになると思います。略で、名前の通りオブジェクト指向を取り入れた設計手法です。構造と見た目、コンテナーと内容を分離し、それぞれ別のクラスで指定をします。そのため、マルチクラスで使うことが多いのが特徴です。button-success">ボタン</button>Bootstrapを使ったことがある人にはパッと見た感じに馴染みがあり、導入しやすいと思うかもしれません。構造と見た目を分離して考えるOOCSSは、デザインの時点でそのあたりが考慮されていないと、OOCSSのルールに沿った実装がむずかしく、OOCSSとミスマッチになることも多いです。マルチクラスの性質上、ルールセットが大量になってしまうことも多いので、スタイルガイドをつくるなどデザイナー、エンジニア間で大量のスタイルをうまく管理していけるようにする工夫も必要になります。BEMBEMは、ウェブサイトのUIをBlockとして考え、Blockに含まれる要素をElementと、BlockやElementの見た目や動きのパターンをModifierというルールで扱います。Toolsのこと、またその設計のことをいいます。CSS設計においてBEMは、多くの場合、BEMの設計をCSSに応用したMindBEMdingのことを指します。使ったクラスの命名規則は、違和感を覚える人も多いでしょう。この命名規則はBlock、Elementを区切ることでHTMLの構造がのわかりやすくなるのが利点です。ルールがシンプルなため、学習コストが低く、他のCSS設計手法に比べて導入しやすいと考えられます。しなければならないという記載はないので、自分の使いやすいものに変更してもいいかもしれません。CSS(直訳で、CSSのためのスケーラブルでモジュラーなアーキテクチャという意味)の略です。公式のドキュメントは電子書籍として日本語版でも販売されています。SMACSSでは、CSSをベース、レイアウト、モジュール、ステート、テーマの5つに分けて管理します。テーマ機能がないときは使わない。テーマがあるときに、テーマごとのスタイルを定義する。theme-をつけるCSSの分け方のルールが決まっているため、SMACSSを知らない人にとって、このルールを理解する学習コストは発生します。この5つの分け方は感覚的にわかりやすいので、CSS設計をあまり知らない人にもオススメしやすいです。Walton氏が2013年6月に公開したものです。さきほど紹介したOOCSS/BEM/SMACSSも含め、2013年前後に公開されたCSS設計手法の多くは、ウェブサイトをパーツの集合体とし、パーツを使いまわせるものとして考えます。それに対して、2015年にはパーツを再利用させないものとして考えるECSSというCSS設計手法が登場しています。ECSSは、パーツを抽象化したり再利用したりしません。それぞれのパーツは1つのページの1つの箇所でしか使いません。同じパーツが複数ある場合にも、使われる分だけ同じCSSを何度か書くことになります。同じCSSを書いてコードの量が増えたとしても、パーツを分けてCSSを閉じ込めることでCSSを永続化(Enduring)させようという考え方をするのがECSSです。ドキュメントは英語ですが、ウェブサイトで読めるようになっているので、ぜひ読んでみてください。まとめここ数年で筆者は、中〜大規模のウェブサイトやウェブアプリケーションのCSSを書くときに、再利用可能なコードを書くのを避けるようになりました。それは、ウェブサイトが大規模になりCSSが複雑化したときに、再利用するCSSの管理が難しくなっていくことを感じたからです。ウェブアプリケーションの機能をベースにした実装では、見た目や装飾の単位でパーツを分けて扱わなくなり、CSSの再利用性があまり重要でないと感じるようになりました。AngularやReact、Vue.jsを用いたSPA制作もどんどん増えていくことが予想されます。CSSの機能があるため、CSS設計を意識しなくても安全にCSSのバッティングを避けられます。なるとBEMなどのCSS設計は意識してなくても問題ありません。みなさんも、今公開されているCSS設計をただ使うだけでなく、プロジェクトの性質や運用方法にマッチしているかを考え、よりよいCSS設計をするということを考えてみるといいでしょう。CSS設計を考え工夫することで、CSSが安全に運用、管理できるものに近づくと思います。平成30年6月19日に内容をメンテナンスしています。MEDIAは株式会社ICSが運営するオウンドメディアです。ICSはインタラクションデザイン専門のプロダクション。最先端のwebテクノロジーを駆使し、オンスクリーンメディアの表現分野で活動しています。問い合わせ採用情報インタラクションコンテンツの制作や新しいことに挑戦しながら、互いにスキルを高め合えるメンバーをICSでは募集しています。詳しくは採用情報をご覧ください。MEDIAは古い記事でもメンテナンスし続けることで、常に役立つ情報発信を目指しています。