CSSを書く時の悩みが無くなる！？CSS設計完全ガイド：レビュー

TOMO — Thu, 25 Jun 2020 01:54:24 +0000

CSSの書き方で悩んでしまうことが多い
思い通りのデザインができず困っている
CSSの書き方をキチンと学びたい

という方に最適な書籍「CSS設計完全ガイド」をご紹介します。

CSS設計完全ガイド　～詳細解説＋実践的モジュール集

created by Rinker

以前にコリスの記事で見かけて気になっていた本。やっと読むことができたのですが、思った以上に良書でした。

読んだらCSSを書く時の迷いが格段に減ります！

CSSってクラスやIDをうまく使って書いているつもりでも、コードが1,000行越えたりしてくると「あれ？このクラスって何に使うんだっけ？」ってなったり、デザイン修正した時に予期せぬ部分に影響が出たりしますよね。

そんな問題を改善したいって人にはおすすめです。

当記事では、CSS設計完全ガイドで学べることやよかった点を自分なりの意見で書いていきます。この本に興味がある方の参考になれば幸いです。

CSS設計完全ガイドとは？

CSSを「使いやすく・保守しやすく」するには、どうしたらよいか？を設計手法からまとめている本です。

著者の「半田惇志さん」はPRECSS（プレックス）というCSS設計手法を考案したすごい人。いくつかCSS設計手法を紹介してくれていますが、特に開発現場で利用頻度の高いBEM（ベム）とPRECSSに関する解説がメインです。

重厚感のあるB5変形判となっており、ページ数は驚異の511ページ！
読むの大変そうですが、半分はCSSの実例サンプル。アクティブラーニングするといい感じに読み終わりますよ。（ただ読むだけだと頭に入りません）

なお、CSSの基礎的な説明はほぼ皆無なので、初心者にはおすすめしません。中～上級者向けの本です。

GOOD POINT（よかった点）

戦略的なCSSを書くための手法を身につけることができます。

戦略的ってどういうこと？

噛みくだいていうと「部品化」を意識して関係のない要素に影響を出さないようにするってことです。

1.CSS設計手法を学べる！

設計手法とは、あるルールに沿ってCSSを書きましょうというガイドみたいなもの。

CSS設計完全ガイドで大きく取り上げるのは、利用頻度の高いBEM（ベム）とPRECSS（プレックス）のふたつ。ここを基礎からしっかり学ぶことができました。

なお、BEMとPRECSSの使い方だけ知りたい人は、以下の記事が参考になります。

一番詳しいCSS設計規則BEMのマニュアル（Qiita）
PRECSS（公式サイト）

上記の記事を読むだけでも設計手法を学ぶことはできますが、実例とセットで学ぶことができる本書の方が理解しやすいです。

2.解説がていねい親切

「なぜ、この書き方なんだろう？」という疑問に対して的確な回答をしてくれます。

例えば、font-sizeやpaddingのサイズ指定に「px」「em」「rem」を使うかと思いますが、皆さん意図して使い分けていますでしょうか。

例えば、見出しのfont-sizeに「px」を指定した場合、ブラウザの設定で文字サイズを大きくされてしまうと、はみ出ることがあります。そういった問題を避けるために本書では「rem」を使うことを推奨しています。

上記のようにCSSの使い分けを配慮して「意味のあるCSS設計」をされているのが魅力ですね。

初心者向けの本だと、わかりやすさを重視しているので、こういったロジカルな部分は学ぶことができません。とても勉強になりました。

3.デザインサンプルが豊富！すぐに使いたくなる

CSS設計完全ガイドの後半は、Webサイトでよく利用されるモジュール（部品）に対してBEMとPRECSSで実例を載せてくれています。

モジュール部分はサンプルコードがしっかりと掲載されていますので、実際にパソコンで書きながら読み進めることをおすすめします。

理由は２つあって、実際に書いてみると理解が深まるのと、書き終わったモジュールがちょっと直せば仕事で使える「モジュールライブラリ」になるからですね。

CSSって毎回最初から書くの面倒だったりしますよね。
本書で扱う部品はそのままコピーしてもデザインが崩れない考慮がされているものが多く、覚えておけばサッと取り出せるので大助かりです。

なお、一部のコードに誤植があったりしますが、自分で見つけて直すのもスキルアップに繋がるので良いです（笑）

読み終えての感想

非常に分厚い本だったので読み切れるか心配だったのですが、モジュールを書きながら読んでいたおかげで案外さらっと読み終えることができました。（それでも３日かかりました）

CSSって案件ごとに微妙に内容が変わってくるので、共通化するのは難しいなと日々もんもんとしていましたが、本書の設計思想を取り入れることで、ルールを統一して書けそうな気がしています。

私のようにCSSを書く時につい悩んでしまう人、コードが煩雑になりがちな人、保守性の高いCSSを書きたいという人には最適な一冊だと思います。