【読書】Web制作者のためのCSS設計の教科書

2014/10/11

CSS設計を決めずにHTMLを書き始め、細かいことは後で修正すればいいやと先延ばししているうちに、CSSがコピペや修正の繰り返しでグチャグチャに…。結果イチから書き直し。また、自分が過去に書いたコードが何を指しているのかさっぱり分からない。何てことが多々あります。

そんな繰り返しにウンザリしている人にWeb制作者のためのCSS設計の教科書モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 Web制作者のための教科書シリーズがとてもおすすめです。

あとで困るコードを書いてない?

「予測しやすい」「保守しやすい」「再利用しやすい」「拡張しやすい」

コンポーネントやCSSプリプロセッサを意識した設計・管理の実践など、「ちゃんとCSSを書く」ためのプロの考え方を徹底解説!

「セレクタが複雑になってしまう……」
「オブジェクト指向CSSってなに?」
「考え方はわかったけど、どう組めばいいの?」

そんな人のバイブルになるのが、この本です。

Amazon 書籍紹介より

マークアップ・命名規則

BEM(ベム) / MindBEMdingという命名規則が分かりやすいです。

<div class="menu">
    <div class="menu__button">ボタン</div>
    <div class="menu__button menu__button--alert">ボタン2</div>
</div>

一見、気持ち悪さも覚えますが、時間が経ってから見返した場合も構造が把握しやすいと思います。

B (Block): class="menu"
コンテナ・ルートとなる要素
E (Element): class="menu__button"
Blockを構成する子要素
M (Modifier): class="menu__button--alert"
BlockやElementのバリエーション違い

まとめ

簡易メモのため、この記事だけでは非常に分かりにくいですが、CSS設計で困った経験がある方に本書が分かりやすくてオススメです。

制作時のスッキリ（ドヤ）感よりも、後に見返した時の負担をいかに減らすかが大事なのかなと思いました。

リンク