個別CSSで既存のCSSを上書きする場合の書き方

[manabuyasuda]

各HTML専用のCSSファイル（以下個別CSS）内でComponentやProjectレイヤーを上書きするときにどんな書き方をするのがいいのか？

個別CSSはそのページがスコープになる（他のページでは読み込まれない）ので詳細度を気にする必要はほとんどないのかもしれない。
それよりも上書きのしやすさや、HTMLをいかに簡潔にするかを優先したほうがいいかもしれない。

.c-block {}
.c-block__element {}

.cp-block {}
.cp-block > .c-block__element {}

<div class="c-block cp-block">
  <div class="c-block__element">
  </div>
</div>

のように1つのブロックを指定して、CSS内で上書きするセレクタと結合子を指定してHTMLを簡潔にする。

[manabuyasuda]

BEM的に書く必要はないと思う。
必要なのは厳格さよりも、分かりやすさや簡潔さ。

BEMは特にクラス名が長くなるので、それを二重に書くのは適切ではない。

例えば.cp-block--modifierなどとすると、それ自体のBlockは存在しないし、BEMのルール的に判断が難しい。

基本的にはBEMで書くけど、冗長になりすぎない範囲で書くということにする。