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

[autoxbc]

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

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

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

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

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

[dcsuibian]

Sass （新版 Scss 更好），Less

[ddcc]

我是说，有没有一种可能，有别的方式已经做到了这一点，并且更好，比如说 scss

[thedrwu]

vim 的 folding marker 可解

[autoxbc]

@dcsuibian #1
@ddcc #2
预处理器因为要实现嵌套语法，于是引入了缩进。我说的是，哪怕不用预处理器，直接写原生，也应该有缩进，因为这是 CSS 这种语言的自然属性

[autoxbc]

@thedrwu #3 这种缩进需要开发者对照 DOM 结构来写 CSS ，应该不是某种工具能自动实现的，当然我并不知道你提到的工具具体怎么工作

[Pastsong]

有没有一种可能，开发者可以不对照 DOM 结构来写 CSS ，你准备把 CSS 那些花里胡哨的选择器放在什么地方

[autoxbc]

@Pastsong #6 您是想说 tailwind 那种准内联写法么，那种抹除 CSS 选择器抽象层的做法不在这个讨论的语境里，这里是说有选择器抽象层的情况下，怎么处理这个抽象层的结构化

[eason1874]

CSS 并不认识缩进，你这样缩进只是方便人眼看，还有同名污染问题。其实 CSS 也有几种规范，代码可读的同时没有污染问题，以前比较流行的两种：

子选择器 .more2-item > .more2-block > .more2-img {}
双下划线 .more2-item__block__img {}

只是 CSS 规范不强制，而且容错性极强，小学生折腾几天都会改，所以 CSS 代码氛围像 PHP ，花里胡哨的占多数，规规矩矩写的少

[thedrwu]

@autoxbc 不是自动，而是手动插入一个折叠的标记，可以嵌套折叠。这种情况下多层折叠比多层缩进好用。

[yyfearth]

@autoxbc SCSS/LESS 都可以嵌套 比你这样缩紧要明了的多

.root {
a.link {
...
}
}

[autoxbc]

@yyfearth #10 我也用预处理器，也用预处理器提供的嵌套，不过在非嵌套的部分，我继续保持按照 DOM 结构缩进的做法，这里既没有矛盾也没有替代关系

[qeqv]

.more2_item {}
.more2_item > a.more2_lk {}
.more2_item > a.more2_lk > .more2_img {}
.more2_item > a.more2_lk > .more2_img > .more2_info {}
.more2_item > a.more2_lk > .more2_img > .more2_info > .more2_info_name {}

[releaseme]

https://drafts.csswg.org/css-nesting/

在做了在做了

[kaiki]

我认为能把同一个元素的 css 写在一起并且和其他的分割开来就已经是最大的仁慈了，看别人 CSS 代码的时候他这么做我就觉得谢天谢地了，改一个地方能搜出好几个文件里都有，覆盖得乱七八糟的简直头疼。

[cssk]

楼主这种缩进才叫恶心

[Procumbens]

CSS 并不是编程语言……

[herozzm]

缩进只是写的人方便，换人来也是屎山，对照 dom 也难得理明白，而且缩进难看

[herozzm]

关键有些缩进属性也可能被其他 dom 共用，逻辑也没法体现

[retrocode]

有没有一种可能, 我是说可能, 元素位置你不用暗示, 加个 cv 下父元素名和一个空格就可以做到
进来前我以为是小白正准备推荐 scss, 结果你这个缩进方法直接把我灵魂都干碎了

[wonderfulcxm]

scss 生成的 css 是选择器之间有层次的，你这样写形式上有层次，逻辑上是没有层次的，很容易坑到自己。