BEMのMixesとは？

BEMのMixesと下記サイトにあるのですが、調べてもほとんど情報がありません。
どなたかご存知でしょうか？

http://liginc.co.jp/web/html-css/html/173153#css-skill2
Mixes

Mixesは複雑なコンポーネントをマークアップする際に役立つテクニックです。
BEMの公式で紹介されている方法で、もしBEMやそれに準ずるマークアップを行っているのなら有効な手段でしょう。

ではどのようなシーンで利用できるのか。
1

<button class=“button“>Button</button>
1
2
3
4
5
6
7
8
9

.button {
display: inline-block;
color: #FFF;
background: #000;
text-decoration: none;
padding: 5px 20px;
border-radius: 3px;
font-size: 15px;
}

例えばよくあるシンプルなボタンがあったとします。

1
2
3
4
5

<form class=“form“> <table class=“form__table“>...</table> <button class=“button“>利用規約に同意して送信する</button> </form>

このボタンを、お問い合わせのフォーム内の一番下に「利用規約に同意して送信する」というテキストを内包した形で配置したいとします。

1
2
3
4
5

<form class=“form“> <table class=“form__table“>...</table> <button class=“form__button-small button“>利用規約に同意して送信する</button> </form> 1 2 3

.form__button-small.button {
font-size: 13px;
}

しかしテキストが長すぎて見栄えが悪いため、このときのボタンのみフォントサイズを13pxに落としたい……という場合、Mixesによるマークアップが有効です。

.form .button {font-size: 13px;}

この他のスタイリングだと、上記のような書き方も考えられます。

ただしこの方法だと、もし「.form」内に複数の「.button」を配置することになった場合、意図しない「.button」にまで影響してしまいます。
また、Modifierクラスで対応することも検討できますが、あまり再利用する機会のない特異パターンの場合は不容易にModifierクラスを用意せず、Mixesで対応したほうが好ましいでしょう。

お手数ですが、よろしくお願いします。

難しい用語が中心だとわからないので、お手数ですが初心者にもわかるように、教えて頂ける方にお答えいただければありがたいです。
上から目線や、回答になっていない苦言などの回答はしないでください。
すぐに報告します。

行動規範の内容に同意します

回答1件

ベストアンサー

Mixesに関する情報非常に少ないですね。。。

LIG様の記事やBEM公式リファレンスやForumを見た感じだとMixesは「modiferにするほどでもないけど、レイアウト変えたいなぁ」って言う時に使用するための部品っぽいですね！

例えば、例にもあるように「ここだけボタンの中の文字数が多いからフォントサイズ小さくしたい」とか「ちょっとデザイン的にここだけmargin-leftをほかよりも少しだけ小さくしたい」などの時にしようするものっぽいです！
なので、
上記例でいうとformbutton-smallというクラスが使用されています。
命名は自由ですが、formの下にあるbuttonでかつ文字が小さい場合なので.formbutton-smallみたいな再利用「できない」クラス名にしてあるのだと思います。

ちなみに、そういう微調整のレイアウト系は全て一個にまとめていいとも思っていて、
FLOCSSというcssの設計概念だとutilitiesという物があります。
https://github.com/hiloki/flocss

僕は小さい部品たちは下のようにまとめています。
importantをつけているのは微調整が本当に最後の最後の手段だからです！
本当だとこういう部品系はつけないに越したことが無いです！（デザインが崩壊していくので！）

css
1.u-mT0  { margin-top: 0px!important; }
2.u-mT5  { margin-top: 5px!important; }
3.u-mT10 { margin-top: 10px!important; }
4.u-mT15 { margin-top: 15px!important; }
5.u-mT20 { margin-top: 20px!important; }
6.u-mT30 { margin-top: 30px!important; }
7.u-mT40 { margin-top: 40px!important; }
8.u-mT50 { margin-top: 50px!important; }
9.u-mT60 { margin-top: 60px!important; }
10.u-mT80 { margin-top: 80px!important; }
11.u-mB5  { margin-bottom: 5px!important; }
12.u-mB10 { margin-bottom: 10px!important; }
13.u-mB20 { margin-bottom: 20px!important; }
14.u-mB40 { margin-bottom: 40px!important; }
15.u-mB50 { margin-bottom: 50px!important; }
16.u-mL5  { margin-left: 5px!important; }
17.u-mL10 { margin-left: 10px!important; }
18.u-mL20 { margin-left: 20px!important; }
19.u-mL30 { margin-left: 30px!important; }
20.u-mR5  { margin-right: 5px!important; }
21.u-mR10 { margin-right: 10px!important; }
22.u-mR20 { margin-right: 20px!important; }
23.u-mR30 { margin-right: 30px!important; }
24
25.u-mAuto{margin: 0 auto!important;}
26.u-m10Auto{margin: 10px auto!important;}
27.u-m20Auto{margin: 20px auto!important;}

ちょっと長くなってしまいましたがそのような感じだと思います！
頑張ってください！

投稿2016/03/22 03:11

MasakazuFukami

総合スコア1869

退会済みユーザー

2016/03/22 10:10

ありがとうございます。＞＞＞ちなみに、そういう微調整のレイアウト系は全て一個にまとめていいとも思っていて、 FLOCSSというcssの設計概念だとutilitiesという物があります。 https://github.com/hiloki/flocss こんなものもあるのですね。ベム、スマックス、oocssでいっぱいいっぱいなのに、きりがないですね。そこまでやってらっしゃると頭が下がります。現場のフロントではそれが当たり前ですか？ベム、スマックス、oocssのいいとこどりで、SASSの基本が使えればやっと官僚化と思っていたのですが、現場はもっと進んでいるのでしょうか？下記のformbutton-smallの部分がmixesなのですね。 BEMだとformbutton_size_smallトモディファイヤーにしてマルチクラスだと思いますが、それではよくないのでしょうか？わざわざモディファイヤーを避けたほうがよい、理由やメリットがあるのでしょうか？また、結局モディファイヤーを使っていないだけであとは変わりませんね <button class=“formbutton-small button“>利用規約に同意して送信する</button>

MasakazuFukami

2016/03/22 10:27

>現場のフロントではそれが当たり前ですか？んーーーそうでもないですよ！プロジェクトの規模によって使ったり使わなかったりまちまちですね！結局、BEMもSMACSSもOOCSSもFLOCSSもcssを管理するためのもので、後から修正しやすかったり、壊しやすかったりするためにある決まりみたいなものです！なので2~3ページのviewを作るだけで、そこまで管理がなら必要ない時もあります！ >BEMだとformbutton_size_smallトモディファイヤーにしてマルチクラスだと思いますが、それではよくないのでしょうか？これに関してですが、問題ないと言えば問題無いです。ただ、やはり「管理」という点から見ると、modifierにするほどでもないかなぁという感じもしますこの辺は感覚値です！他のviewでも頻繁に使うようでしたらmodifierにしてもいいと思いますが、それがどんどん増えてくると「管理」するためにBEMを使用しているのに、管理できなくなってきてしまいます。とりあえず全ての元は「CSSの管理（壊しやすく直しやすい）」なので、その目的さえはずさなければ！ cssは誰でもかけるがゆえに壊れやすい言語ですので頑張ってください！ちなみに壊れやすいものをどうにかしようと世界中の人が頑張ってます（笑）そうやってできたのが先ほど上げたBEMなどです！長くなってしまって申し訳ございません！

退会済みユーザー

2016/03/23 01:14

>>> これに関してですが、問題ないと言えば問題無いです。ただ、やはり「管理」という点から見ると、modifierにするほどでもないかなぁという感じもしますこの辺は感覚値です！他のviewでも頻繁に使うようでしたらmodifierにしてもいいと思いますが、それがどんどん増えてくると「管理」するためにBEMを使用しているのに、管理できなくなってきてしまいます。つまり、mixesとは、モディファイヤーでマルチクラスでもよいが、モディファイヤーにあえてしないで、ＢＥＭでない一般的なＣＳＳのクラスを別に作ってマルチクラスにしたほうが、よいということですね。モディファイヤーをつかわないマルチクラスということですね。モディファイヤーは長いからよくないということでしょうか？

MasakazuFukami

2016/03/23 01:17

>つまり、mixesとは、モディファイヤーでマルチクラスでもよいが、モディファイヤーにあえてしないで、ＢＥＭでない一般的なＣＳＳのクラスを別に作ってマルチクラスにしたほうが、よいということですね。そんな感じの理解で問題ないと思います！ >モディファイヤーは長いからよくないということでしょうか？これはそういう意味ではなく、他の場所でも使い回すならmodifierでもいいという感じです！本当に一部だけ使うならmixesにするといいという感じです！

退会済みユーザー

2016/03/23 01:39

モディファイヤーは、コンポーネント（3つ以上ページ内で使いまわす部品）のみにつかうべきで、一、二度にか使わない部品に厳密には使うべきでないので、プレーンなCSSのセレクタをマルチクラスにすべきということなのですね。

MasakazuFukami

2016/03/23 01:41

>モディファイヤーは、コンポーネント（3つ以上ページ内で使いまわす部品）のみにつかうべきで 3つはあくまでも「各cssフレームワーク（BEMやSMACSSやetc...）」を作った人が設定した基準でしかないので3つにあんまりとらわれないでくださいね！ > 一、二度にか使わない部品に厳密には使うべきでないので、プレーンなCSSのセレクタをマルチクラスにすべきということなのですね。これはその通りだと思います！

退会済みユーザー

2016/03/23 03:29

ありがとうございました。＞＞＞モディファイヤーは、コンポーネント（3つ以上ページ内で使いまわす部品）のみにつかうべきで、一、二度にか使わない部品に厳密には使うべきでないので、プレーンなCSSのセレクタをマルチクラスにすべきということなのですね。上記はCSS設計の教科書に書いてあったことです。コンポーネントとは（3回以上ページ内で使いまわすWEBページじょうの部品のこと）。コンポーネントにモディファイヤーを使うのは正しいが、コンポーネント化していない、部品には使うべきでないということですね。理由他のviewでも頻繁に使うようでしたらmodifierにしてもいいと思いますが、それがどんどん増えてくると「管理」するためにBEMを使用しているのに、管理できなくなってきてしまいます。具体的になぜ管理しにくくなるとお考えですか？長すぎるからでしょうか？理由を教えていただければ幸いです。

行動規範の内容に同意します