Sitepointに書かれたBEMやSMACSSを使っている開発者たちからのアドバイスを読んでいた。僕は今いかにして命名規則をなくすかといったことを考えている最中のため否定的に読んだが、それでもここに書かれたアドバイスは正しいとは感じた。BEMやSMACSSが概ね想定以上に機能することは確かだし、スケールするし、指揮もとりやすい。
僕が避けたいのは何かしらへの強い依存だ。薄いレイヤーならともかく、厚いレイヤーの場合は重度の依存をもたらす。その依存はこれからもそのまま通用するのかというと、不安が大きい。厚いレイヤーとは心中する覚悟が必要というのは正しいが、多くの場合心中する羽目になるのは導入した人ではなかったりもする。もっと薄いレイヤーでウェブ標準(など)に寄せた形の解があれば安心できるはずだ。
HTML 4.01に対するHTML5を始めとして、CSS 2.1に対するCSS 3、いわゆるJavaScriptに対するECMAScript 6は比較的薄い(技術的な点ではなく、アプローチとして)レイヤーと言える。こういったものなら移行もスムーズだし、受け入れられやすいし、学びやすいし、将来への不安も少ない。ウェブ標準外でそのようなものを実現できた・実現しているものを挙げるとすると、HTMLに対するMarkdownやMustache、CSSに対するSassのSCSS記法、JavaScriptに対するTypeScriptや6to5だろうか。
厚いレイヤーとして作られているものは多い。例えばHTMLに対するTextileやHAML、Jade、Slimであったり、CSSに対するSassのインデント記法やStylusの省略記法であったり、JavaScriptに対するCoffeeScriptであったり、だ。筋が悪いわけでもなく、現在の選択肢としては適当で、むしろ現時点では厚いレイヤーのこれらの方が評価されることも多い。これらはウェブ標準のしがらみから飛び出してその枝を延ばし、開発者に生産性を始めとした多くの果実を与えるからだ。
BEMやSMACSSがどちらに属すかというと、それは微妙なところだ。ウェブ標準とは特に干渉するわけではないのでそういう点では薄いが、命名規則なるものがウェブ標準にはないことを考えると、分厚く新たなレイヤーを追加してしまうものとも言える。その習得難易度や複雑化しつづける規則に鑑みると、厚いレイヤーになりつつあるのかなと感じる。
と言いつつこのウェブサイトのCSSはBEMをベースにしたアプローチでプレースホルダー・セレクターとネストに意味を持たせて制作していたりする。この方法はかなり複雑なので汎用的ではないが、BEMのブロック・エレメント・モディファイアーという概念を継承したCSSの構造化というのは悪い解ではない。しかしそこに本来構造化されている(はず)のHTMLがあるのにも拘らず、その更に上に命名規則による構造化を行うレイヤーを設けることに疑問を持ち始めた。
そんなわけでOOCSSを絶対として生まれたBEMやSMACSSといった命名規則に基づくCSSアーキテクチャーという代物を廃棄するため、同じ定義を二度書かないアプローチを試行錯誤しているわけだ。BEMが嫌いになったとかそういうわけではなく、CSSアーキテクチャーなる代物が本当に必要なのかという疑問に対する答えを探すためだ。しっかりと構造化されたHTMLへ完全に従属させる形でCSSを書いても、昨今の高機能ないわゆる開発者ツールの助けがあればうまく機能するのではないか、というような思いつきを証明できるかというような話でもある。