こんにちは。
物欲が高まりすぎると食費を削って趣味に費やすsatoです。
今回は読んだ本の感想をチョチョっと書こうと思います。
読んだ本はこちら↓
インプレス
売り上げランキング: 798
「Web製作者のためのCSS設計の教科書」／谷 拓樹 著
読む前は正直、あまりCSS設計に関しては考えたことがありませんでした。
読みやすくて修正しやすければ良い、その程度の考えだったのですが、読んでみるとなかなか奥が深いもので…。
非常に良い本だと思ったので、楽◯市場で5％オフになるから仕方なくくらいしかレビューを書いた経験のない私ですが今回簡単にご紹介させて頂きます！
CSSの基本から設計、運用まで
第1章、第2章は設計の重要性や基本について書かれています。
特に第1章 1-2の「破綻しやすいCSS」では、CSSを書いたことのある人なら必ず経験する苦い思い出が…。
何も考えずに書いてしまうと起こるHTMLの構造への依存、リニューアルされる度に何度も何度も修復されてきたCSSだと必ず当たるスタイルの取り消しなど、初心者なら必ずやってしまうCSSの問題。
それをどう改善すればいいのか？とてもわかりやすく解説されています。
CSSの基本
各セレクタの優先順位や詳細度についてなど、基本だけどあまり知らない人も多いと思います。
そんな絶対に知っておくべき基本の丁寧な解説から、より安全でシンプルなセレクタにするための解説が非常にわかりやすかったです。
ただシンプルなだけではいけない、「CSS設計」をする意味がスッと入ってきましたね…。
そしてこれまで、どんなに破綻するCSSを書いてきたのかと落ち込みました……。基本なのに…。
コンポーネント設計
第3章では、オブジェクト指向CSS(OOCSS)をベースにしたコンポーネント設計のアイデアが沢山紹介されています。
特にCSSを書く上で必ず悩む命名規則について、目からウロコといいますか…そういうのもアリなのかー！という感じ。
今まで何故わかりにくいとわかっていながら一つのことにこだわっていたのか！！
OOCSSについてもあまりよく知らなかったので、とても良かったですね。
基本構造と見た目(バリエーション)を分けるというのは非常にわかりやすくて良いと思いました。
また、BEMの命名規則は最初は複雑で名付けが難しそうだと思いましたが、後々の管理が本当に楽になりそうですね。
アンダースコアでわけるというのもシンプルですし、慣れてしまえば難しいことはなさそうです。
その他にも沢山のアイデアが書かれています。
最後には筆者の谷 拓樹氏が作成されたガイドライン「FLOCSS」の解説も。
コンポーネント設計の実践
実践の項目では、先ほどのアイデアを踏まえた上で、最初は誰もが悩むCSSスプライトやナビゲーションの作り方、リストの作り方、グリッドレイアウトの設計などがとてもわかりやすく解説されています。
なかなか気づかなかった方法があり、色々作ってみたくなりました。
たかがCSS、されどCSS…。
できないからといってすぐJSに頼るのはオオマチガイですね〜〜。
CSSプリプロセッサを用いた設計と管理
Sassを使った管理の方法が書かれています。
私自身、Sassを使用しており、もうSassなしじゃCSS書きたくないというくらい便利なものだと思っているのですが、
いまさら知った活用法から注意点まで短めながらも知ることは多かったです。
やはり基本の設計や命名規則について色々学んでからだとSassも違うものに見えますね…。
コンポーネントの運用に必要なツール
スタイルガイドのテンプレートやジェネレーターの紹介、ツールの紹介、
そして実際に作る方法などわかりやすく解説されています。
ガイドラインを作るとなるととても面倒くさそうですが、世の中には便利なツールが沢山あるんですねぇ…。
Web Componentsの可能性
これまで設計の仕方を学び、いざコンポーネントを作るというときにどうやったらいいのか？ということがまとめられています。
あまり難しく考えず本の通りに作っていけばできてしまいそう。
特にTemplates要素とShadow DOMによるカプセル化の流れが非常にわかりやすく解説されていて良かったです。
できればいいのにな、が実現されているな〜という感想…。
まとめ
結局ワッショイ状態になってしまいましたが本当に良い本でした。
本自体も、前頁カラーで図も沢山あるので読みやすいです。
ひとつだけ気になる点をあげるとしたら、技術書なので当たり前なのですが横文字の専門用語がかなり多いため、本当に今から始める方や慣れていない方にはそれ自体が何なのかを調べながらでないとわかりにくいかもしれません…。(コンポーネント、リファクタリング、マークアップなど)
そういう方は恐らくこの記事も「なんのこっちゃ」という感じだと思います。
でも今からCSSを勉強するという方も最初から知っておいて損はない内容ですので、最初は意味がわからなくてもなんとなく読み、慣れるにつれて深く勉強していけば良いかなと思います。
表紙の「あとで困るコード書いてない？」に、グサッと来た方は間違いなく買いだと思います！
それでは以上、「Web製作者のためのCSS設計の教科書」レビューでした！
インプレス
売り上げランキング: 798
