血肉となる。読めばCSSのコーディング/設計力が上がる良書3つ プラスα

  • 更新日:
  • 公開日:

Webサイトを作っているとどうしてもCSSのコーディングが汚くなりがちになって、手を加えるたびにソースコードがずさんになっていくのが私の悩みです。

このままではアカン!ということで、数が少ないCSSについての本を3冊読んでみた所どれも血となり肉となる良書だったので軽くご紹介します。

(「CSSだけでカレンダー」「CSSでメニューデザイン」みたいな本ではなく、「ソースコードを綺麗に書く」「管理のし易いCSS設計」といった内容の本です)

CSSのコーディング/設計力が上がる良書3つ プラスα

Sass & Compass 徹底入門

CSSと言っておきながらいきなりSassの書籍ですが、やはりこれからのWebはSassが必要だと思います。Sassとはどんなものかというと、「CSSコーディングが楽になり作業が捗る道具」と捉えて問題はないでしょう。

Sassを覚えるだけで確実に作業効率は上がりますし、後にご紹介する書籍で扱っているCSS設計(スタイルガイド)と親和性が高いです。(ちなみに覚えたての頃は楽しさに興奮して「カチャカチャ!…ッタァーン!」と初心に帰る勢いでEnterを押していました)

この本はSassとそのフレームワークであるCompassのインストールや使い方、合わせてCompassを使ったグリッドシステムの使用例(Blueprintや960 Grid System)、さらにはCompassの拡張機能の作成方法・共有など、書名の「徹底入門」を徹底している内容でした。

もう1冊Sassの本には『Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語』があります。こちらはSassの関数一覧やフレームワークなどSassに関する知識が多めで、対してSass & Compass徹底入門はCompassの知識が多めになっています。

SMACSS E-book 日本語(電子書籍)

お次は電子書籍(有料)のSMACSSです。SMACSSとは何かといえば「CSSはこのルールに則って書くとゴチャゴチャにならないし修正が楽になるよ」というCSSの設計手法(スタイルガイド)です。それについてまとめた電子書籍ですね。

著者はYahoo! Mailのリデザインや数百ものウェブサイト作成に関わってきた人で、その経験から出てきた考え(SMACSS)を共有するために執筆したと言っています。

必ずしも全てのウェブプロジェクトにこのSMACSSが有効だというのではなくただ1つの考えなのですが、こうしたガイドラインを1つでも知っておけば他の設計手法も頭に入りやすいのではないかな、と思いました。(他にもOOCSSやBEM、MCSSなどがあります)

価格は2014年9月18日現在で15$になっています。日本語版は『SMACSS – Scalable and Modular Architecture for CSS (日本語)』から購入できます。(ファイル形式は「pdf」「mobi」「epub」の3種類がダウンロードできて、私はiPhoneのiBooksで読みました)

Web製作者のためのCSS設計書の教科書

最後はCSS設計についての本で、著者はAmeba関連事業をしている株式会社サイバーエージェントのフロントエンジニアの方。「壊れないCSSを書くことは至難の業だから、修正・管理がしやすいCSSを作ろう」みたいな内容です。

破綻しやすいCSSの例やCSSの基本、セレクタのリファクタリング、OOCSS/SMACSS/BEM/MCSSといった各スタイルガイドに加え著者独自のスタイルガイド「FLOCSS」の説明、コンポーネント設計についてなど中身は濃いです。

今のところCSS設計に関する本は他に無いと思います。書名を見て思わず即買いしてしまいました。

プラスα – リーダブルコード

「プラスα」として紹介した理由は、この本がプログラミングを主に扱っているからです。ですが、Sassの変数や関数は思いっきりプログラムですし糧になる内容だと思います。

その中でも名前の付け方のページがあるのですが、例えば「抽象的な言葉よりも具体的な言葉を使う」「情報密度の高い言葉を使う」はCSSのID名やクラス名を考えるときに共通して当てはまる考え方だなと。

また、ウェブサイトを作る以上CSS/HTMLだけではなくJavascriptやPHPなどのプログラム言語を扱うことが多いので、CSSの他にプログラミングをしている方なら読んでおくに越したことはない一冊です。

あとどうでも良いエピソードですが、カバーデザインに楽譜が使われているせいか本屋で探しても中々見つからず、結果見つかった場所は読めばギターが上手く弾けそうになる本が沢山置いてある音楽コーナーでした。


というわけで、読めばCSSコーディング/設計力の血肉となる書籍の紹介でした。ちなみにひじきは血になる食材らしいです(浅い知識)。

書いた人

Symbol Mark

Ryoichi(しつ)

除菌ティッシュを買い込んで使いきれずによく乾かす人。

療養目的で退職し、どうやって生きていくか模索中。最近は勉強目的でLaravelやVue.js弄ったり、趣味で音で遊んでます。

※2019年10月16日現在ブログリニューアル中です。崩れなどが発生していたらすみません。

うぇぶ: @s_ryone