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
このボタンを、お問い合わせのフォーム内の一番下に「利用規約に同意して送信する」というテキストを内包した形で配置したいとします。
1
2
3
4
5
.form__button-small.button {
font-size: 13px;
}
しかしテキストが長すぎて見栄えが悪いため、このときのボタンのみフォントサイズを13pxに落としたい……という場合、Mixesによるマークアップが有効です。
1
.form .button {font-size: 13px;}
この他のスタイリングだと、上記のような書き方も考えられます。
ただしこの方法だと、もし「.form」内に複数の「.button」を配置することになった場合、意図しない「.button」にまで影響してしまいます。
また、Modifierクラスで対応することも検討できますが、あまり再利用する機会のない特異パターンの場合は不容易にModifierクラスを用意せず、Mixesで対応したほうが好ましいでしょう。
お手数ですが、よろしくお願いします。
難しい用語が中心だとわからないので、お手数ですが初心者にもわかるように、教えて頂ける方にお答えいただければありがたいです。
上から目線や、回答になっていない苦言などの回答はしないでください。
すぐに報告します。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2016/03/22 10:10
2016/03/22 10:27
退会済みユーザー
2016/03/23 01:14
2016/03/23 01:17
退会済みユーザー
2016/03/23 01:39
2016/03/23 01:41
退会済みユーザー
2016/03/23 03:29