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

2022-05-11 02:46:31 +08:00
 autoxbc

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

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

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

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

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

7118 次点击
所在节点    CSS
107 条回复
Jooooooooo
2022-05-11 12:52:39 +08:00
怎么同级的东西缩进还不一样...

令人迷惑
dNib9U2o8x
2022-05-11 13:32:32 +08:00
这缩进看的我浑身难受
musi
2022-05-11 14:34:29 +08:00
你缩进到最后一行都不够你缩进的
MarquesMa
2022-05-11 14:44:22 +08:00
其实这种想法是个陷阱:很多人发现有嵌套就觉得很好用,结果导致大部分 SCSS 嵌套很多的项目都不好维护。

为什么?

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

虽然 Tailwind 和 Styled 之类的方案已经解决了这个问题,其实只说 CSS 的话 BEM 也解决了这个问题:不管 HTML 嵌套多少次,BEM 只嵌套一次,也就是只有一层 namespace 加上一个 selector 。这样既解决了冲突问题,又解决了上述的嵌套问题。因此移动元素的时候样式就很少挂,非常灵活,而且优先级就那两三个,一目了然。
davin
2022-05-11 15:38:12 +08:00
能 show 下 OP 的 HTML 对应结构么?这种 more1, more2, more3 ... moreN 在 HTML 中的结构是逐层嵌套呢,还是顺序使用的?如果始终自己一个人开发,怎么玩都开心。但涉及到多人协作的时候,人家可能随手复制 class 就去用了,结果发现样式没起作用,心里那会是什么酸爽滋味😭
SilentDepth
2022-05-11 16:44:46 +08:00
因为大多数情况下嵌套缩进并不是刚需。HTML 结构和样式定义有时并不是同一视角。当然有胜于无,多一个选择总是好事。

另外,楼主有没有考虑过匹配优先级的问题
TomatoYuyuko
2022-05-11 17:25:28 +08:00
那为什么不用更完善的 scss 呢,再说 css 完全可以和 dom 结构解耦啊
libook
2022-05-11 17:36:26 +08:00
一个 class 被不同层级的 dom 使用,这种写法可能就不适合了。

有可读性优化的意识是好的。
iamzuoxinyu
2022-05-11 18:08:01 +08:00
CSS 全称 Cascading Style Sheet ,不是 Cascading Style Tree 。
autoxbc
2022-05-11 18:24:24 +08:00
@kaiki #14 这种写法可以解决代码散乱问题,因为模仿 DOM 结构决定了相关的代码必然聚集在一起
autoxbc
2022-05-11 18:27:18 +08:00
@cssk #15 展示一小段代码你们可能感觉不到好处,当代码规模大了会发现有种结构化的美感
autoxbc
2022-05-11 18:30:03 +08:00
@herozzm #17 不不,只要遵守这个约束,换人来写会得到一样的结构,这是可维护的基础
autoxbc
2022-05-11 18:36:32 +08:00
@herozzm #18 共用的 class 一般都在类似的层级,实践中写在哪个部分都可以,不用复制多处。而且因为故意没有用嵌套语法,所以写在哪都能正常发挥作用
autoxbc
2022-05-11 18:40:28 +08:00
@wonderfulcxm #20 就是故意避开嵌套的,嵌套会导致选择器链严格化,class 被嵌套会使作用范围变小。而且嵌套和非嵌套可以混写,使严格化成为可选项
autoxbc
2022-05-11 18:44:59 +08:00
@ymcz852 #22 这个不仅仅提供了定位路径,还是一种代码组织约束,使得相关代码必须聚集在一起,那么会减少非常多的 important 乱象
autoxbc
2022-05-11 18:47:51 +08:00
@rioshikelong121 #23 如果编辑器可以分析 DOM 结构,理论上可以自动生成这个缩进
autoxbc
2022-05-11 18:51:24 +08:00
@justfindu #24 实践当中很多用 class 的场景实际应该用 id ,这个写法对 id 这种唯一结构比较有效。对 class 的场景,应该说也不是所有 class 都是平级的,还是会体现某种结构的,可以按照个人喜好细化约定
autoxbc
2022-05-11 18:53:13 +08:00
@machunning9843 #25 这个不矛盾吧,我也没说有结构了就不要拆分,改搞组件还可以搞,组件里也有结构,还是有缩进的需要
autoxbc
2022-05-11 18:55:33 +08:00
@digimoon #29 什么鬼,#12 那种不是要写到吐血
autoxbc
2022-05-11 18:57:16 +08:00
@adoal #30 CSS 也是有层级的,只是大多数人用扁平化来写,丢失了层级结构

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

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

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

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

© 2021 V2EX