はじめに

前回Qiitaで書いたFlutterの勉強記事が週間トレンドになりました。読んでくださった方々ありがとうございます。

業務・プライベートで忙しく、なかなか投稿できませんでした。落ち着いてきたので、プライベートでまとめ直してまた記事にしていこうと思います。

その一つとして、CSS設計を勉強するべくマイナビ出版の "ざっくりつかむCSS設計" を読みました。今回はその本の紹介です。

高津戸壮　ざっくりつかむCSS設計　 2022/1/18

内容をざっくりかいつまんで

本のタイトルの通りCSS設計について書いてある本です。

BEM

まずは、有名なBEMについて書かれています。 BEMとは、Block, Element, Modifierごとにルールを決めることで、命名からどこにスタイルが当たっているかわかりやすくなるものです。この本を読む前から下記サイトで私は勉強していたので割愛します。

SMACSS

次に、CSSを書く上で助けになるSMACSS(Scalable and Modular Architecture for CSS, スマックス)やユーティリティクラスを紹介しています。

SMACSSは、

Base: サイトの土台となるCSS群(normalize.css, reset css)
Lyout: ヘッダやサイドなどページのレイアウトを決めるCSS群
Module: 再利用するためのパーツ ※この本では説明されていない
State: レイアウトやモジュールの特定の状態を示す ※この本では説明されていない
Theme: サイトの見た目（ライトやブラックなどなど）の5つのルールに分かれています。そのうち3つのルールをこの本では解説しています。

ユーティリティクラスはほぼ単一のスタイルを割り当てられたもので、それぞれのクラスに付け加えることで調整できるクラス。本サイトもtailwindを使っているので馴染みのあるものでした。

余白設計

これは非常に共感するものでした。私も初めてBEMでコードを書き始めた時にいろいろなところにmargin-topやmargin-bottomを書いていました。ぐちゃぐちゃになってよくないなあと途中から思い始め、悩んでいた矢先この本を見つけました。余白の方向を上か下に絞ることや、デザインから統一性を持たせて決めておくなどなど勉強になりました。

ビルドしてCSSを作る

CSSを改善するためにビルドして使うツールを紹介しています。

minify
- 余白などを削除してCSSをより軽量にするためのもの
Sass (Syntactically awesome style sheets)
- 変数を使用したり、mixinというスタイルの宣言群を利用することでよりわかりやすく書きやすいCSSにできる
Autoprefixer
- CSSを書いたといっても全ブラウザがサポートできているわけではない
- サポート状況はCan I useで確認できる
- ベンダ特有のものは-webkit-と言ったようにvendor prefixがついている
- autoprefixerはサポート状況と照らし合わせ、vendor prefixをつけてくれる
PostCSS
- CSSに対して何かしらの変換処理を行い、別のCSSを出力するAPIを提供するソフトウェアと解説している
- cssnanoやstylelintなどがあり、使うか使わないかはプロジェクトの自由

感想

BEMで書くのはもう古く最近のプロジェクトでCSS設計を考えることは少なくなっているかもしれません。実際、私もtailwindばかりでそんなに考えていませんでした。しかし、業務やプライベートでBEMで開発をしてみたところ、CSSの理解が深まりました。なかなか触れない今だからこそ勉強してみると良いかもしれません。

「CSS おすすめ本」などで調べると、

が出てきます。今回は体型立てて学ぶというよりは、業務で困っているTipsなども知りたいと思い、紹介した本を選びました。私の目的通り余白設計など現場で知りたいような知識がいっぱい書かれている良い本でした。おそらくCSSを知らない、初めて勉強するような人は別の本がよく、少し勉強をして困り始めてきた頃に読むと良いと思います。他のサイトでも読む順番は最後になっていることが多いです。

フロントエンドをやり始めると、この本とは別のCSS設計の本を読みたいですし、デザイン・UX・アクセシビリティなどなどまだまだ勉強しないといけないことだらけです。ちょっとずつにはなりますが、勉強して、発信していけるよう頑張ります。最後まで読んでいただきありがとうございました。

Tag: フロントエンド

フロントエンド (1)

ざっくりつかむCSS設計