くまだどうも、くまだです。
FLOCSSやBEMで使うmodifierの書き方を、CSSのカスタムデータ属性で指定するメモ。
カスタムプロパティについては前にも書きました。
modifierをカスタムデータ属性で指定
例えば普通に書くと、
<div class="boxWrap boxWrap--col3">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
.boxWrap {
inline-size: 100%;
--gridGap:20px;
display: grid;
grid-template-columns: repeat(var(--gridCol),1fr);
gap: var(--gridGap);
}
.boxWrap.boxWrap--col3 {
--gridCol:3;
}
.box {
inline-size: 100%;
block-size: 100px;
background-color: red;
}
modifierの部分「boxWrap–col3」のところをCSSのカスタムデータ属性に置き換えます。
<!-- カスタムデータ属性 -->
<div class="boxWrap" data-col="col-3">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>.boxWrap {
inline-size: 100%;
--gridGap:20px;
display: grid;
grid-template-columns: repeat(var(--gridCol),1fr);
gap: var(--gridGap);
}
.boxWrap[data-col ="col-3"] { /* カスタムデータ属性で指定*/
--gridCol:3;
}
.box {
inline-size: 100%;
block-size: 100px;
background-color: red;
}modifierが複数、つまりカスタムデータ属性に複数指定する場合は、
<div class="boxWrap" data-col="col-2 col-3 col-4">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>.boxWrap {
inline-size: 100%;
--gridGap:20px;
display: grid;
grid-template-columns: repeat(var(--gridCol),1fr);
gap: var(--gridGap);
}
.boxWrap[data-col ~="col-2"] {
--gridCol:2;
}
@media (min-width: 768px) {
.boxWrap[data-col ~="col-3"] {
--gridCol:3;
}
}
@media (min-width: 992px) {
.boxWrap[data-col ~="col-4"] {
--gridCol:4;
}
}
.box {
inline-size: 100%;
block-size: 100px;
background-color: red;
}
という感じ。
modifierのクラスが複数つくとコードが見にくいので、カスタムデータ属性を使うのもあり。
ここまで読んでくださりありがとうございました。