中規模開発におけるCSSの設定の工夫

こんにちは。

今回は、CSSの設定で大変な思いをしたので、失敗を共有します。

経緯としましては、

同じようなクラス名の要素が乱立し、適当にクラス名を付けてしまうと、知らぬ間にかぶってしまい、意図しないスタイルがついてしまうという状態で、それを解決したいというものです。

色々考えましたが、解決策として一番良いのは、styleを設定する際に
できるだけ、

#yousomei .kurasumei

とすることで、責任の範囲を最低限に保つというのが一番良い方法だと感じました。
親要素にidを設定し、classで設定したものは、親要素を経由して設定するという形です。

こうすれば、適当にクラスを設定したとしても、勝手にスタイルがつくことがありません。

ReactやVueを使おうか迷いましたが、結構制作した後だったので、
踏み切れず、現状でどうにかできないか試行錯誤した結果、この方法にたどり着きました。