BEMが採用されているCSSフレームワークまとめ

有名どころのフレームワークだと独自クラスと見分けが付きにくかったり、作成したコーディング規約に矛盾が生じたりすることがあると思います。
業務でCSSフレームワークを利用する機会が出来たため、調査してみました。

BEM使われてるよ

• MATERIAL DESIGN LITE
  • 全てのクラスにmdl-プレフィックスがついているため、自作/フレームワークとのクラスの違いが分かり易い
  • マテリアルデザイン
  • Goodle謹製
• Topcoat
  • こちらもtopcoat-プレフィックスがついている
  • きめ細かい影使いが特徴のデザイン
  • Adobe謹製
• inuitcss
  • まだcomming soon
  • Components, Objects, Utilitiesというレイヤーを持っていて、それぞれc-, o-, u-プレフィックスがつく
• MVCSS
  • modifierだけ採用して、elementはマルチクラスで対応している ex. btn btn--l btn--red

追記

• Blaze CSS
  • プレフィックスはinuitcss同様にc-, o-, u-
• Cutestrap
  • プレフィックス無し
  • 超軽量だけど、バリエーションが可愛い感じ
• BEMSkel
  • マルチクラス式のBEM
  • プレフィックス無し

おまけだよ

• UIkit
  • BEMじゃないけどおまけ
  • 全てのクラスにuikit-プレフィックスがついている、かつデザインも秀逸なため捨てがたく、紹介しました

最後に

BEM採用、フレームワーク独自のプレフィックがつくという点を考慮するとMATERIAL DESIGN LITEかTopcoatの2択。

あとは好みやプロダクトの特性によって、どちらのデザインがより望ましいか判断するといった所でしょうか。

デザイン的にはUIkitも捨てがたかったため、BEMじゃなくても良い場合は、選択肢に入ってくると思いました。
（深夜に書いているため、文章がグダグダですみません）