Topcoatのあれこれ

Adobeが出したCSSフレームワークで速さを売りにしている「Topcoat」のサイトをつらつら見てたら、「BEMアーキテクチャ」なる見慣れない言葉を見つけた。

ロシアのネット企業Yandexで使われてるBEM Methodologyなるものらしいのだが、Topcoatではその一部を採用しているらしい。本家のBEMはHTML、CSS、JavaScript(=構造、スタイル、振る舞い)までをブロック単位でカプセル化して再利用可能にする方法論のようだ1

TopcoatのDLファイルにGruntfileがあったので「え、もしかして?」と思ったが、これはTopcoatのライブラリ管理用に使われるもので、JSカプセル化の仕組みまではないようだ。Topcoat自体は単に「CSSとアイコンとフォントが選べるから適当に選んで使ってね」という至極シンプルな使い方でいい。

しかしBEM様式のCSSクラスセレクタ(topcoat-button-bar__button–largeとか)と、それがHTMLにクラス属性として散りばめられるさまを見るとその冗長さに少しモヤモヤする。カスケーディングを減らすことは高速化にはつながるようだけど。


  1. カプセル化のために、Block, Element, Modifierの3つを管理する(BEMの名前の由来)。BEMの全てを真似しようとすると開発ツールの整備が必要で、まわりくどい。印象としては多くのプロジェクトを扱う大企業向け。 

Bootstrap 2.3.2のドキュメントをざっと眺める

錆びついたおっちゃんの脳みそを鍛える目的でログを残しておこうと思う。本来なら、もっとしっかり「やったことの記録」を取っておきたいが、今日は試行錯誤とかではないので、さらっと。

Bootstrap

たまたまBootstrapをちゃんと調べたことないな、と思ってぐぐってみたら最初に出たのが2.3.2のページだったのでそこをざっと眺めた。

わりとBootstrap流行ってるらしいけどちゃんと眺めたの今日が初めて。さすが錆びついてるおっちゃん。

…しかも最新版の3.0が出てたというのをあとから知るという。
3.0はモバイルファーストをかなり意識してて、もうモバイルサイトもこれ1つでいいんじゃないかという感じも受けたが、jQuery MobileでいうところのPanelsみたいな機能も欲しいなーと思ったり。

BootstrapはいわゆるCSSフレームワークと思っていたが、JavaScriptプラグインの仕組みがあった。ページ内目次がスクロール位置と連動する「ScrollSpy」プラグインが個人的にツボ。