Web制作者のためのCSS設計の教科書 ー の読書感想文

CSS設計の秘伝書

Web制作者のためのCSS設計の教科書隣の席のひとからフライング気味に書籍を頂戴していたにも関わらず、読書感想文のタイミングが遅れましたことをお詫び申し上げます。(ゝω・)

だって忙しかったんですもの・・・



目玉は何と言っても「CSS設計」にフォーカスした希少本であること

Webサイト制作者のた(中略)サイト実践講座では、HTML/CSSの章を担当していたくらい「ワタシハ シーエスエス チョット デキル」って思っていたのですが、昨今は、現職におけるCSSモンスターが多すぎて、ちゃんと書ける気が全くしなくなっています。

というのも特に最近(じゃないものもありますが)では、雨後の筍の如くCSS設計のメソドロジーが生えてきていて、キャッチアップが追いつけてなかったフシがありました。

  • OOCSS
  • SMACSS
  • BEM
  • MCSS
  • FLOCSS

本書では、上記のCSS設計パターンについて詳しく説明しています。ちょうど時系列に沿った形で振り返ることができて勉強になりました。

具体的なコンポーネント設計の例も必見

大枠の設計パターンだけでなく、たとえばボタンであったりメディアカードであったりグリッドであったり、個々のコンポーネントについても具体的な例で解説されています。

多くの人がCSSを書きながらモヤモヤと気をつけているようなポイントを、しっかりと体系的に整理して説明してくれています。「なんかうまくいかない」という普段の課題も、本書の説明でスッキリするところが多いのではないでしょうか。

なんか思ったこと

以下、本書の内容ではなく、読みながら思った自分の未解決疑問系。

  • 予測しやすいとは? 規則性があるだけでなく、明示と暗黙の境界はどうなるのか?
  • 例えばこんな感じか?
    • 意図して遵守すべき規約が少ない
    • 暗黙の規約が複雑でない
    • 例外がない(または限りなく少ない)
  • 設計パターンは何を明文化したら、他のメンバーに伝わるものになるの?
    • 分類
    • 命名規則
    • カスケーディングのルール(何をやってよく、何をやってはいけないか)
  • CSS設計パターンが備えるもの
    • 取り回しやすく、わかりやすい分類
    • いざというときに、カスケーディングの例外をセレクタ的に閉じ込める(スコープを限定する)手段
  • クラス名が長いとき、HTML側のコードの見通しを担保するフォーマットは何かあるのかしら
    • 昨今のattributesを有効に使おう風潮と、class名の肥大化からして解決すべき問題。まあ、属性で適宜改行すればいいんだけど。
  • あるクラスの内部実装やAPIをしらなければ使えない、といった面倒臭さが、スタイルにおいてはインスペクタで逐次確認できるせいもあってかやわらいでる?

意識して守るべき規約が多いと人は容易に死ぬという問題と、スコーピングのない記述言語たるCSSの設計パターンは、正面から殴り合ってる感じがしてこわい。徳の高い分野だ。

むすび

次回、CSSをスクラッチすることがあったら、まずは本書を読み直しながら書いてみたいと思います。谷さん焼き肉おごってください^q^


Author

ahomuAyumu Sato

KINTOテクノロジーズ株式会社

Web 技術、組織開発、趣味など雑多なブログ。技術の話題は zenn、ご飯の話題はしずかなインターネットにも分散して投稿しています。

Bio: aho.mu
X: @ahomu
Zenn: ahomu
GitHub: ahomu
Sizu: ahomu

Related

Latest

Archives

Tags

Search