前提・実現したいこと
BEMに乗っ取って命名し、SCSSでスタイルを記述しています。
子要素を持つブロック自体にもスタイルを適用させたいと思っているのですが、現在の記述方法ではネストの関係上見づらいのではないかと思っていて、別の方法で記述したいのですが、一般的に解釈に問題がないか教えていただきたいです。
下に詳細を載せます。
また、それ以外にきれいな書き方があれば教えていただきたく思います。
該当のソースコード
html
1<body class="body"> 2 <div class="block"> 3 <a class="block__link"></a> 4 <p class="block__txt"></p> 5 </div> 6</body>
当初の書き方
SCSS
1.block{ 2 color:red; 3 4 &__link{ 5 color:blue; 6 } 7 &__txt{ 8 color:green; 9 } 10}
ブロックに適用するスタイル(color:red;)と
子要素に適用するスタイルとがいて、読みづらいと感じました。
変更しようと思っている書き方1
SCSS
1.body{ 2 // bodyのエレメントとして解釈 3 &__block{ 4 color:red; 5 } 6} 7 8// ブロックとして解釈 9.block{ 10 &__link{ 11 color:blue; 12 } 13 14 &__txt{ 15 color:green; 16 } 17}
block内にblockを定義するのは好ましくないですが、.blockをbodyのelementとしてとらえてスタイルを記述し、その下にブロックとしてとらえた.blockの子要素にスタイルを定義しています。
同じクラスを別の別の解釈でとらえて2度定義するのは問題ないのでしょうか。
変更しようと思っている書き方2
SCSS
1 2// ブロックとして解釈 3.block{ 4$this: &; //変数に.blockを格納 5 6 #{$this}{ 7 color:red; 8 } 9 10 &__link{ 11 color:blue; 12 } 13 14 &__txt{ 15 color:green; 16 } 17}
自身を格納した変数を再度呼び出し、字下げを揃える方法。
可読性が良いかといわれると微妙ですが、字下げは統一されていてぱっと見はきれいなのではないかと思います。
質問
自分なりに統一されていれば問題ないと言われればその通りかもしれませんが、
当初の書き方、また方法1、2について皆様の考えを聞かせていただきたいです。
また、よりよい方法や普段の書いているやり方などありましたら教えていただきたいです。
よろしくお願いします。
※勉強し始めて間もないため、命名や記述にミスがあれば訂正いたします。
あなたの回答
tips
プレビュー