CSS 的缩进写法没有普及令我感到诧异

[autoxbc]

CSS 作为一种编程语言，自然有与其对应的缩进写法，类似这样

这个写法暗示了选择器命中元素在 DOM 中的位置，也给维护对应语句提供了定位路径

如果没有缩进，所有语句胡乱堆砌在一起，就是一座屎山。无数人抱怨 CSS 不可维护，就是找不到应该从哪里入手修改，只能碰运气搜索一下，不久就放弃了，然后在文件末尾新启一行，糊上新的屎

我自己给常用的 200 个网站编写 UserCSS ，其中最长的(刚好是本站)有近 700 行，短的也有几十行，如果没有缩进，维护这些 CSS 不可想象

这种写法如此自然，以至于我想象不出为什么很少有人这么写，不是本该如此吗

[cslive]

直接用 less 完事，浏览器直接可用

[ymcz852]

vscode 有 css peak 插件，在 html 属性里点击类名、ID 等可直接跳到对应的 css 定义

[rioshikelong121]

我挺讨厌这种缩进写法的。而且编辑器比较难帮你自动进行这种缩进。

[justfindu]

可是 class 都是平级的 为啥你要分层 而且这个缩进也不对啊 你要用 scss 或者 less 倒是可以理解

[machunning9843]

这样写 css ，代码多了一样不好维护，应该在组件级拆分，保证组件 css 样式不过多。

[yaphets666]

绝对不能有缩进这种东西

[netnr]

是的，分模块是最好的办法
另外 VS 支持 CSS 缩进排版

[sujin190]

丑，说明大家还是有点审美的

[digimoon]

这缩进也太恶心了，要表明关系我都是用#12 这种

[adoal]

CSS 是没有层级的，有层级的是 DOM

[yyf1234]

你这种写法才令别人感到诧异，看的累的要死

[marcong95]

首先 CSS 不是编程语言，只是样式表，没有任何控制结构。

你这种写法没有语义，但是又营造了一种有语义的错觉，这目测就是这种写法不普及的原因吧。

你这 .more2_info 是对整个页面有效，而不是仅对 .more2_item .more_info 有效那你万一再写了一个 .more3_item .more_info 呢？从你这命名来看，我也不奇怪会有这种情况的发生了，虽然没有根据，但是我总感觉变量名或者类名这种出现编号性质的数字，就差不多是屎山的标志了

[MAGA2022]

你是怎么做到这么自信的

[weixiangzhe]

less/scss 编译出的层级太深了，我同意 op 的意见

[cmdOptionKana]

综上所述，楼主提出的缩进并非显然、一致认可的好方式，而是属于见仁见智的“偏好”而已，因此没有普及这种写法不需要诧异。

[phxsuns]

css 是要讲究样式复用的。你这样写，那复用的样式怎么办？

[Me7426]

CSS module ，CSS inJS ，#8 提到的选择器规范，以及#
13 提到的原生嵌套，哪个不比你这缩进好，Python 写多了吧？

[XCFOX]

css in js 的写法没有普及令我感到诧异
jsx 作为一种编程语言，自然有与其对应的样式写法，类似这样: https://emotion.sh/docs/css-prop

这个写法明示了样式目标元素在 DOM 中的位置，也不用给维护对应语句提供定位

如果样式与结构分离，所有 css 胡乱堆砌在一起，通过 className 与 element 绑定，就是一座屎山。无数人抱怨 CSS 不可维护，就是找不到应该从哪里入手修改，只能碰运气搜索一下，不久就放弃了，然后在文件末尾新启一行，糊上新的屎

我自己给常用的 200 个网站编写 UserCSS （不是），其中最长的(刚好是本站)有近 700 行，短的也有几十行，如果没有 css in js ，维护这些 CSS 不可想象

这种写法如此自然，以至于我想象不出为什么很少有人这么写，不是本该如此吗

[XCFOX]

个人感觉在现代前端应用把 html 结构和 css 样式分离就是个错误。
Flutter 、SwiftUI 、WPF 都是直接在 element 上加样式的。

关注点不分离之后开发和维护轻松多了。
目前使用 Utility-first 的 tailwind 、windi 或者 css in js 的 emotion 等库都能轻松做到关注点不分离。

[Blacate]

可能你想要的是嵌套写法？