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

- リンク: https://torounit.com/blog/material-design-lite%e3%81%8c%e3%82%af%e3%83%bc%e3%83%ab%e3%81%a0%e3%81%8b%e3%82%89%e3%81%bf%e3%82%93%e3%81%aa%e4%bd%bf%e3%81%88%e3%81%b0%e8%89%af%e3%81%84%e3%81%a8%e6%80%9d%e3%81%84%e3%81%be%e3%81%99/
- 公開日: 2015-08-06T21:45:42+09:00
- 作成者: Toro\_Unit

> 予告：Material Design Liteかっこいい(フロントエンドエンジニア的に)からみんな使
> え的な記事書きます。
> — Toro_Unit / Hiroshi Urabe (@Toro_Unit) [August 6, 2015](https://twitter.com/Toro_Unit/status/629157130780704768?ref_src=twsrc%5Etfw)

予告通り書きます。

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

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

使いこなしてる人凄いと思います。[habakiri](https://wordpress.org/themes/habakiri/)
つくった[キタジマさん](http://2inc.org/)とか[Lightning](http://lightning.bizvektor.com/ja/)
の[石川さん](https://twitter.com/kurudrive)とか。WordCamp KansaiのときにBootstrap
との付き合い方聞いておけば良かったです。

さて、唐突ですが[Material Design Lite](http://www.getmdl.io/)ってHTML/CSSフレーム
ワークがありまして。

Google謹製のCSSフレームワークで、かの有名な[Material Design](https://www.google.com/design/spec/material-design/introduction.html)
をHTML/CSSフレームワークとして実装した奴です。

そんな自分がどうして[Material Design Lite](http://www.getmdl.io/)に対してテンション
が上がるのかと言うことをつらつらと。

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

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

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

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

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

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

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

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

[⌊bem⌉⌊bem⌉[

3割くらいはこれです。BEMについては、[BEMという命名規則とSass 3.3の新しい記法 – アインシュタインの電話番号](http://blog.ruedap.com/2013/10/29/block-element-modifier)
が詳しいです。

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

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

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

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

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

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

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

[SMACSS](http://qiita.com/matsui-a/items/9b9188904d160a3ec223)や[FLOCSS](https://github.com/hiloki/flocss)、
[MCSS](http://operatino.github.io/MCSS/ja/)や[ITCSS](https://speakerdeck.com/dafed/managing-css-projects-with-itcss)
など、最近流行のCSSアーキテクチャーなどにもすんなり取り込みやすいので、HTMLを書く
ときも一貫性が保ちやすいです。

## その他

残りの1割くらい。

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

## まとめ

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

現場からは以上です。