購入価格: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 GeneratorやHologramあたりから始めるといいかもしれない。いずれも英語サイトであるが、検索すれば日本語で素晴らしい説明をして下さっている方が山ほどいらっしゃる。ありがたいことだ。ありがとう。