質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

命名規則

命名規則は、プログラミングする際に識別子の名称である文字列を決める表記法のことです。ネーミング規則・ネーミング規約・命名規約とも呼びます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

0回答

1001閲覧

SCSS(SASS)にて、子要素を持つブロックのスタイルの記述場所

9_ku_ku_9

総合スコア3

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

命名規則

命名規則は、プログラミングする際に識別子の名称である文字列を決める表記法のことです。ネーミング規則・ネーミング規約・命名規約とも呼びます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2021/04/24 07:13

編集2021/04/28 13:38

前提・実現したいこと

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について皆様の考えを聞かせていただきたいです。
また、よりよい方法や普段の書いているやり方などありましたら教えていただきたいです。
よろしくお願いします。

※勉強し始めて間もないため、命名や記述にミスがあれば訂正いたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問