Toro_Unit

タグ: Material Design Lite

  • Material Design Liteがクールだからみんな使えば良いと思います。

    Material Design Liteがクールだからみんな使えば良いと思います。

    予告通り書きます。

    Facebookのタイムラインで「CSSフレームワークをそのまま使うって発想から抜けないと良くないよ」みたいな話がありまして。

    根本的には僕も全力で同意するのですが、それでもBootstrapとかFoundationを案件で使う気が全くしないわけですよ。両方とも何回か扱いましたけどあんまり良い思い出は無いです。フォームとかボタンなどプロパティレベルでは良く参考にしてはいますが。

    使いこなしてる人凄いと思います。habakiriつくったキタジマさんとかLightningの石川さんとか。WordCamp KansaiのときにBootstrapとの付き合い方聞いておけば良かったです。

    さて、唐突ですがMaterial Design LiteってHTML/CSSフレームワークがありまして。

    Google謹製のCSSフレームワークで、かの有名なMaterial DesignをHTML/CSSフレームワークとして実装した奴です。

    そんな自分がどうしてMaterial Design Liteに対してテンションが上がるのかと言うことをつらつらと。

    全部のクラスにmdlというプレフィックスが付いている

    6割くらいこれです。これだけでホントに使いやすい。

    やっぱり、WEBサイト制作をやってて、それなりにゴリゴリCSSを書いている人ならある程度使い回しているモジュールとかを持っていると思うんですけど、bootstrapのクラスって.containerだとか、.navだとか.btnだとか一般名詞をいっぱい使っていやがるので、これが本当にうっとうしい。

    クラス名を見たところでこれが、bootstrapのclassなのか、そうでないのかがとにかく区別しづらい。特に必要なモジュールだけ取ってきてるような場合は、サイトごとに違ったりしてすっごい面倒。

    使う側でプレフィックスつけて解決するのも面倒。というかなんでライブラリの都合にこっちが合わせないといけないんだと。既存のCSSを組み合わせて使う場合それを書き換えないといけないし、プレフィックスつけない場合はbootstrapのクラス名とかぶらないように命名しないといけない。

    他のCSSのライブラリと同時に使ったりすると、命名がかぶったりする問題も発生しがち。そのライブラリもプレフィックスつけろよって話なんですが。

    CSSのクラスはグローバル問題がとにかく辛いです。

    BEM(mindbemding)を使ったモジュール志向なクラス設計

    bem

    3割くらいはこれです。BEMについては、BEMという命名規則とSass 3.3の新しい記法 – アインシュタインの電話番号が詳しいです。

    現在のSassならば、#{&}とかしなくても普通に&で書けます。

    参考：sass 3.3.0.rc.3 から、インターポレーションなしで、「&」を含んだセレクタが作れる！！！！

    このモジュール志向というのが肝で、モジュールそれぞれが単独で動作するようになっています。

    このおかげで使いたいモジュールだけ引っ張ってくることがかなり用意です。

    Bootstrapだと特にnavbarあたりで顕著ですが、コンテキストでクラスの挙動が変わったりします。親要素に.containerがある場合とか。よく言えば気が利いてると思いますが、ゴリゴリカスタマイズしていこうとすると、予想外の事態に陥ったりすることが多かったイメージです。

    最終的に「自分で書いた方が楽じゃね・・・？」という負のループに陥ります。

    Material Design Liteはモジュール志向なのでこの手の問題が少ないです。他のモジュールに依存しないので、その部分だけ理解してればOKというのが非常に心地よいです。短期記憶に負荷をかけずに済みます。

    SMACSSやFLOCSS、MCSSやITCSSなど、最近流行のCSSアーキテクチャーなどにもすんなり取り込みやすいので、HTMLを書くときも一貫性が保ちやすいです。

    その他

    残りの1割くらい。

    • 公式がSass。しかもgulp-sass。
    • アイコンフォントが同梱されず、Google Fontsから取ってこれる。npmからSassで管理するときに便利。
    • JSがjQuery非依存。
    • CSSフレームワークと言うより、HTML/CSS/JSでのコンポーネントセット。読みやすい。

    まとめ

    • プレフィックス付いてるから既存のCSSやオレオレCSSモジュールとクラス名の競合が起きない。
    • モジュール志向なのでCSSアーキテクチャーに取り込みやすい。理解がしやすい。
    • 結果、BootstrapとかFoundationと比較すると、このパーツだけほしいみたいなことが非常にやりやすい。
    • BEM最高。
    • uikit、Topcoatのこともたまには思いだそう。
    • inuitcssは結局どうなるんだろう。

    現場からは以上です。