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

[autoxbc]

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

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

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

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

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

[Jooooooooo]

怎么同级的东西缩进还不一样...

令人迷惑

[dNib9U2o8x]

这缩进看的我浑身难受

[musi]

你缩进到最后一行都不够你缩进的

[MarquesMa]

其实这种想法是个陷阱：很多人发现有嵌套就觉得很好用，结果导致大部分 SCSS 嵌套很多的项目都不好维护。

为什么？

因为 HTML 本身有嵌套，CSS 再重新写一遍完全一样的嵌套关系，其实就是隐形地把同一套逻辑写了两遍，是一种没有益处的高耦合做法。当你需要改 HTML 的时候，就发现 CSS 各种挂，而且优先级也特别混乱要么重复叠类名，要么 important 。

虽然 Tailwind 和 Styled 之类的方案已经解决了这个问题，其实只说 CSS 的话 BEM 也解决了这个问题：不管 HTML 嵌套多少次，BEM 只嵌套一次，也就是只有一层 namespace 加上一个 selector 。这样既解决了冲突问题，又解决了上述的嵌套问题。因此移动元素的时候样式就很少挂，非常灵活，而且优先级就那两三个，一目了然。

[davin]

能 show 下 OP 的 HTML 对应结构么？这种 more1, more2, more3 ... moreN 在 HTML 中的结构是逐层嵌套呢，还是顺序使用的？如果始终自己一个人开发，怎么玩都开心。但涉及到多人协作的时候，人家可能随手复制 class 就去用了，结果发现样式没起作用，心里那会是什么酸爽滋味😭

[SilentDepth]

因为大多数情况下嵌套缩进并不是刚需。HTML 结构和样式定义有时并不是同一视角。当然有胜于无，多一个选择总是好事。

另外，楼主有没有考虑过匹配优先级的问题

[TomatoYuyuko]

那为什么不用更完善的 scss 呢，再说 css 完全可以和 dom 结构解耦啊

[libook]

一个 class 被不同层级的 dom 使用，这种写法可能就不适合了。

有可读性优化的意识是好的。

[iamzuoxinyu]

CSS 全称 Cascading Style Sheet ，不是 Cascading Style Tree 。

[autoxbc]

@kaiki #14 这种写法可以解决代码散乱问题，因为模仿 DOM 结构决定了相关的代码必然聚集在一起

[autoxbc]

@cssk #15 展示一小段代码你们可能感觉不到好处，当代码规模大了会发现有种结构化的美感

[autoxbc]

@herozzm #17 不不，只要遵守这个约束，换人来写会得到一样的结构，这是可维护的基础

[autoxbc]

@herozzm #18 共用的 class 一般都在类似的层级，实践中写在哪个部分都可以，不用复制多处。而且因为故意没有用嵌套语法，所以写在哪都能正常发挥作用

[autoxbc]

@wonderfulcxm #20 就是故意避开嵌套的，嵌套会导致选择器链严格化，class 被嵌套会使作用范围变小。而且嵌套和非嵌套可以混写，使严格化成为可选项

[autoxbc]

@ymcz852 #22 这个不仅仅提供了定位路径，还是一种代码组织约束，使得相关代码必须聚集在一起，那么会减少非常多的 important 乱象

[autoxbc]

@rioshikelong121 #23 如果编辑器可以分析 DOM 结构，理论上可以自动生成这个缩进

[autoxbc]

@justfindu #24 实践当中很多用 class 的场景实际应该用 id ，这个写法对 id 这种唯一结构比较有效。对 class 的场景，应该说也不是所有 class 都是平级的，还是会体现某种结构的，可以按照个人喜好细化约定

[autoxbc]

@machunning9843 #25 这个不矛盾吧，我也没说有结构了就不要拆分，改搞组件还可以搞，组件里也有结构，还是有缩进的需要

[autoxbc]

@digimoon #29 什么鬼，#12 那种不是要写到吐血

[autoxbc]

@adoal #30 CSS 也是有层级的，只是大多数人用扁平化来写，丢失了层级结构