CSS 作为一种编程语言,自然有与其对应的缩进写法,类似这样
这个写法暗示了选择器命中元素在 DOM 中的位置,也给维护对应语句提供了定位路径
如果没有缩进,所有语句胡乱堆砌在一起,就是一座屎山。无数人抱怨 CSS 不可维护,就是找不到应该从哪里入手修改,只能碰运气搜索一下,不久就放弃了,然后在文件末尾新启一行,糊上新的屎
我自己给常用的 200 个网站编写 UserCSS ,其中最长的(刚好是本站)有近 700 行,短的也有几十行,如果没有缩进,维护这些 CSS 不可想象
这种写法如此自然,以至于我想象不出为什么很少有人这么写,不是本该如此吗
1
dcsuibian 2022-05-11 02:59:28 +08:00 via Android
Sass (新版 Scss 更好),Less
|
2
ddcc 2022-05-11 03:00:22 +08:00 4
我是说,有没有一种可能,有别的方式已经做到了这一点,并且更好,比如说 scss
|
3
thedrwu 2022-05-11 03:01:40 +08:00 via Android
vim 的 folding marker 可解
|
4
autoxbc OP |
5
autoxbc OP @thedrwu #3 这种缩进需要开发者对照 DOM 结构来写 CSS ,应该不是某种工具能自动实现的,当然我并不知道你提到的工具具体怎么工作
|
6
Pastsong 2022-05-11 03:16:57 +08:00 8
有没有一种可能,开发者可以不对照 DOM 结构来写 CSS ,你准备把 CSS 那些花里胡哨的选择器放在什么地方
|
7
autoxbc OP @Pastsong #6 您是想说 tailwind 那种准内联写法么,那种抹除 CSS 选择器抽象层的做法不在这个讨论的语境里,这里是说有选择器抽象层的情况下,怎么处理这个抽象层的结构化
|
8
eason1874 2022-05-11 03:35:06 +08:00
CSS 并不认识缩进,你这样缩进只是方便人眼看,还有同名污染问题。其实 CSS 也有几种规范,代码可读的同时没有污染问题,以前比较流行的两种:
子选择器 .more2-item > .more2-block > .more2-img {} 双下划线 .more2-item__block__img {} 只是 CSS 规范不强制,而且容错性极强,小学生折腾几天都会改,所以 CSS 代码氛围像 PHP ,花里胡哨的占多数,规规矩矩写的少 |
9
thedrwu 2022-05-11 03:42:21 +08:00 via Android
@autoxbc 不是自动,而是手动插入一个折叠的标记,可以嵌套折叠。这种情况下多层折叠比多层缩进好用。
|
11
autoxbc OP @yyfearth #10 我也用预处理器,也用预处理器提供的嵌套,不过在非嵌套的部分,我继续保持按照 DOM 结构缩进的做法,这里既没有矛盾也没有替代关系
|
12
qeqv 2022-05-11 04:42:42 +08:00
.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 {} |
13
releaseme 2022-05-11 07:04:39 +08:00
|
14
kaiki 2022-05-11 07:24:40 +08:00
我认为能把同一个元素的 css 写在一起并且和其他的分割开来就已经是最大的仁慈了,看别人 CSS 代码的时候他这么做我就觉得谢天谢地了,改一个地方能搜出好几个文件里都有,覆盖得乱七八糟的简直头疼。
|
15
cssk 2022-05-11 07:40:16 +08:00 via iPhone 42
楼主这种缩进才叫恶心
|
16
Procumbens 2022-05-11 08:01:48 +08:00 4
CSS 并不是编程语言……
|
17
herozzm 2022-05-11 08:13:21 +08:00 via Android
缩进只是写的人方便,换人来也是屎山,对照 dom 也难得理明白,而且缩进难看
|
18
herozzm 2022-05-11 08:14:00 +08:00 via Android
关键有些缩进属性也可能被其他 dom 共用,逻辑也没法体现
|
19
retrocode 2022-05-11 08:26:50 +08:00 1
有没有一种可能, 我是说可能, 元素位置你不用暗示, 加个 cv 下父元素名和一个空格就可以做到
进来前我以为是小白正准备推荐 scss, 结果你这个缩进方法直接把我灵魂都干碎了 |
20
wonderfulcxm 2022-05-11 08:32:31 +08:00 via iPhone
scss 生成的 css 是选择器之间有层次的,你这样写形式上有层次,逻辑上是没有层次的,很容易坑到自己。
|
21
cslive 2022-05-11 08:36:22 +08:00
直接用 less 完事,浏览器直接可用
|
22
ymcz852 2022-05-11 08:40:20 +08:00
vscode 有 css peak 插件,在 html 属性里点击类名、ID 等可直接跳到对应的 css 定义
|
23
rioshikelong121 2022-05-11 08:43:01 +08:00
我挺讨厌这种缩进写法的。而且编辑器比较难帮你自动进行这种缩进。
|
24
justfindu 2022-05-11 08:44:22 +08:00
可是 class 都是平级的 为啥你要分层 而且这个缩进也不对啊 你要用 scss 或者 less 倒是可以理解
|
25
machunning9843 2022-05-11 08:53:35 +08:00 via Android
这样写 css ,代码多了一样不好维护,应该在组件级拆分,保证组件 css 样式不过多。
|
26
yaphets666 2022-05-11 09:03:18 +08:00
绝对不能有缩进这种东西
|
27
netnr 2022-05-11 09:10:24 +08:00 via Android
是的,分模块是最好的办法
另外 VS 支持 CSS 缩进排版 |
28
sujin190 2022-05-11 09:10:25 +08:00
丑,说明大家还是有点审美的
|
29
digimoon 2022-05-11 09:12:18 +08:00
这缩进也太恶心了,要表明关系我都是用#12 这种
|
30
adoal 2022-05-11 09:17:11 +08:00 via iPhone
CSS 是没有层级的,有层级的是 DOM
|
31
yyf1234 2022-05-11 09:26:08 +08:00 via iPhone
你这种写法才令别人感到诧异,看的累的要死
|
32
marcong95 2022-05-11 09:33:21 +08:00
首先 CSS 不是编程语言,只是样式表,没有任何控制结构。
你这种写法没有语义,但是又营造了一种有语义的错觉,这目测就是这种写法不普及的原因吧。 你这 .more2_info 是对整个页面有效,而不是仅对 .more2_item .more_info 有效那你万一再写了一个 .more3_item .more_info 呢?从你这命名来看,我也不奇怪会有这种情况的发生了,虽然没有根据,但是我总感觉变量名或者类名这种出现编号性质的数字,就差不多是屎山的标志了 |
33
MAGA2022 2022-05-11 09:35:55 +08:00
你是怎么做到这么自信的
|
34
weixiangzhe 2022-05-11 09:38:27 +08:00 1
less/scss 编译出的层级太深了,我同意 op 的意见
|
35
cmdOptionKana 2022-05-11 10:01:35 +08:00
综上所述,楼主提出的缩进并非显然、一致认可的好方式,而是属于见仁见智的“偏好”而已,因此没有普及这种写法不需要诧异。
|
36
phxsuns 2022-05-11 10:39:45 +08:00
css 是要讲究样式复用的。你这样写,那复用的样式怎么办?
|
37
Me7426 2022-05-11 12:14:52 +08:00 via Android
CSS module ,CSS inJS ,#8 提到的选择器规范,以及#
13 提到的原生嵌套,哪个不比你这缩进好,Python 写多了吧? |
38
XCFOX 2022-05-11 12:25:29 +08:00
css in js 的写法没有普及令我感到诧异
jsx 作为一种编程语言,自然有与其对应的样式写法,类似这样: https://emotion.sh/docs/css-prop 这个写法明示了样式目标元素在 DOM 中的位置,也不用给维护对应语句提供定位 如果样式与结构分离,所有 css 胡乱堆砌在一起,通过 className 与 element 绑定,就是一座屎山。无数人抱怨 CSS 不可维护,就是找不到应该从哪里入手修改,只能碰运气搜索一下,不久就放弃了,然后在文件末尾新启一行,糊上新的屎 我自己给常用的 200 个网站编写 UserCSS (不是),其中最长的(刚好是本站)有近 700 行,短的也有几十行,如果没有 css in js ,维护这些 CSS 不可想象 这种写法如此自然,以至于我想象不出为什么很少有人这么写,不是本该如此吗 |
39
XCFOX 2022-05-11 12:37:20 +08:00
个人感觉在现代前端应用把 html 结构和 css 样式分离就是个错误。
Flutter 、SwiftUI 、WPF 都是直接在 element 上加样式的。 关注点不分离之后开发和维护轻松多了。 目前使用 Utility-first 的 tailwind 、windi 或者 css in js 的 emotion 等库都能轻松做到关注点不分离。 |
40
Blacate 2022-05-11 12:42:23 +08:00 via iPhone
可能你想要的是嵌套写法?
|
41
Jooooooooo 2022-05-11 12:52:39 +08:00
怎么同级的东西缩进还不一样...
令人迷惑 |
42
dNib9U2o8x 2022-05-11 13:32:32 +08:00
这缩进看的我浑身难受
|
43
musi 2022-05-11 14:34:29 +08:00
你缩进到最后一行都不够你缩进的
|
44
MarquesMa 2022-05-11 14:44:22 +08:00 2
其实这种想法是个陷阱:很多人发现有嵌套就觉得很好用,结果导致大部分 SCSS 嵌套很多的项目都不好维护。
为什么? 因为 HTML 本身有嵌套,CSS 再重新写一遍完全一样的嵌套关系,其实就是隐形地把同一套逻辑写了两遍,是一种没有益处的高耦合做法。当你需要改 HTML 的时候,就发现 CSS 各种挂,而且优先级也特别混乱要么重复叠类名,要么 important 。 虽然 Tailwind 和 Styled 之类的方案已经解决了这个问题,其实只说 CSS 的话 BEM 也解决了这个问题:不管 HTML 嵌套多少次,BEM 只嵌套一次,也就是只有一层 namespace 加上一个 selector 。这样既解决了冲突问题,又解决了上述的嵌套问题。因此移动元素的时候样式就很少挂,非常灵活,而且优先级就那两三个,一目了然。 |
45
davin 2022-05-11 15:38:12 +08:00
能 show 下 OP 的 HTML 对应结构么?这种 more1, more2, more3 ... moreN 在 HTML 中的结构是逐层嵌套呢,还是顺序使用的?如果始终自己一个人开发,怎么玩都开心。但涉及到多人协作的时候,人家可能随手复制 class 就去用了,结果发现样式没起作用,心里那会是什么酸爽滋味😭
|
46
SilentDepth 2022-05-11 16:44:46 +08:00
因为大多数情况下嵌套缩进并不是刚需。HTML 结构和样式定义有时并不是同一视角。当然有胜于无,多一个选择总是好事。
另外,楼主有没有考虑过匹配优先级的问题 |
47
TomatoYuyuko 2022-05-11 17:25:28 +08:00
那为什么不用更完善的 scss 呢,再说 css 完全可以和 dom 结构解耦啊
|
48
libook 2022-05-11 17:36:26 +08:00
一个 class 被不同层级的 dom 使用,这种写法可能就不适合了。
有可读性优化的意识是好的。 |
49
iamzuoxinyu 2022-05-11 18:08:01 +08:00
CSS 全称 Cascading Style Sheet ,不是 Cascading Style Tree 。
|
53
autoxbc OP @herozzm #18 共用的 class 一般都在类似的层级,实践中写在哪个部分都可以,不用复制多处。而且因为故意没有用嵌套语法,所以写在哪都能正常发挥作用
|
54
autoxbc OP @wonderfulcxm #20 就是故意避开嵌套的,嵌套会导致选择器链严格化,class 被嵌套会使作用范围变小。而且嵌套和非嵌套可以混写,使严格化成为可选项
|
55
autoxbc OP @ymcz852 #22 这个不仅仅提供了定位路径,还是一种代码组织约束,使得相关代码必须聚集在一起,那么会减少非常多的 important 乱象
|
56
autoxbc OP @rioshikelong121 #23 如果编辑器可以分析 DOM 结构,理论上可以自动生成这个缩进
|
57
autoxbc OP @justfindu #24 实践当中很多用 class 的场景实际应该用 id ,这个写法对 id 这种唯一结构比较有效。对 class 的场景,应该说也不是所有 class 都是平级的,还是会体现某种结构的,可以按照个人喜好细化约定
|
58
autoxbc OP @machunning9843 #25 这个不矛盾吧,我也没说有结构了就不要拆分,改搞组件还可以搞,组件里也有结构,还是有缩进的需要
|
63
autoxbc OP @MAGA2022 #33 因为我这么写好多年了。你看这么多人看一眼就开喷,我一点不急,好用不好用那是真实的感觉,伪装不来
|
64
autoxbc OP @cmdOptionKana #35 不认可没关系,我就这么一说,大家这么一看,等下次维护 CSS 抓狂时想起这个来,愿意试一试就行
|
65
autoxbc OP @phxsuns #36 这里没用嵌套包起来,复用的代码写在哪里都行,实践当中我会写在靠前的位置,复用的位置留一个只有选择器语句的空段落
|
68
autoxbc OP @Jooooooooo #41 如果缩进不一样,那就不是同级的
|
69
guzzhao 2022-05-11 19:22:23 +08:00
https://www.w3.org/TR/css-nesting-1/
你这么缩进感觉前后关系不清楚,css nesting 感觉就不错,用 postcss 插件转换,但是不知道为什么 vscode 还不支持,文件格式时 css 的话 vscode 飘红 |
71
autoxbc OP @davin #45 这个例子不是从头开发,是京东首页猜你喜欢部分的代码,我刚好要适配这个瀑布流到宽屏,写了一段 UserCSS ,随手就截图了。more2 不是我命名的,我本意是介绍这种缩进风格,没想到很多人纠结这个命名
|
72
autoxbc OP @SilentDepth #46 因为这个缩进风格或者说代码组织约束不改变任何语义,所以应该不涉及优先级问题,除了因为更优良的组织结构协助维护者定位代码,可以少写很多 important
|
73
autoxbc OP @TomatoYuyuko #47 用 scss 也可以用这个缩进风格啊,难不成用了 scss 就必须全部嵌套,我本来也是用 postcss 的,嵌套和非嵌套混写的
|
74
autoxbc OP @libook #48 一个 class 共用时,我会把主体写在靠前的部分,后面共用的位置放上一个只有选择器的空段落占位
|
75
autoxbc OP @iamzuoxinyu #49 Tree 是不是更好
|
76
SilentDepth 2022-05-11 19:53:33 +08:00
@autoxbc #72 哦,我刚注意到你这只是缩进,不是嵌套。那……何必呢,className 本身不一定要还原 HTML 结构的
|
77
autoxbc OP @guzzhao #69 这个缩进描述的就是前后关系,怎么又不清楚了,楼上都理解了这里就是一棵 Tree ,还有比 Tree 更好的描述前后关系的么
嵌套是另一回事,嵌套会导致选择器链严格化,而且是强制的。非嵌套的缩进和嵌套混写使得严格化成为可选项 |
78
autoxbc OP @SilentDepth #76 还原 DOM 结构使得新增的语句有准确的放置位置,代码就不会轻易腐败。层叠样式表一旦层叠失控,后面就是不归路
|
79
Jooooooooo 2022-05-11 20:02:35 +08:00
@autoxbc 敲错一个空格查问题岂不是查半天?
|
80
autoxbc OP @Jooooooooo #79 我是 Tab 派的,没敲错过
|
81
SilentDepth 2022-05-11 20:12:59 +08:00
@autoxbc #78 BEM 有什么不好吗
|
82
autoxbc OP @SilentDepth #81 BEM 是种命名方式,不是组织方式。对于 BEM 的 Block ,和其他 Block 的组织关系,还应该用这里的缩进来描述; BEM 中的 Element ,和 Block 中的其他 Element 的组织关系,可以继续用这里的缩进来描述
|
83
Jooooooooo 2022-05-11 20:51:51 +08:00
@autoxbc 显然不是一个好的代码格式管理方案. 不小心敲到了得 debug 多久呀.
|
84
SilentDepth 2022-05-11 21:40:36 +08:00
我不理解。
首先,CSS 用缩进忠实地体现 DOM 结构并没有什么好处。一来,CSS 选择器所表达的层次结构并不总是与 DOM 渲染结构相符,如果你使用 Atomic CSS 几乎没有层次的问题,而如果你使用 BEM 则选择器本身就体现了层次,用不着缩进。二来,纯静态的样式就罢了,伪类选择器怎么办,它算什么层次呢?如果使用 BEM ,两种 block 互有嵌套的时候要怎么缩进? 其次,「如果没有缩进,所有语句胡乱堆砌在一起」,但缩进了只是改变了水平位置,没改变垂直位置啊。相同业务主题的样式放在一起,它们左边有多少空格能造成什么本质区别呢。「无数人抱怨 CSS 不可维护,就是找不到应该从哪里入手修改」,这……是不是应该学习一下开发者工具怎么用。 以及,所有 CSS 方言都实现了嵌套语法,甚至 CSS 自己的嵌套特性也已在路上。这种情况下,你这种「不表达嵌套的缩进」是否会干扰对匹配优先级的判断呢(以 Sass 的话来说,相当于所有 ruleset 都隐含了一个 @at-root )。现在大多数编辑器都有结构树显示功能,这种缩进在结构树里是平铺呢还是折叠呢?如果和正儿八经的嵌套语法放在一起,还要怎么表示呢? |
85
autoxbc OP @SilentDepth #84 一种解决方法不是解决所有问题的,只要解决希望解决那部分就可以了。就像英语语法只能解释一半的语言现象,另一半不合语法也不用强拗。拿出几个边界例子来说一个简单的缩进风格无法匹配所有情况,所以干脆完全不要缩进了,这是不可取的
CSS 的结构不总是与 DOM 完全一致,但是大多数情况的一致性是很好的,这是我长期实践的结论。准内联的 tailwind 风格我并不反对,只是不在这个语境里。BEM 的层次是个局部的层次,整个 DOM 显然比 Block 复杂多了,需要一个整体结构。伪类是同级结构,一般用嵌套写法放入选择器所在语句块的内部,重复一下,缩进写法不是反对嵌套,我自己就是该嵌套就嵌套,不该嵌套照常缩进。如果两个 Block 互有嵌套,可以随意按照自己的喜好来写,约束是提高可维护性的,不是难为人的 显然这里没有人不熟悉开发者工具,但是你见过那种同一个选择器在文件 10 行写了一堆,又在 100 行写了一堆,又在 500 行写了一堆,然后在另一个文件里又写了一堆么。用我的缩进写法,你只能写在同一个位置,这就是代码组织约束 嵌套给了你严格化的选择器链,但你不会总是希望这种严格化,当和缩进混写时,只要简单的把语句拿出嵌套就行了,一个子元素的语句块,在嵌套里缩进到什么位置,在嵌套外就缩进到什么位置,一个字符都不用修改 编辑器是为人服务的,人不用为编辑器考虑。实践当中,我完全不折叠任何代码块,不管是嵌套的还是仅缩进,我需要一眼看出代码的整体结构。如果有需要,相信也是可以做出折叠插件的,毕竟这里的层级逻辑是很清晰的 |
86
gaodeng 2022-05-11 23:15:48 +08:00
楼主,你这根本不是在写 CSS ,你的缩进太美了,你是在写诗歌,这是艺术。你简直就是个天才。这帖子可千万别被歪果仁看到,我怕他们学去了 🐶
|
87
hackfly 2022-05-11 23:37:10 +08:00
vs 就是这样缩,老难搞,每次都要手动对齐; CSS 根据迭代器就可以,为啥要搞锁紧来表明层级
|
88
x86 2022-05-12 00:21:13 +08:00 via iPhone
你这缩进个 10 行以上看的头都要炸裂了
|
90
learningman 2022-05-12 02:58:10 +08:00 via Android
有个经典类名 clearfix ,不知道楼主打算放在哪
|
91
autoxbc OP @learningman #90 对结构无关的抽象 class ,一般集中放在文件开头,这种很少超过 20%。剩下 80% 在 DOM 中有固定位置的,适合按照这个方法组织代码
|
92
autoxbc OP @learningman #90 统计了一下,我自己维护的本站 UserCSS 一共 643 行,抽象 class 占 78 行,约为 12%
|
93
kchum 2022-05-12 03:55:48 +08:00 via iPhone
那 minified 时该怎样体现?
|
94
GeruzoniAnsasu 2022-05-12 08:20:53 +08:00
我不理解
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 该怎么缩进? |
95
GeruzoniAnsasu 2022-05-12 08:25:17 +08:00
如果这算那种「抽象 class 」,那就会与「 DOM class 」分开写在不同位置,要在脑子里同时处理这两个部分就很困难
而且就算这种方式只用来组织那些「与 DOM 绑定的 class 」,那当 DOM 是动态的时候也不一定能保证写对啊,意义何在呢 我绝不会试图把本来就 mesh 结构的东西写成树形 |
96
GiantHard 2022-05-12 08:59:35 +08:00 via Android
楼主的主要使用场景是维护 UserCSS ,通常需要写大段样式,但是现在更多人的使用场景是编写 component scoped css ,再加上各种 UI 库的使用,基本上就很少写大段的样式表了。
|
97
chnwillliu 2022-05-12 09:16:33 +08:00 via Android
如果 class 和 DOM 有唯一对应性,其实利用 SASS 的嵌套结构或者直接 css 的后代选择器重复 parent 路径也未尝不可,啰嗦了一点罢了,但也是体现了 DOM path ,额外增加的权重也无所谓啊反正你是一一对应不是。
如果不想嵌套选择器,那 BEM 命名就很好呀,也不用缩进了。 我觉得这不成问题的主要原因还是,前端都在搞组件化,样式都变成 scoped 的,随组件一起管理。全局样式文件里就最基本的 reset, typography 相关的。你说的 class 和 DOM 对应的样式,都在组件里放着,组件拆得细,单个样式表就非常小。组件范围内要定位 class 对应的 DOM 就非常简单啊。稍微大一点的组件,BEM 或者 SASS 嵌套就搞定了。 缩进体现层级的方案在传统的多页应用里可以实践,但 Vue, Angular, React 里完全没必要。 |
98
lneoi 2022-05-12 10:04:15 +08:00
与 DOM 结构保持一致的麻烦在于 DOM 结构一旦更改, 需要花大力气同步 CSS 。
如果强调复用性或者原子化,就很难与 DOM 结构保持一致,做到部分片段结构一致大部分项目代码还是有的吧。 |
99
ACVV 2022-05-12 10:06:28 +08:00
less 做到了,我一个产品狗都知道
|
100
lneoi 2022-05-12 10:07:40 +08:00
想了一下,Tailwind 方案不就是解决楼主的这种需求。与 DOM 结构一致,也省去了同步 CSS 。普通方案可能还要反复看 CSS ,原子化的写法可以从 DOM 上直接可读可改了。
|