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

[autoxbc]

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

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

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

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

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

[autoxbc]

@yyf1234 #31 我日常维护 200 个 CSS ，要是真的累的要死也坚持不住吧

[autoxbc]

@marcong95 #32 如果你感觉到了语义，那么就是有语义，这不是错觉

[autoxbc]

@MAGA2022 #33 因为我这么写好多年了。你看这么多人看一眼就开喷，我一点不急，好用不好用那是真实的感觉，伪装不来

[autoxbc]

@cmdOptionKana #35 不认可没关系，我就这么一说，大家这么一看，等下次维护 CSS 抓狂时想起这个来，愿意试一试就行

[autoxbc]

@phxsuns #36 这里没用嵌套包起来，复用的代码写在哪里都行，实践当中我会写在靠前的位置，复用的位置留一个只有选择器语句的空段落

[autoxbc]

@Me7426 #37 我这个是代码组织约束，和你说那几个都不矛盾，而且我这个只是缩进风格，不用引入任何东西

[autoxbc]

@Blacate #40 嵌套是嵌套，缩进是缩进

[autoxbc]

@Jooooooooo #41 如果缩进不一样，那就不是同级的

[guzzhao]

https://www.w3.org/TR/css-nesting-1/
你这么缩进感觉前后关系不清楚,css nesting 感觉就不错,用 postcss 插件转换,但是不知道为什么 vscode 还不支持,文件格式时 css 的话 vscode 飘红

[autoxbc]

@musi #43 我写很多年了，实践当中末级元素很少缩进到右半个屏幕

[autoxbc]

@davin #45 这个例子不是从头开发，是京东首页猜你喜欢部分的代码，我刚好要适配这个瀑布流到宽屏，写了一段 UserCSS ，随手就截图了。more2 不是我命名的，我本意是介绍这种缩进风格，没想到很多人纠结这个命名

[autoxbc]

@SilentDepth #46 因为这个缩进风格或者说代码组织约束不改变任何语义，所以应该不涉及优先级问题，除了因为更优良的组织结构协助维护者定位代码，可以少写很多 important

[autoxbc]

@TomatoYuyuko #47 用 scss 也可以用这个缩进风格啊，难不成用了 scss 就必须全部嵌套，我本来也是用 postcss 的，嵌套和非嵌套混写的

[autoxbc]

@libook #48 一个 class 共用时，我会把主体写在靠前的部分，后面共用的位置放上一个只有选择器的空段落占位

[autoxbc]

@iamzuoxinyu #49 Tree 是不是更好

[SilentDepth]

@autoxbc #72 哦，我刚注意到你这只是缩进，不是嵌套。那……何必呢，className 本身不一定要还原 HTML 结构的

[autoxbc]

@guzzhao #69 这个缩进描述的就是前后关系，怎么又不清楚了，楼上都理解了这里就是一棵 Tree ，还有比 Tree 更好的描述前后关系的么

嵌套是另一回事，嵌套会导致选择器链严格化，而且是强制的。非嵌套的缩进和嵌套混写使得严格化成为可选项

[autoxbc]

@SilentDepth #76 还原 DOM 结构使得新增的语句有准确的放置位置，代码就不会轻易腐败。层叠样式表一旦层叠失控，后面就是不归路

[Jooooooooo]

@autoxbc 敲错一个空格查问题岂不是查半天?

[autoxbc]

@Jooooooooo #79 我是 Tab 派的，没敲错过