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

[autoxbc]

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

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

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

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

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

[SilentDepth]

@autoxbc #78 BEM 有什么不好吗

[autoxbc]

@SilentDepth #81 BEM 是种命名方式，不是组织方式。对于 BEM 的 Block ，和其他 Block 的组织关系，还应该用这里的缩进来描述； BEM 中的 Element ，和 Block 中的其他 Element 的组织关系，可以继续用这里的缩进来描述

[Jooooooooo]

@autoxbc 显然不是一个好的代码格式管理方案. 不小心敲到了得 debug 多久呀.

[SilentDepth]

我不理解。

首先，CSS 用缩进忠实地体现 DOM 结构并没有什么好处。一来，CSS 选择器所表达的层次结构并不总是与 DOM 渲染结构相符，如果你使用 Atomic CSS 几乎没有层次的问题，而如果你使用 BEM 则选择器本身就体现了层次，用不着缩进。二来，纯静态的样式就罢了，伪类选择器怎么办，它算什么层次呢？如果使用 BEM ，两种 block 互有嵌套的时候要怎么缩进？

其次，「如果没有缩进，所有语句胡乱堆砌在一起」，但缩进了只是改变了水平位置，没改变垂直位置啊。相同业务主题的样式放在一起，它们左边有多少空格能造成什么本质区别呢。「无数人抱怨 CSS 不可维护，就是找不到应该从哪里入手修改」，这……是不是应该学习一下开发者工具怎么用。

以及，所有 CSS 方言都实现了嵌套语法，甚至 CSS 自己的嵌套特性也已在路上。这种情况下，你这种「不表达嵌套的缩进」是否会干扰对匹配优先级的判断呢（以 Sass 的话来说，相当于所有 ruleset 都隐含了一个 @at-root ）。现在大多数编辑器都有结构树显示功能，这种缩进在结构树里是平铺呢还是折叠呢？如果和正儿八经的嵌套语法放在一起，还要怎么表示呢？

[autoxbc]

@SilentDepth #84 一种解决方法不是解决所有问题的，只要解决希望解决那部分就可以了。就像英语语法只能解释一半的语言现象，另一半不合语法也不用强拗。拿出几个边界例子来说一个简单的缩进风格无法匹配所有情况，所以干脆完全不要缩进了，这是不可取的

CSS 的结构不总是与 DOM 完全一致，但是大多数情况的一致性是很好的，这是我长期实践的结论。准内联的 tailwind 风格我并不反对，只是不在这个语境里。BEM 的层次是个局部的层次，整个 DOM 显然比 Block 复杂多了，需要一个整体结构。伪类是同级结构，一般用嵌套写法放入选择器所在语句块的内部，重复一下，缩进写法不是反对嵌套，我自己就是该嵌套就嵌套，不该嵌套照常缩进。如果两个 Block 互有嵌套，可以随意按照自己的喜好来写，约束是提高可维护性的，不是难为人的

显然这里没有人不熟悉开发者工具，但是你见过那种同一个选择器在文件 10 行写了一堆，又在 100 行写了一堆，又在 500 行写了一堆，然后在另一个文件里又写了一堆么。用我的缩进写法，你只能写在同一个位置，这就是代码组织约束

嵌套给了你严格化的选择器链，但你不会总是希望这种严格化，当和缩进混写时，只要简单的把语句拿出嵌套就行了，一个子元素的语句块，在嵌套里缩进到什么位置，在嵌套外就缩进到什么位置，一个字符都不用修改

编辑器是为人服务的，人不用为编辑器考虑。实践当中，我完全不折叠任何代码块，不管是嵌套的还是仅缩进，我需要一眼看出代码的整体结构。如果有需要，相信也是可以做出折叠插件的，毕竟这里的层级逻辑是很清晰的

[gaodeng]

楼主，你这根本不是在写 CSS ，你的缩进太美了，你是在写诗歌，这是艺术。你简直就是个天才。这帖子可千万别被歪果仁看到，我怕他们学去了 🐶

[hackfly]

vs 就是这样缩，老难搞，每次都要手动对齐； CSS 根据迭代器就可以，为啥要搞锁紧来表明层级

[x86]

你这缩进个 10 行以上看的头都要炸裂了

[autoxbc]

@x86 #88 我给本站写的样式表的最大缩进就是 10 Tab ，全依赖这种缩进我才能持续维护

[learningman]

有个经典类名 clearfix ，不知道楼主打算放在哪

[autoxbc]

@learningman #90 对结构无关的抽象 class ，一般集中放在文件开头，这种很少超过 20%。剩下 80% 在 DOM 中有固定位置的，适合按照这个方法组织代码

[autoxbc]

@learningman #90 统计了一下，我自己维护的本站 UserCSS 一共 643 行，抽象 class 占 78 行，约为 12%

[kchum]

那 minified 时该怎样体现？

[GeruzoniAnsasu]

我不理解

tag 另算，class 完全是多对多、无层次的

<item class="margin-horizon-10 margin-vertical-20" >
<item2 class="margin-horizon-20 margin-vertical-10" />
</item>
<item class="margin-horizon-20 margin-vertical-10" >
<item2 class="margin-horizon-10 margin-vertical-20" />
</item>

是完全有可能出现的，那这 4 个 class 该怎么缩进？

[GeruzoniAnsasu]

如果这算那种「抽象 class 」，那就会与「 DOM class 」分开写在不同位置，要在脑子里同时处理这两个部分就很困难

而且就算这种方式只用来组织那些「与 DOM 绑定的 class 」，那当 DOM 是动态的时候也不一定能保证写对啊，意义何在呢

我绝不会试图把本来就 mesh 结构的东西写成树形

[GiantHard]

楼主的主要使用场景是维护 UserCSS ，通常需要写大段样式，但是现在更多人的使用场景是编写 component scoped css ，再加上各种 UI 库的使用，基本上就很少写大段的样式表了。

[chnwillliu]

如果 class 和 DOM 有唯一对应性，其实利用 SASS 的嵌套结构或者直接 css 的后代选择器重复 parent 路径也未尝不可，啰嗦了一点罢了，但也是体现了 DOM path ，额外增加的权重也无所谓啊反正你是一一对应不是。

如果不想嵌套选择器，那 BEM 命名就很好呀，也不用缩进了。

我觉得这不成问题的主要原因还是，前端都在搞组件化，样式都变成 scoped 的，随组件一起管理。全局样式文件里就最基本的 reset, typography 相关的。你说的 class 和 DOM 对应的样式，都在组件里放着，组件拆得细，单个样式表就非常小。组件范围内要定位 class 对应的 DOM 就非常简单啊。稍微大一点的组件，BEM 或者 SASS 嵌套就搞定了。

缩进体现层级的方案在传统的多页应用里可以实践，但 Vue, Angular, React 里完全没必要。

[lneoi]

与 DOM 结构保持一致的麻烦在于 DOM 结构一旦更改， 需要花大力气同步 CSS 。
如果强调复用性或者原子化，就很难与 DOM 结构保持一致，做到部分片段结构一致大部分项目代码还是有的吧。

[ACVV]

less 做到了，我一个产品狗都知道

[lneoi]

想了一下，Tailwind 方案不就是解决楼主的这种需求。与 DOM 结构一致，也省去了同步 CSS 。普通方案可能还要反复看 CSS ，原子化的写法可以从 DOM 上直接可读可改了。