CSSの書き方への質問
質問
ある人は書いてください。
複数ページにまたがって使うCSSのルールも設けた方がよさそうakix.icon
例えば、akiroom <span class="pro">Pro</span>というようなPro表示のラベルがあったとして、設定画面でもOCR機能の説明欄でも使っている場合など
以下のように、bodyに入れることでページのクラス名と被るのを避けられそう
code:scss.css
body {
.pro {
@extend .badge .badge-primary;
}
}
/pro ページとかぶるということですね。理解しました。 洛西.icon
上の場合は、".pro"がちょっと一般的すぎますね。 たぶん、ラベル(or badge?)だと思うので、クラス指定は label label-pro または label pro などにして、CSSは
code:scss
label {
&.pro {
}
}
label {
&.label-pro {
}
}
などと書くのをオススメします。
label じゃねー、iconだっていう場合は
code:scss
.pro-icon {
}
とか。
グローバル空間に放り出すクラス名は極力少なくしましょう。
また共通部品（たとえば、ユーザーアイコン）などは、react componentにするのもオススメします。そうするとファイルを作る必要があるので、少なくともファイル名はユニークになるからクラスもユニークになることが多い。
例:
コンポーネント: UserIcon クラス名: user-icon