MeM0

おそらく好きなコンテンツの話か雑記

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

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

久々にCSS書くことがあったので、ついでに何か学んでやろうと思い、夏休みの読書がてら読んでみた。CSSを真面目に勉強したの4,5年前なので知識が止まってるのと、bootstrap等CSSフレームワーク使ってるとOOCSSがかなり使われてて、その書き方覚えたいなというのが理由。かなりそれに応えてくれた良い本だった。
概要は、CSSプログラミング言語としてはふわふわしてて簡単だけど、その分破綻しやすい(というかどこかのタイミングで破綻する)ので気をつけて普段から修正しやすいコードにしましょうという内容。割とあるあるなコードで紹介されていて久々にCSSを見たけどわかりやすかった。

参考になった点

破綻しやすいCSS

  • HTMLの構造に依存している
  • スタイルを取り消している
  • 絶対値を多用している

をすると破綻しやすい。スタイルを取り消すのではなく、追加するように考えるのがコツ。

セレクタリファクタリング

できるだけHTMLの構造に依存しないようにセレクタをシンプルにする。要素セレクタは省いたり、できるだけ短くして詳細度を高めないようにしましょうと書いてあった。基本的に詳細度が高くなるとメンテナンス効率落ちるからやめた方がいい。あと、子供クラスタ上手く使ってセレクタを限定するのも効果的。

コンポーネント設計のアイデア

OOCSSを中心に、SMACSS、BEM等が紹介されていた。OOCSS以外は初めて聞いたが、OOCSSの原則である、

  • 構造と見た目の分離
  • コンテナとコンテンツの分離

を中心にしてそれぞれガイドラインにしている印象。BEMの命名規則は使っていこうと思った。

Rule of three

最初から再利用を考えるのは時間を書けた割に無駄になることもあるし、よくないとされていて、コンポーネントにするのはいつがいいのか問題に対して、「3回繰り返したものは、パターンとして成立する」という考え方。3回以上出てきて放置してしまうと逆に影響範囲が大きくなってしまって修正しづらいという問題があるので、そういう点を踏まえても「3回」を目安にしてリファクタリングしましょう。

コンポーネント設計のパターン

ボタンやリスト、画像と文章の並ぶパターン等のあるあるなレイアウトに対して、こう実装しましょうという具体例が書かれていた。単純に実装のテクニックや、最近のプロパティがチラッと紹介されていて勉強になった。

これ以降の章のプリプロセッサやスタイルガイド系は今まで手をつけたことなかったのでよくわからなかった。Gruntとかよく見るけどわかってないので色々損をしてるかもしれない。最後の章のWeb compornentsの概念も初めて見たが、今後主流になってくると、また勉強し直さないとなと思う。

まとめ

OOCSSのきっかけとしてはとても良い本。とりあえず実践してみて馴染んでいかないと駄目だと思った。jsとの絡みや命名規則等含め、自分にしっくり来る技術にしたいと思う。