「Web制作者のためのCSS設計の教科書」を読んでみました
「Web制作者のためのCSS設計の教科書」を読んでみましたので、書籍の概要と、感想を紹介します。
Web制作の仕事について
デザイナーがデザインした画面を、マークアップエンジニアがコーディングをしてサイトを公開する。
Web制作という観点から見るとこれで完了かもしれませんが、Webサイトは「いったん完成すればそれで終わり」ではありません。サイト公開後にターゲットユーザーをそのサイトに集客し、サイトオーナーのビジネスを儲けさせるために、運用をしなくてはいけません。運用フェーズに入ると、様々な改修や、新規キャンペーンサイトなどが追加になるかと思います。もちろんサイト公開前にも、「ちょっとココの色変えて」など言われることもあるでしょう。CSSの設計が悪いと、サイト改修を重ねるうちに思わぬところで見た目が崩れて、その修正に余計に工数がかかることになります。皆さん一度はこのような経験をされているのではないでしょうか。
本書は、これらの問題を解決するための思考を学ぶための書籍と言えるでしょう。10年間CSSコーディングに取り組んできた著者が、「予測しやすい」「保守しやすい」「再利用しやすい」「拡張しやすい」CSSを分かりやすく説明しています。「CSS設計の考え方」についての書籍ですので、「CSSを使ってグラフィックが描けます」「こんな表現ができます」といったテクニックの紹介はありません。
書籍の構成（目次）
第1章 CSSにおける設計とは
よりよいCSSの設計の指標である「予測しやすい」「再利用しやすい」「保守しやすい」「拡張しやすい」ことについて、Googleのエンジニアであるフィリップ・ウォルトン氏のブログ記事から引用し解説されています。
第2章 CSSの基本を振り返る
CSSの基本であるセレクタと詳細度の解説です。CSSが破綻する主な原因として、セレクタが複雑になってしまうことがあげられます。コンポーネント設計を考える上でも重要なポイントとなるため、正しく理解している必要があります。
第3章 コンポーネント設計のアイデア
著名な開発者達が考えたCSS設計のアイデアの説明です。下記の設計アイデアが紹介されています。
- ［OOCSS］オブジェクト思考プログラミングの概念を取り入れたCSS。
- ［SMACSS］OOCSSのコンセプトをベースに作られたフロントエンドに関するガイドライン。
- ［BEM］フロントエンド開発手法で使われている命名規則。
- ［MCSS］ロシアのSNS開発チームが作ったCSSの構成システム。Multilayer CSSの略。
- ［FLOCSS］上記に挙げた設計アイデアをヒントに、筆者が作成を続けているガイドライン。
第4章 コンポーネント設計の実践
第3章で取り上げたCSS設計の考え方を元にした、実践的なコーディング手法についての解説です。
第5章 CSSプリプロセッサを用いた設計と管理
CSSにプログラミング言語のような機能を与える、スタイルを簡潔に書く、といったことを可能にするCSSプリプロセッサのSassを使った管理方法や、注意点が紹介されています。
第6章 コンポーネントの運用に必要なツール
コンポーネントを運用する中で、それを手助けするツールの紹介です。Grunt.js（タスクランナー）、CSSO（CSS最適化ツール）、CSSComb（CSSプロパティ並び替え、記述フォーマットの整理）、CSS Lint（CSSチェックツール）など。
第7章 Web Componentsの可能性
Web Components は、コードのカプセル化やスコープなどが実現できる今後のWebアプリケーション開発に欠かせない技術です（現在W3Cで仕様策定が進行中）。Web Componentsについての簡単な使い方や、Googleが開発しているUIコンポーネントツールのPolymerの紹介。
書籍を読んでみて
HTML5の普及に伴い、HTML5でWebアプリケーションを構築することが、今後ますます増えると考えています。効率的にWebアプリケーションを構築するためにも、CSS設計をきちんとすることが求められる時代です。そのためには、コンポーネント設計が必須となります。本書ではCSSコンポーネントの設計についても、多く語られています。
さらに、昨今注目を集める、Web Componentsなどの紹介も折り込まれています。Web Componentsは、これまでのWeb制作手法を大きく変える制作手法です。現在W3Cで仕様策定が進んでおり、今後のWeb標準となる予定で、Web制作をする者として見逃せない技術だと私も注目しています。
「予測しやすい」「保守しやすい」「再利用しやすい」「拡張しやすい」コンポーネントやCSSプリプロセッサを意識した設計・管理のために、皆さんにもぜひ一度読んでほしいと思う一冊でした。
| この記事のもとになった書籍 | |
|---|---|
谷 拓樹 著 |
Web制作者のためのCSS設計の教科書コンポーネントやCSSプリプロセッサを意識した設計・管理の実践など、「ちゃんとCSSを書く」ためのプロの考え方を徹底解説！「セレクタが複雑になってしまう……」「オブジェクト指向CSSってなに？」「考え方はわかったけど、どう組めばいいの？」そんな人のバイブルになるのが、この本です。破綻しやすいCSS、セレクタのリファクタリングなどの基本から、OOCSS、SMACSS、BEMなどのコンポーネント設計のアイデア、実際によくあるパターンのコードの組み方までを丁寧に解説。また、注目されはじめた「Web Components」についても説明します。
|
