Web制作者の​ための​CSS設計の​教科書を​読んだ

公開

更新

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法

今までは趣味で書いていたアマコーダーにとって、最初の壁が設計で、それはCMS, HTMLに限らず(と言うよりは一番)CSSの設計の重要だと痛感してる。そんな中、CSSの設計に関する情報や書籍も増えてきてて大変ありがたい限り。

第1章「CSSにおける設計とは」の2節「破綻しやすいCSS」には、確かにこう書いてあって困ったことあるよなーとか、こう書きがちだよなーと思うことが説明されていて、さらに次の第2章2節「CSSのリファクタリング」でこうするとイイよ、という例が具体的で分かりやすいし、第3章以降のコンポーネント設計のアイデア以降の理解にも繋がっていてとても理解しやすかった。

リファクタリングのところで言うと、要素セレクタの省略って詳細度の関連から言えば書かない方がいいケースも多いけど、マークアップとスタイルの関連性を明示したいときとかは書きたいよなーと思ってたら、それコメントでやれ、とあって目からウロコだった。なんで今までそれに気が付かなかったんだろうと。

次の2章2節「セレクタを短くする」は、Sass使い始める→ネストマジ便利→セレクタめっちゃ長くなる→再利用性下がる、から脱したくて最近意識してる。プリプロセッサー使わずにCSS書いてた頃には無かったような苦労してたことに気付いた。


第3章のコンポーネント設計のアイデアは、これまでのアイデアが時系列的に説明されていて分かりやすかった。やっぱり書籍の形だと理解しやすい。個人的にはコンポーネントっていう考え方がWebアプリのマークアップ向けだな~と感じていて(もちろんドキュメントにも適用できると思うんだけど)ちょっとまだ完全にしっくりきてない。このあたりは早く言語化したいんだけど、そのためにはまず使わないことには何も言えないので、アイデアの中で一番しっくり来るFLOCSSを使おうと思ってる。

4章以降は実践的な内容とWebコンポーネントの話。Webコンポーネントは追えてないけど、上で書いたようなことがしっくり来てからかなあと思ってる。


全体で言うと、教科書の名前通り歴史と実践がほどよく書かれていて大変理解しやすい内容だった。読むだけでも意識は高まると思うけど、もっとがっつりコード書いていかないと身につかないと思うし、こういった内容をチームのベースとして話し合ってそれぞれ最適なやり方とかを模索していきたいものです。