概要
命名規則に基づいて似たようなクラス名のバリエーションがたくさんあるときに、属性セレクタでパターンマッチをつかって書いたら一括してできてエレガントそうな気配がします。
が、
たとえば属性セレクタによる指定で、 [class^='hoge'] {} という書き方だと、実は class="fuga hoge" という属性にマッチしない問題などがあるので注意という話。
説明
<button class="btn-normal">ボタン</button>
<button class="btn-like">いいね</button>
<button class="btn-submit">投稿する</button>
こういう感じでCSSフレームワークぽいものを作るときに属性セレクタで一気にやると楽ですよね。
[class^='btn-'] {
padding: 4px 8px;
border:1px solid #ccc;
border-radius:6px;
}
ただ、これは class 属性値の先頭に btn-xxxx を記述する前提になっていて、
下記のように製作者が意図しない使い方をされたときに破綻します。
<button class="is-dangar btn-normal">ボタン</button>
<button class="is-liked btn-like">いいね</button>
<button class="is-disabled btn-submit">投稿する</button>
属性セレクタによる部分マッチは、一見jQuery.fn.hasClass(); のようなノリで class 属性内のセレクタを配列化してひとつひとつに対して ^= してくれるように見えるんですが、実際には "is-dangar btn-normal" という文字列に対して評価していますので、class 属性の先頭に期待するセレクタを記述しないと反映されないという 暗黙のルールを利用者に強いる 羽目になります。
これを回避するには下記のように先頭にかぎらずどこかしらでマッチすればいいような指定も可能です。
[class*='btn-'] {
padding: 4px 8px;
border:1px solid #ccc;
border-radius:6px;
}
これはこれでいいのですが、下記のようなものにもマッチするおそれがあるので、やはり 暗黙のルール というか罠が存在していることになります。
<div class="btn-list"><!-- 意図せずここにもマッチしてしまう -->
<button class="is-dangar btn-normal">ボタン</button>
<button class="is-liked btn-like">いいね</button>
<button class="is-disabled btn-submit">投稿する</button>
</div>
このへんは想定している運用の内容次第ではありますが、 SASSなどの継承をうまく使い %btn {} のように共通化するか、 btn btn-normal のようにセレクタを疎に設計するようにするほうがよいのではないかと思います。
簡単なDEMO
スマートに省略して書いたような気になってハマったオジサンの備忘録でした。かしこ。