（上の書籍画像をクリックすると試し読みサイトに移動できます）
PDF電子書籍の購入はこちら

はじめに

この本はCSS 設計について書いた本である。CSSをどのように書いていったらよいかということに悩んでいる人にとって、何か参考になるところがあれば嬉しいと筆者は考えている。

CSSを書けるというのはどういうことなのか

フロントエンドの開発に携わるのであれば、CSSについて触れないことはまずありえないであろう。しかし、どの程度CSSに深く関わるかと言うと、それは人それぞれだったりする。この本を執筆している2021年11月現在、筆者は社員十数名の、Webサイト／アプリケーションの実装を主業務とする株式会社ピクセルグリッドという会社に勤務している。
ピクセルグリッドはフロントエンド周りの技術に特化していることを武器にしているのだが、CSSばかりを書いているメンバーというのはそう多くない。では、皆CSSが書けないのかと言うと、そういうわけでもない。プロパティについてある程度理解しているのに加え、どのようにCSSを書き、どのように書いたCSSを管理していくかということについて、ある程度の知識を持っている。

改めて考えると、このCSSを書く能力というのは、どのように身についたものなのだろうかということが、よくわからなかった。なぜなら、そのような考え方について、まとまって解説されているものがないためである。CSSのリファレンスはたくさんある。どういうプロパティを使ったらどういう描画結果になるのか……。しかし、何を考え、何に気をつけてCSSを書き、そのように書いたCSSをどのように管理すればよいのかと言うのは、なかなかまとまっていない。
そして、そのようなCSSを書く能力として、どのようなことを知っていたらよいのか、端的に示すのが難しいということに気付いた。例えば、このサイトに書いてあることを頭に入れておいてと、簡単に言い表せないのである。

この人にCSSを書いてもらうと色々うまくいく。この人はCSS はそんなに書けないが、CSSを書いている人の気持ちを汲んで実装してくれる。そういう能力をどうやって得たのだろうか。乱暴に言ってしまえば、「それは経験だ」となってしまう。しかし、その経験で得た能力というのは、具体的にどのようなものだろうか。

本書は、その「どのようにCSSを書き、どのように書いたCSSを管理していくか」という部分にフォーカスし、これをなんとなくでもわかってもらえることを目標として書いたものである。

想定する読者

この本の読者として想定したのは、フロントまわりの実装を主業務とする会社に入ってきた、新しいメンバーである。新しいメンバーと言っても、すでに高いスキルを持っているような人物は想定していない。まだWebの技術にそこまで詳しくはなく、これから開発のスキルを高めていこうと考えているような人物を想定している。そのような人に対し、実務で覚えろ、経験だと丸投げするわけにはいかない。
この能力というのは、前述したように、単純に何かを暗記したり、仕組みを理解するだけでは成り立たない部分がある。なので、とりあえず参考書としてこの本を読んでください、そう言って渡したい内容をまとめたのがこの本である。

●こういうことを知っていてくれたら、仕事を頼む側としてはすごい助かる
●こういうことを知っていたら、きっとあなたはCSS設計を行う役割として、周りと適切にコミュニケーションをとっていける

そんな内容にしたいと考えた。

著者について

著者である高津戸壮（@Takazudo）は、先述の通り、株式会社ピクセルグリッドに属している。本書執筆時点では、約15年ほどWebサイト制作／アプリケーション開発の現場に身を置いている。その経歴の半分以上の時間を、HTML／CSS／JavaScriptのコーディングに費してきた。

コーポレートサイトを中心とした多数のWebサイトのコーディングを行い、その後、JavaScriptを技術の土台に置いたWebアプリケーション開発を多数経験し、現在はディレクター的な役割として動いていることが多い。

そんな著者は、実は、執筆時点では業務上、自分でCSSを書いていない。本書の企画アイデアが出たのも、もう何年前のことだっけ……というぐらいのスローペースで本書は書かれた。しかし、そのように年月が経っても、自分の持っている考え方は依然として重要であり、新しいメンバーが自分の会社に加わったら知っておいてほしい考え方であると考えたため、一冊の書籍として完成させることにした。

CSSをとりまく現状

本書執筆時点で、CSSを取り巻く現状というのは、なかなかに複雑である。フロントエンドの開発は今、ReactやVue.jsといったコンポーネント指向のJavaScriptライブラリを使って設計されることが多くなっている。このようなライブラリを使うと、CSSをJavaScriptで処理できるため、実質なんでもアリ。今までよりも遥かに自由にCSSを扱うことができるようになっている。
10年以上さかのぼれば、CSSを書くには、ただ単純にCSSのルールセットを並べていくしか方法がなかったようなものだが、時の流れとともに、本書で紹介するSassやPostCSSなどのツールが普及し、広く使われるようになった。それに加え、先に述べたReactやVue.jsなどでCSSを扱う方法も無数に登場してきたので、現在の開発では、HTMLにスタイルを当てるために取ることのできる選択肢が、実に多様に存在している状況になっている。
ここで開発者達はCSSに悩まされるはずである。どうやったらCSSをうまく扱えるのか？何を使ったらよいのか？ と。実際には、おそらく、なんとなく流行っているものを選んでしまっているのかもしれない。

そういう時代において、要件に応じてどういう構成でCSSを書いたらよいのかという判断は、筆者としてはかなり難しいと考えている。CSSをどう書いたらいいか、どういうツールを選んだらよいのかという問題は、シンプルではないのだ。
別に、1 人でCSSを書いているのであれば、好きにすればよいと思う。どうしようと自由だが、チームで開発を行ったり、末永く、運用のコストを高めないようにサイトを運用していきたいのであれば、CSSをどういう風に書いたらよいのかという知識はかなり重要なものになる。

本書では、そんな時代において、CSSに触れていく上で知っていてほしい内容をまとめた。