【iOS版アプリ】不具合のお知らせ

こんばんは、スタイルシートの記載についての質問(疑問)です

スクリプトでは、ifやfor内の記載等々について、インデントを入れ見栄えを整えます

また、HTMLであれば、内包する要素について、同様にインデントをいれて見栄えを整えます

しかし、スタイルシートについてインデントを整える慣習は見受けられませんが、何故でしょうか?
スタイルシートの場合、タグやクラスにまとめて値を指定するため、あまり意味がないからでしょうか?

<body>
【インデント】<div class="hoge">
【インデント】【インデント】<p></p>
【インデント】</div>
</body>

例えば上記のようなHTMLにて、divタグと内包するpタグに対して、それぞれ別のスタイルシートの値を設定する場合、下記のほうが、ぱっとみた時に、親と子の関係が分かりやすいと思いませんか?

.hoge{



【インデント】.hoge p{

【インデント】}

質問者からの補足コメント

  • クラスやタグ内に記載するときにはインデントを入れるのは承知してますが、親子の要素同士でインデントを入れないのはなぜかという意味の質問です

      補足日時:2021/02/15 20:13
gooドクター

A 回答 (3件)

SCSSやSASSで記述しておいてCSSを書き出すため、インデントがないのではと思いますが。

(コンパイル時の設定によりますが)
    • good
    • 0

確かな正解を回答することはできませんが、ご参考程度に。



セレクタが単純な親子要素だけで構成されるものだけではないからですね。
隣接セレクタもあるし、子セレクタと子孫セレクタは別な指定方法です。
書き方によっては大変複雑なセレクタ指定もできます。
ですから、あくまで1つのセレクタ指定に対してのデザイン定義であることになります。

また、基本的には構造とデザインは本来、別次元のものであり、密になってはならないという考えがあります。
様々なCSSを複数活用することによってデザインを構成させるため、事あるごとに親子関係を意識するCSSを乱立して用意するのはナンセンスです。
それが、CSSのセレクタは極力深い指定をしてはらない、極力詳細度の高いセレクタ指定(IDセレクタ、要素セレクタ)をしてはならないと言われる所以です。

それでも親子関係が構成されてしまうシーンもあり得るわけですが、
先に述べた通り、様々なセレクタがある以上、特定のセレクタを
指定した時だけインデントするのはおかしな話です。
例えば.hoge:hover があったら、それはインデントするのですか?
.hogeに関わるものですが。という話になります。

また、親子表現をした上で書くならネストであるべきなので
.hoge {
 /* css */
 p {
  /* css */
 }
}
といった書き方が直観的でしょうが、CSSは先の説明にある特性や仕様の通り、そういった表現はできません。
インデントはネストされるものがあるから行うものであり、
異なる文をインデントするのは、どんな言語を取ってみてもおかしいです。

しかし、同じように思っている人は沢山いるわけです。
そこで、あなたが仰っているのは、SCSSによって表現することが可能です。
当然、それをCSSにコンパイルする環境を用意する必要があります。
https://spyweb.media/2017/12/20/scss-nested-rule …

どんなにCSSのバージョンが上がろうと、破壊的な仕様変更は行われないと思うので、どうしてもネスト表記によってCSSを管理・構成したいならばSCSSを検討された方がいいかと思います。
作る規模によっては、利用するのが当たり前になっていますし。
    • good
    • 0

セレクタを見ればわかるから無駄なだけじゃない?

    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

gooドクター

このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング