Discussion on: data-attributes vs. BEM

👏 Attribute selectors are great. I once wrote a small post on using them to handle responsive styling (shameless self-promotion 😉)

One small thing regarding multiple modifiers. The syntax should be ~= to avoid value name collisions e.g.

[data-color*="lightgray"] { color: whitesmoke; }
[data-color*="gray"] { color: gray; }

<input data-color="lightgray" />
<input data-color="gray" />

Both input will turn out gray because gray is found in both lightgray and gray

If you use ~= (exact word match) you avoid this problem

[data-color~="lightgray"] { color: whitesmoke; }
[data-color~="gray"] { color: gray; }

Thanks for sharing