最初は大丈夫でものちのち大変なことになる
――『はじめてのCSS設計 フロントエンドエンジニアが教えるメンテナブルなCSS設計手法』は、CSSをかじったことがあってもゼロからは設計したことのない方のための解説書です。田辺さん始め著者陣の経験が詰め込まれた1冊だと思いますが、最初に田辺さんの経歴を教えてください。
田辺：僕は元々営業をやっていたんですが、Web 2.0と騒がれていたときに勉強し始め、海外でWebデザインの仕事をするようになりました。テーブルレイアウトだったものがフルCSSでいける。そう言われるようになってきたCSS全盛期に帰国し、Webデザイナーとして就職したんです。
本書では「PART-1 CSS設計」という基礎的な部分を担当しています。CSSがどうしてこんなにシンプルなのか、シンプルゆえに問題が起きやすいといったことを書いています。
個人や小規模プロジェクトだと設計を意識することはないかもしれませんが、中規模以上、もちろんチーム開発だとそうはいきません。複数人で開発するのであれば、設計は必ず必要になることです。
――チーム開発の場合は規模に関わらず「設計」が欠かせないのでしょうか。
田辺：基本的に一人だけで手がける案件はほとんどないかとは思います。エンジニアが自分だけの場合でも、ディレクターなど他の職種のメンバーが関わる案件もありますよね。エンジニアに頼むほどのことでもない修正をディレクターがやってしまうこともあるので、そういうときにルールが明記されていると事故が起きにくいはずです。
――田辺さんも事件・事故を経験されたことがありますか？
田辺：過去に遭遇したのは、CSSにあまり詳しくなくても使えるフレームワークである「Bootstrap」に関する事件がありました。ある人が納期の短いプロジェクトをBootstrapで乗りきろうとしたのですが、しっかり理解せずに組み込んだため、オリジナルのコンポーネントを追加しようとしたとき、全然うまく表示できなくなってしまったんです。結局はBootstrapをすべて外して、ゼロから設計し直しました。
この事件の原因はCSSのフレームワークをルールや設計思想を理解しないで使ったことにあります。もちろんBootstrapに限らずですが、設計を怠ると、最初は大丈夫でものちのち大変なことになってしまいます。
そうならないためには、あとからでも編集したり他人が理解したりしやすいかどうかを考えることが大事ですね。
CSSはなくならない
――想定している読者はどういう方ですか？
田辺：Webデザイナーはもちろん、Webアプリを手がけていてフロントエンドは得意でない方、これからフロントエンドでキャリアを築いていきたいマークアップエンジニアなどですね。特にWebアプリは盛り上がっていますから、Webアプリ開発に携わるエンジニアにとってCSSの知識は損がないと思います。
最近はネット上に情報が溢れていて、フレームワークや設計方法に関する情報も自由に手軽に手に入ります。それをつまみ食いしていけばCSSは間に合うかもしれませんが、ゼロから作ってみることで気づくことも多いでしょう。実際に設計すると、意外と難しいことがわかります。
自分がこれまでなんとなく使い回してきたコードやフレームワークの構造、そして設計の流れがわかるようになるはずです。
――たしかに、つまみ食いはできてもゼロから設計したことのある方は多くないかもしれません。その意味では、少し知識のある方だと読み進めるのにちょうどいいのかなと思いました。
田辺：最初にCSSの基礎を説明していますが、多少は知っているほうが読みやすいのは間違いありません。Gulp.jsやSassを触ったことがあると、なお理解しやすいと思います。『HTML5/CSS3モダンコーディング』と合わせて読むといいかもしれませんね。
――今後、CSSの需要はどうなっていくとお考えでしょうか。
田辺：フロントエンドではJavaScriptが花形になっています。CSSはプログラミング言語としては貧弱で、メインストリームに躍り出ることはないかもしれません。ですが、絶対になくなりはしません。そんな存在をフレームワークに頼りっきりにするのは変な話です。一度、きちんと勉強しても悪くはないでしょう。
つまみ食いで事故を起こさないために
――では、本書の狙いを教えてください。
田辺：CSSはつまみ食いが横行しています。言語の本質を理解しないで、表面的にいじっただけででき上がっているものが多いという印象を持っています。時代の流れもあり、なるべく素早く世に送り出すのが今の主流なので、それはそれで仕方ありません。
ですが、本質に立ち返って、CSSやそのフレームワークがどういった考え方でできているのか、どう設計すれば効率的かを知っていただけるといいなとも思っています。とはいえ、本書を通してCSSをゼロから設計する人を増やしたいわけではありません。
本書で取り上げているOOCSS、SMACSS、BEMといった方法論を知っておくと、自分がしようとしていることの意味を正しく理解してコーディングできるようになるでしょう。
小規模プロジェクト、たとえばLPしか作らないようなら、CSSについて深く知る必要はあまりありません。ただ、だんだんプロジェクトの規模が大きくなっていくことはありますし、自分一人で取り組む小規模の案件で本書の内容を試してみることはできると思います。
堅牢性と柔軟性のバランスを取る
――CSSを設計するうえで、大切なことはどんなことでしょうか。
田辺：堅牢性と柔軟性のバランスです。堅すぎるルールだとどう編集すればいいのかわからず、次々にルールが追加されていく可能性があります。逆に、柔軟なルールでありすぎると誰でも改変できて崩れやすくなります。
僕自身はそこに注意しつつ、案件、作業を引き継いだ人がやりやすいような状態にしておくことを意識しています。それぞれ考え方やスキルが異なるので、設計思想をはっきりさせておかないと引き継いだ瞬間にレイアウトが崩れる、といったことも起きかねません。
また、本書では様々なツールも紹介していますが、これが正解というわけではありません。バージョンアップもありますし、そのとき最適で必要なものを利用してもらえればと思います。大事なことは、自動化や簡略化ができることはそうして、タスクを減らすことですね。CSS設計という、メインの作業に時間を割けなくなっては本末転倒です。
――最後に、読者にメッセージをいただけますか？
田辺：これからCSSをきちんと学びたい方には、本書は間違いなく役に立ちます。また、Javaなどを扱っている方でも、CSSの知識を持っておいたほうがいい場面もあるでしょう。CMSを開発していた方がCSSを壊してしまった、ということもありましたから。
普段からCSSに慣れ親しんでいないエンジニアの方にとってCSSは厄介な曲者ですが、本書でCSSの成り立ちや、それゆえの設計があること、フレームワークの考え方を知ってもらえると嬉しいですね。そうすると、少しだけCSSに対して優しくなっていただけるのではないかと期待しています。
