Vueコンポーネントに合わせたCSSの命名規則を考えた - Qiita

これまでSFC(Single File Component)ではBEMによる命名を使っていましたが、コンポーネントを書くうえでは冗長だと感じました。そこで、ECSSの考え方をベースとして、SFCに合わせてカスタマイズする形に落ち着きました。 SFC向けCSSということでSFCSSと呼ぶことにしています。 scopedでも命名規則は必要 まず前提として、<style scoped>でコンポーネントのスタイルが外に漏れないとしても、命名規則は必要になります。scopedだからといって適当に書いたクラス名のツケは、きっとあとあと払うことになるでしょう。 公式のスタイルガイドに書かれているように、サードパーティのCSSが適用されないようにするためにも、コンポーネント固有のプレフィックスなどをつける必要があります。 ただしSFCでの開発は、通常のwebサイトとは性質がことなりますので、必ずしもプレフ

[tacamy]

variantの先頭なんで-じゃなくて_なんだろ？って思ったら、ここ読んでなるほど "variantは:classで付け外しする用途が多いので、クオートが不要な文字列で構成しておくと都合がよいです。"