若者はどうやってCSSを覚えたのか #CSS

先日、@Jxckさん主催で行われた次世代WebカンファレンスでCSSのセッションに登壇させていただきました。（動画）

セッション中に@cssradarさんに「morishitterはどうやってCSSを覚えたのか」と聞かれ曖昧にしか答えられなかったので、 自分が今までどうやってCSSを学んできたのか を振り返ってみる。

黎明期

プログラムを書き始めたのは3年半ぐらい前からだと思う。PHPでWebアプリを書いたのがはじめで、そのときにBootstrap v2をベースに何もわからないまま、雑にCSSを書いた。

BootstrapのようなCSSフレームワークからCSSを始めると、floatやpositionのようなレイアウトに関わるプロパティがどういうものなのかを知らなくても、何となくでWebアプリのレイアウティングができる。
そしてブラックボックス化されたBootstrapのコードを読もうとしても、プロパティの意味がわからなかった。

このときになって初めて、CSSを勉強を体系的に勉強した。すべての人に知っておいてほしいスタイルシートデザインの基本原則という本を読んだ。
CSSのボックスモデルや詳細度を初めて知り、自分でCSSを書いてもスタイルが適用されないことがあった原因がわかった。

そしてあるとき、Webアプリを作っているときに2人で3000行ぐらいのCSSを書いたことがあった。ちなみにこの頃はすでに（特に何も考えずに）Sassを使っていた。

全く頭を使うことなく、雑に、片手間に書かれたCSSはスタイルの影響範囲が把握できず、メンテナンス不可能なものになった。初めて「CSSの崩壊」を目の当たりにした瞬間だった。

CSS設計

CSSは構文が貧弱だ。
セレクタでスタイルを適用させたい要素を指定し、プロパティとその値を並べていく。基本はこれだけで、誰でも簡単に書き始めることができる。

CSSのメンテナンス性を保つために、CSSの設計手法について学ぶ必要がある。これは別にCSSに限ったことではなく、CSSもソフトウェアの一部として保守の対象となるので当然のことだ。もっと早く気づくべきだったと思う。

僕がCSS設計の勉強を始めたときにはすでにOOCSSやSMACSS、BEMといった手法が存在した。これらの既存の設計手法についてネットで手探りで調べていた。

今ならWeb制作者のためのCSS設計の教科書という本がとてもよくまとまっていて、体系的に学ぶことができる。

CSSの設計について学んでから、Bootstrap等のCSSフレームワークのコードを読む。すると、実際に どういった粒度でルールセットを定義すれば いいのかがよくわかる。
CSSプリプロセッサーを使っているフレームワークのコードを見ると、@mixinや@extend、変数の管理など、プリプロセッサー上手い使い方を知ることができる。
Bootstrap v4や、Bourbon NEATはSassで書かれていて、一度コードを読むといいと思う。

CSSプリプロセッサーへの不満

CSSプリプロセッサーが持つ、変数定義やMixin等の機能は、CSSの問題のひとつである 抽象化と構造化ができない問題 を解決していると思っている。
冗長な記述を減らすことができ、これはメンテナンス性向上に直結する。

しかし、現状のCSSプリプロセッサーは、CSSに便利なシンタックスシュガーを定義したものに過ぎず、 CSSの設計を良くするものではない と感じた。

ルールセットのカスケーディングやルールセット継承、再利用する機能に制約を設け、職人化しているCSS設計を誰でもできるようにしたい。
そして、「CSSの設計を本質的によくするため」というコンセプトで、プリプロセッサーを自作した。この辺の考えはブログにも書いている。

プリプロセッサーの構文やその実装について調べる中で、CSSに対して意見を持てるようになってきた。ツールを作ることでCSSの仕様について理解できることもあると思う。

これからCSSを始める人に向けて

オジサンたちがCSSを始めた頃よりも、今はむしろ勉強しやすい環境にあると思っている。

ブラウザのDeveloper Toolsを使えば、DOMの構造と適用されているスタイルを見ることができる。
また、CSSのフレームワークはよく考えて設計されたものが多く、その良質なコードはほぼ全てGitHubで読むことができる。
issueを読めばどういった経緯や理由でそのような実装になっているのかがわかることもあるし、気に入ったリポジトリはWatchすると素早く情報を得ることができる。

CSSをより深く理解するためには仕様書を読むことからは避けられない。しかし、仕様書を読んで理解することはとても大切だが、初めは書籍を読む方がいいと思っている。
僕は最近になって仕様書を読んで細かい挙動を理解したいと思っているが、これまではわからなかったら調べるぐらいで済んでいた。

まとめ

既存のCSS設計手法を学ぶ
CSSフレームワークのコードを読む
GitHubで情報収集
仕様書読む

で強くなれます。

若者からは以上です！