今までのCSS本とはかなり異なる！現在主流の実装・設計・管理方法を徹底解説した良書 -ざっくりつかむ CSS設計

Post on:2021年12月24日

sponsors

デザイン効率化の新常識！Illustratorの生成塗りつぶし（シェイプ）の活用テクニック Adobe Firefly Camp 2024年11月22日金曜日開催 20時から21時

CSSの解説書はたくさんありますが、今までのCSS本とはかなり異なる面にフォーカスされたCSS設計についての解説書を紹介します。

かなり実践的な解説書です、CSSの何に気をつけて、CSSをどのように書き、CSSをどのように管理するとよいか、現在主流の実装・設計・管理方法について、最適解となるためのアプローチや思考プロセスが詳しく解説されています。

本書は中・上級者向けの内容をていねいに詳しく解説したものです。CSSの初心者向けの基礎知識やサンプルなどはありませんが、CSSに取り組んでいる人であれば大丈夫だと思います。CSSの実装・設計・管理の方法にフォーカスされ、プロジェクトレベルでのCSS設計について解説されています。

著者の高津戸氏とはかなり前にお会いしたことがあるのですが、イラストにそっくりな印象がありますね。

ざっくりつかむ CSS設計
ISBN 978-4-8399-7766-5
[Amazonでみる]
[楽天でみる]

著者: 高津戸壮
出版社: マイナビ出版
発売日: 2021/12/23

本書は昨日発売したばかり！
Kindle版も同時発売されています。

ざっくりつかむ CSS設計 Kindle版

版元様より許可をいただいたので、紙面のキャプチャを少しだけご紹介。

本書の大きな特徴のひとつは話しかけるような文章、もしくは心の声のような文章です。公式ドキュメントやマニュアルのような難しく堅苦しい内容でも、すとんと内容が入ってくると思います。

本書はトピックごとに分かれた24の短い章で構成されています。CSS設計とはどんなものかからはじまり、BEMやSMACSSといった設計手法、余白の設計、スタイルガイド、SassやAutoprefixer、PostCSSを使用したビルド、ユーティリティファーストの考え方まで、現場で現在必要とされているCSSについて学べます。

CSSは比較的簡単に使用できる難しくない言語ですが、扱う要素やページが増えるにつれ複雑になり、管理・運用といったことも求められ、難易度が上がります。その解決策が、CSS設計です。プロジェクト規模、もしくは複数のメンバーが携わるCSS、未来の自分が携わるCSSの最適解になります。

中身を見てみましょう。
本書ではCSS設計の最初のステップとして、BEMが取りあげられています。BEMとはBlock, Element, Modifierの3つ頭文字で、コンポーネントベースでWebサイトを設計するための方法論です。

BEMにおけるBlockとは、論理的・機能的に独立したページ内のコンポーネントのことです。例えば、ヘッダ・ナビゲーション・カードなど、コンポーネントの集まりでページが構成されています。

どこからどこまでをBlockにすればよいのか悩んだことはありませんか？本書ではカンプや実際のサイトを例に、さまざまなケースを想定しての思考プロセスや取り組み方が解説されています。

CSSリセット、フレームワーク、ツールなど、CSSにはさまざまな選択肢があります。それぞれに長所があり、向き不向きもあります。自分に適した、プロジェクトに適したものを選ぶには、それぞれの特徴（よい面・悪い面）を理解して選ぶ必要があります。

他人が考えていることが言語されていると、自分の考えも整理できます。例えば、余白は上・下・上下のどちらにつけるのがよいか、marginとpaddingのどちらがよいか、ベター・ベストになる余白設計の考え方が解説されています。

スタイルガイドは、コーディング規約やコンポーネント一覧など実装する時にメンバーによってコードがばらばらになってしまうのを統一するためにあります。これにより自分以外のメンバーが書いたコードでも簡単に扱えるようになります。プロジェクトごとにスタイルガイドを用意する必要がありますが、ゼロから作成するのは大変なのでひな形を用意しておくと便利です。ひな形はCSSの進化とともにバージョンアップさせます。