うーん・・・

cssの見栄えをタブで整えないのは何故？

締切済

質問者：Hypnomatic
質問日時：2021/02/15 20:10
回答数：3件

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

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

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

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

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

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

.hoge｛

｝

【インデント】.hoge p｛

【インデント】｝

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

補足日時：2021/02/15 20:13
通報する

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

最新から表示
回答順に表示

No.3

回答者： wanderer1
回答日時：2021/02/16 15:33

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

（コンパイル時の設定によりますが）

- 0
- 件

通報する

No.2

回答者： naktak
回答日時：2021/02/16 15:02

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

セレクタが単純な親子要素だけで構成されるものだけではないからですね。
隣接セレクタもあるし、子セレクタと子孫セレクタは別な指定方法です。
書き方によっては大変複雑なセレクタ指定もできます。
ですから、あくまで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を検討された方がいいかと思います。
作る規模によっては、利用するのが当たり前になっていますし。