Web / Apps

「CSS設計のための教科書」と自分の経験をベースに考えるCSS設計への意識

Posted On 2019-01-13 Shin 0

今日は所属している合唱団の演奏会だったので、この土日の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設計についての考え方について触れています。   第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を使ってどうやって効率的に設計していくかについて学ぶことができます。 シングルクラスとマルチクラスという考え方や、セマンティックなクラス名をつけようといった基本的な考え方について学ぶことができました。   第6章　コンポーネントの運用に必要なツール 主にスタイルガイドやLintツールなど、実際に運用時に品質を担保していく上であると便利なツールについて紹介しています。 実際に会社でCSSの書き方を共有する場合には、必須のツールとなると思いますので、ぜひ使いこなすようにしましょう。 ちなみに、FLARESではまだこのレベルまで達していなくて、最近StylelintというCSSのLintツールを使い始めたところです。これらは今後の課題となっていますが、地域の制作会社にノウハウが共有できるところまで高めていく予定です。   第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設計の教科書   とまぁ堅い話はこれくらいにして、学習系の記事の最後には恒例で書いているのですが…、       演奏会から帰ってきて少し仮眠したので、これからもうひと仕事しようかと思います。ではでは。