CSSを同時に簡単に変えられるようにしておきたい。定義方法と命名規則

cssの名前がどうしても分かりにくくなる。
何を目的としたcssか分かり安くできるように考えた。

自分の場合、railsの分岐によってcssの色を変える必要がある。

最初は、orangeを、

sample.scss

my-oragnge{
 color: orange;
}

のような定義にしていた。しかし、これでは一度定義されたものを変えるのが非常に大変。

なので、第２弾として、色自体を定義。

sample.scss

:root {
  --my-orange : orange;
}

.my-orange {
  color: var(--my-orange)
}

これで、rootを変えれば全て変更ができる！
けれども、例えば、買う側と販売側のマイページで色を変えたいなどの時は、これでは使えないし、そもそもorangeを定義するんじゃなくて、

買い手(buyer)：orange;
売り手(seller)：blue;

みたいな定義の方が分かり安い。

なので、my-orangeではなく、

sample.scss

:root{
    buyer-main-color:orange;
    seller-main-color:green;
}

.buyer-main-color {
 color : var(--buyer-main-color);
}

.seller-main-color{ 
 color : var(--seller-main-color);
}

とかの方が、後から見ても色付けのclassだと分かりやすいし、何を目的とした色かも分かりやすい。