Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 Web制作者のための教科書シリーズ (谷 拓樹/インプレス)

書籍Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 Web制作者のための教科書シリーズ(谷 拓樹/インプレス)」の表紙画像

購入価格:1881

評価:

この記事は約2分10秒で読めます

もうCSSはうんざりするくらい使ってきたものの、なんだか最近しっくりこないという人が読む本。つまり私のために書かれたような本である。

なんとなく書けるのがCSS

CSSは一人暮らしの部屋に似ている。なんとなく暮らしていると、いつの間にかモノが増え、散らかり、引っ越しでもしようかという時には我ながら驚くべきカオスになっている。家ごと捨ててしまいたくもなるが、そうもいかないのが人生。そう、CSSも同じである。

本来のプログラミングにおけるコンポーネントをCSSで実現することはできません。思いもよらない何かしらの条件やタイミングで破綻をし、CSSを組み直すといったことが常に必要になります。それは、CSSにはプログラミング言語のような、スコープやカプセル化といった概念がないためなのです

BEMがおすすめ

本書は主にBEM記法に則って書かれている。BEMとはBlock、Element、Modifierの頭文字を取ったものである。

CSSのclassやidはどんな名前でも付けれる。bakaでもahoでもunkoでもいい。だからこそ、人はつい適当に付けてしまう。本当は「命名規則」と言われるように、我が子の名前をつけるくらいの真剣さで考えなければならないものなのだ。

BEMは合理的

BEMはとてもわかりやすい。人間の身体に例えて説明しよう。Blockは腕や足と言った大きな部分、Elementは指や爪といった小さな部分、Modifierは指や爪の形や色のことである。

腕にきれいな指がついているとすると、こう書く。arm__finger–beauty。この二つのアンダーバーは主従関係を示し、二つのハイフンは同格であることを表している。読み下せば、腕の中に指があり、その指はきれいだ、と。このルールに則って記述すれば、そのclassがどういう働きをしているか一目瞭然になるというわけだ。

CSSは精神論

CSSは技術的なことよりも、心構えの面の方が重要な気がする。プログラミングでは定番のセオリーらしいが、Rule of threeというのは興味深い。

「3回繰り返したものは、パターンとして成立する」

二度あることは三度あるのではなく、三度あることは何回でもあるということだ。

スタイルガイドジェネレータを使おう

自慢ではないが、スタイルガイドジェネレータなるものを知らなかったし、見たことも使ったこともない。これは、サイトごとに使われているCSSの説明書を作るようなものだ。

おそらく、一定規模以上の会社でなければ、このような高尚なツールの必要性には迫られのだろうと思う。使うとすれば、SC5 Style Guide GeneratorHologramあたりから始めるといいかもしれない。いずれも英語サイトであるが、検索すれば日本語で素晴らしい説明をして下さっている方が山ほどいらっしゃる。ありがたいことだ。ありがとう。

記事カテゴリー: WEB