調査・研究レポートReport

今日は所属している合唱団の演奏会だったので、この土日の2日間は三重県の津市の市役所にある津リージョンプラザお城ホールに詰めておりました。

津市と四日市市の道中は最近いつも混んでいて遅刻しそうになるので早めに自宅を出たら、リージョンプラザに大分早くついたので、図書館の学習室で稽古前の空いた時間を利用してザクッと「CSS設計の教科書」を読んでしまいました。図表が多く理解しやすさ重視なので、内容自体のボリュームはそこまで多くありませんが基本的なことに絞ってわかりやすく解説されていますので1時間程で気軽に読むことができます。

Web制作者のためのCSS設計の教科書

それでは、簡単にレビューしてみようと思います。

Web制作者のためのCSS設計の教科書のレビュー

この書籍は5年前の書籍なのですが、CSS設計と呼ばれる領域の歴史や用語を押さえるためにはちょうどよい内容となっています。

著者が様々な設計思想を参考に独自に考えだしたFLOCSS（フロックス）に向けてどのようなことを考えてきたかについてはとても興味深い内容になっています。現在ではFLOCSS（フロックス）の考え方も一旦は固まったようで、GitHubに上がっていますので、FLOCSS（フロックス）を学ぶだけならGitHubのドキュメントを読むだけで十分に理解を深めることができるかと思います。

FLOCSS

https://github.com/hiloki/flocss

それ以外では最後の章にある「Web Componentsの可能性」は割と新しい領域かと思いますので楽しみな領域ではあります。5年前でかなり新しい領域ではありましたが、現在もまだまだ知る人ぞ知る機能だと思いますので、今後どうなるのかは楽しみな領域ではありますね。

Web Components

https://www.webcomponents.org/

それでは、各章について簡単に見ていきましょう。

第1章　CSSにおける設計とは

基本的にCSS設計とはチームで開発したり保守に取り組む場合に重要になる考え方であるということや、こんな使い方はダメ！ってかたちでアンチパターンの紹介があります。最初から完璧なものを目指すのではなく、いかに「修正しやすいか」が重要かを語っています。

第2章　CSSの基本を振り返る

CSSの基本構文としてのセレクタと詳細についてや、リファクタリングの基本として「より短いセレクタを指定する」ことや「クラスセレクタを適宜用いる」など、基本的なCSS設計についての考え方について触れています。

私が三重県の制作事情にどこまで詳しいかは別として、人によってはHTMLを各段階でクラスを極力用いないようにして「できるだけ短いHTMLクラスを設計し、要素セレクタを積み重ねて詳細なセレクタを指定する」という方が実際に何名がいらっしゃいました。この考え方はFLOCSSなどとは全く別方向の考え方になりますので、個人的にはあまりオススメをしておりません。やはりHTMLを各段階で適切なクラスを各要素に付与し、詳細度に低いクラス指定によるCSS設計が世界的な標準化と思います。最終的には制作のパフォーマンスを高めることができればそれはそれで有意義かもしれませんが、我流に奈良にように注意深く学習を進めていただければと思います。

第3章　コンポーネント設計のアイデア

ここで初めてCSS設計の本丸となるコンポーネント設計についての考え方が登場します。先人の知恵としての具体的な手法についていくつか学ぶことができますので、CSS設計について学んだことがない場合には非常に参考になる領域になるかと思います。

具体的に少しだけ覗いてみましょう。

OOCSS（object指向CSS）

object指向CSSの基本原則としては「構造と見た目の分離」や「コンテナ―とコンテンツを分離」という二つの考え方について学ぶことができます。

SMACSS

クラス名の命名規則についても一つポイントがあるのに加えて、クラスを以下の5分類に分離して考える方法が基本となります。

• Base
• Layout
• Module
• State
• Theme

BEM

BEMは各要素をブロック、エレメント、モディファイアの3つに分け、シングルクラスによる命名規則からなっています。

FLARESではこちらを基本的に長らく利用していました。

MCSS

マルチレイヤ―CSSの略で、クラスを以下の4階層に分けて設計します。

• Foundation
• Base
• Project
• Cosmetic

FLOCSS

上記全てを総合した著者の手法がFLOCSSです。

現在FLARESではこちらの手法を基本的には利用しています。

FLOCSS

https://github.com/hiloki/flocss

第4章　コンポーネント設計の実践

コンポーネントをどのようにして設計していくかについて基本的な考え方を学ぶことができます。

基本的な考えとして以下の3つが挙げられていました。

• 最適化を焦らない
• Rule of three
• SOLID CSS

またよくある設計の実装パターンとして、著者のプラクティスを参考例として示してくれています。

例えば、見出し用のスタイル、ボタン用のスタイルなど、各種の実装例が示されていますのでこちらも具体的に非常に参考になる内容でした。

第5章　CSSプリプロセッサを用いた設計と管理

こちらの章では、SASSを使ってどうやって効率的に設計していくかについて学ぶことができます。

シングルクラスとマルチクラスという考え方や、セマンティックなクラス名をつけようといった基本的な考え方について学ぶことができました。

セマンティックなクラス名を付与するという考え方については、人がソースコードを保守管理を楽にする上では必要なことだと考えています。初めて見るソースで英語で適切なクラス名がセマンティックに付与されていることによって、そのソースコードがあらわす箇所が何かを直観的に把握することができるからです。検索エンジンにとっても良い評価を得るための一つの指針になってくれたりすれば、世の中的にもっと良いソースコードが出回ると思うのでGoogleさんがそのように使用変更していただけると非常にうれしいなぁとかいろいろと考えていますが、どうでしょうね。

第6章　コンポーネントの運用に必要なツール

主にスタイルガイドやLintツールなど、実際に運用時に品質を担保していく上であると便利なツールについて紹介しています。

実際に会社でCSSの書き方を共有する場合には、必須のツールとなると思いますので、ぜひ使いこなすようにしましょう。

ちなみに、FLARESではまだこのレベルまで達していなくて、最近StylelintというCSSのLintツールを使い始めたところです。これらは今後の課題となっていますが、地域の制作会社にノウハウが共有できるところまで高めていく予定です。StyleLintを利用することによってCSSの記述ルールを縛ることができるので、だれが書いても一定の品質を保つことが可能になります。慣れるまではルールを覚えるのが大変ですが、一度体に覚えこませてしまえばそれ以降は世界標準のきれいなCSSを書くことができるため非常にオススメなツールでもあります。

第7章　Web Components の可能性

そのままですが、WebComponentsの現状（2014年現在）と今後について書かれています。

まとめ

三重県四日市市のJRの駅前にある四日市市の広告デザインを行っている会社に約2年間努めて、その後約2年間フリーランスでウェブサイトの制作を続けてきたわけですが、CSS設計という考え方はまだまだ一般的ではないようなので、もっと広めていきたいと考えています。

フリーランスとして様々な会社と関わると技術的に明るい会社とそうでない会社には顕著な違いがあり、極端な表現をすれば「サイトの見た目がきれいであればソースコードの綺麗さまでは感知しない」といった考え方の会社もあるように思います。それと同時に、世の中で一般的な設計思想とは全く別物の独自の設計思想で開発制作を行っている会社も多くある印象です。

独自の設計思想であっても洗練されていて凄い！と感じるものもあればそうでないものもありますが、入り口としては、やはり世の中でより一般的で標準化されたCSS設計の考え方から入るのが保守をしていく方にとっても広くわかりやすいものになるかと思いますし、最低限の綺麗さ（整頓され秩序立っていること）を担保したソースコードを書くことの第一歩だと個人的には考えています。

FLARESのCSS設計

FLARESにおけるCSS設計の標準的な手法は、はじめはBEMから始まり、現在はFLOCSSを基本的な考え方に添えて日々の制作を行っております。

CSSの実装にはStylelintを利用することで、誰が見ても見やすく保守しやすいソースコードの品質を担保するための努力を行っていますが、まだまだこれからもブラッシュアップが必要なように思います。

Stylelint

https://github.com/stylelint/stylelint

外部の方に依頼するにあたっては、スタイルガイドの作成が必要なので、早急に作成が求められている状況にはなっていますね。品質を担保するということはそう簡単なことではありません。個人の技術やセンスに依存する状態から早く抜け出せるような技術基盤を持つということが必要に思われます。

制作者としてのCSS設計への意識

経営者や営業、またはマーケティングやお客様の目線に立つと「技術的なことはわからないから何でもいいんだ」とおっしゃる言葉をよく聞きますが、この言葉を鵜呑みにして軽く受け止めてはいけないと考えております。私たちエンジニアやデザイナーとして守らなければいけない部分だと個人的には考えています。

この点については絶対に妥協せず「より高度な考え方に向けて着実にステップアップしていくことで、日々の制作業務の効率化が進んでいく必要がある」と考えていますので、こだわりを持つべき技術者がこだわりを持ち、技術面で会社を率先して引っ張っていくということを行いつつ、その技術力へのこだわりが周囲から尊敬されている状態を目指さなければならないんじゃないかなぁってフリーランスになってからエンジニアとしての立場について考えるとそう感じています。この点を放棄してしまうと技術者としてこだわるべきものがなくなってしまいますのでプライドを保つためにも大切にしないといけない部分ですよね。

ウェブのコーディングはウェブデザイン基礎として一番最初に学ぶことにはなるのですが、「たかがWebのコーディング」と舐めて捉えず、非常に奥深いウェブのコーディングの世界を知り、レベルアップしていくことができれば日々のコーディングを更に楽しく効率的なものにしていくことができると信じています。

私もまだまだこれから頑張るべきことがなくなることはありません。もっともっと深めていく必要がありますね。そんな世界の入り口を感じることができる良い本だと思いますので、CSS設計についてまだあまり知識がないという方はぜひ手に取っていただければと思います。

Web制作者のためのCSS設計の教科書