V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Can I use?
http://caniuse.com/
Less
http://lesscss.org
Cool Libraries
Bootstrap from Twitter
Jetstrap
autoxbc
V2EX  ›  CSS

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

  •  
  •   autoxbc · 2022-05-11 02:46:31 +08:00 · 7153 次点击
    这是一个创建于 912 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    CSS 缩进

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

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

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

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

    107 条回复    2022-05-21 14:18:53 +08:00
    1  2  
    autoxbc
        101
    autoxbc  
    OP
       2022-05-12 16:33:18 +08:00
    @kchum #93 缩进是种结构暗喻,并不影响真实语义。压缩之后这种结构信息就抹去了,但是对运行没有影响
    autoxbc
        102
    autoxbc  
    OP
       2022-05-12 16:46:48 +08:00
    @GeruzoniAnsasu #95 如果你大量写抽象 class ,那你的项目里抽象 class 就是主体,反之,抽象 class 可能很少,要看你的开发习惯。我不会强迫你接受,不过你也不能假定这一定有很大的思维负担,毕竟我已经实践了很多年

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

    至于这个结构到底是 mesh 还是 tree ,我的实践说明是以 tree 为主。如果你可以设计出一种与 mesh 对应的 CSS 文件结构,我也鼓励你写成那种结构,无论如何,线性的连续堆砌不是种好的结构
    autoxbc
        103
    autoxbc  
    OP
       2022-05-12 16:57:59 +08:00
    @GiantHard #96 我的场景确实主要是 UserCSS ,不过这些 UserCSS 显然都对应了真实的主流的网站。如果他们的开发没生成这些 className ,没生成那些大段的超长的有明确 className 的 CSS ,显然我的工作就几乎无法进行。这么看的话,到底什么是真实的主流的开发场景,还真不好说
    autoxbc
        104
    autoxbc  
    OP
       2022-05-12 17:12:43 +08:00
    @chnwillliu #97 组件化确实把问题解决了----一部分,不过并没有完全消失。组件里也有节点,有节点就有结构,有结构就有样式描述的结构

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

    关键是,这是一个帕累托改进,没有引入任何实体,没有引入任何成本,却有实在的收益
    autoxbc
        105
    autoxbc  
    OP
       2022-05-12 17:25:00 +08:00
    @lneoi #98 修改 HTML ,就要修改 CSS ,这是 CSS 这种样式分离语言自身的问题,不是缩进方案的问题。如果修改 CSS 需要变动十几个语句加调试成本,修改这些 CSS 的缩进就是选中,快捷键改缩进,剪切粘贴。维护缩进的成本可以忽略不计
    autoxbc
        106
    autoxbc  
    OP
       2022-05-12 17:32:38 +08:00
    @lneoi #100 前端界开始反思样式分离的意义,这显然是积极的,但这不是本贴的语境。本贴说的是,如果你需要样式分离,应该怎么组织这个分离的样式文件
    zenben
        107
    zenben  
       2022-05-21 14:18:53 +08:00
    缩紧对于代码的阅读和维护确实有它的好处, 不过我记得 scss 还是什么可以利用插件实现非嵌套的 output, 而是输出的也是可以支持缩进格式的语法
    1  2  
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5787 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 20ms · UTC 06:16 · PVG 14:16 · LAX 22:16 · JFK 01:16
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.