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

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

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

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

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

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

autoxbc

2022-05-12 16:46:48 +08:00

@GeruzoniAnsasu #95 如果你大量写抽象 class ，那你的项目里抽象 class 就是主体，反之，抽象 class 可能很少，要看你的开发习惯。我不会强迫你接受，不过你也不能假定这一定有很大的思维负担，毕竟我已经实践了很多年

就算是动态 DOM ，新的元素出现在哪里也是确定的，元素在哪描述元素的样式就在对应的位置

至于这个结构到底是 mesh 还是 tree ，我的实践说明是以 tree 为主。如果你可以设计出一种与 mesh 对应的 CSS 文件结构，我也鼓励你写成那种结构，无论如何，线性的连续堆砌不是种好的结构

autoxbc

2022-05-12 16:57:59 +08:00

@GiantHard #96 我的场景确实主要是 UserCSS ，不过这些 UserCSS 显然都对应了真实的主流的网站。如果他们的开发没生成这些 className ，没生成那些大段的超长的有明确 className 的 CSS ，显然我的工作就几乎无法进行。这么看的话，到底什么是真实的主流的开发场景，还真不好说

autoxbc

2022-05-12 17:12:43 +08:00

@chnwillliu #97 组件化确实把问题解决了----一部分，不过并没有完全消失。组件里也有节点，有节点就有结构，有结构就有样式描述的结构

假设 <html> <head> <body> 这三个元素构成一个组件，你会怎么写 CSS 呢，我会写成 html {} 顶格，head {} body {} 缩进

关键是，这是一个帕累托改进，没有引入任何实体，没有引入任何成本，却有实在的收益

autoxbc

2022-05-12 17:25:00 +08:00

@lneoi #98 修改 HTML ，就要修改 CSS ，这是 CSS 这种样式分离语言自身的问题，不是缩进方案的问题。如果修改 CSS 需要变动十几个语句加调试成本，修改这些 CSS 的缩进就是选中，快捷键改缩进，剪切粘贴。维护缩进的成本可以忽略不计

autoxbc

2022-05-12 17:32:38 +08:00

@lneoi #100 前端界开始反思样式分离的意义，这显然是积极的，但这不是本贴的语境。本贴说的是，如果你需要样式分离，应该怎么组织这个分离的样式文件

zenben

2022-05-21 14:18:53 +08:00

缩紧对于代码的阅读和维护确实有它的好处, 不过我记得 scss 还是什么可以利用插件实现非嵌套的 output, 而是输出的也是可以支持缩进格式的语法

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/852098

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.