V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
chenliangngng
V2EX  ›  前端开发

你是怎么看待 css 预编译的?

  •  
  •   chenliangngng · 2020-02-06 18:19:45 +08:00 via Android · 1845 次点击
    这是一个创建于 1752 天前的主题,其中的信息可能已经有所发展或是发生改变。

    我感觉非常不好用!

    第一点,Less 和 sass 这种语言后台思维非常重,什么都想规范和条理化。 如果需求变动不大,这这可能是优点,但是实际上前端尤其样式上需求变化非常频繁,很容易重构和大改,一旦需要重写原来的代码,css 预编译耦合起来的代码就是噩梦一样的存在。

    第二点,预编译语言有变量,嵌套等规则,自己写起来很舒服,但是一旦由其他人员或者另外的团队接手进行调试或者修改,那么这些样式会变得非常难阅读和难调试。比如,浏览器上的选择器是 css 选择器,在 less 代码中是不能拷出来直接用的,效率低下。

    第三点,优点不明显。比如变量,真正写代码的时候是直接照着高保真写的,不存在说不同页面相似功能点样式数值上不一致的情况,同样的样式,无非拷贝的是变量或者具体数值,并没有解决问题;比如嵌套,多写一个 class 不就没问题了,也没实际解决什么问题。

    第四点,有很多坑要踩,很多问题不是看文档看博客就能明白和解决的,对经验比较看中,所以学习成本并没有宣传的那么低。比如,*选择器,媒体查询等。

    个人认为 css 预编译扩展了 css 的边界和能力范围,但是并未能够解决实际开发问题。

    最近接手另一个团队某架构师留下来的一堆 Less 代码,改得吐血了,是不是我的打开方式不对?

    5 条回复    2020-02-10 12:38:45 +08:00
    wszgrcy
        1
    wszgrcy  
       2020-02-06 19:09:05 +08:00 via Android
    没有什么是!important 解决不了的
    maomaomao001
        2
    maomaomao001  
       2020-02-06 19:10:02 +08:00
    针对 1,2, 可以参考一下 antd 的

    针对 3 的话, 你要还原的高保真设计图肯定不太对, 正常的设计图,按钮,各种组件 , 间距,设计规则,应该是一个体系, 而不是,这里是 4 px padding , 到了另一个地方突变成 5 px

    针对 4 , 学习成本看你想用那些功能吧,我感觉大部分人用 less,sass,很少会用到 50% 的功能, 可能就变量 , 嵌套 , 函数 用的多。

    个人认为 css 预编译扩展了 css 的边界和能力范围,但是并未能够解决实际开发问题。
    ----> 扩展了能力和范围,不也解决了开发中的一些问题嘛
    maomaomao001
        3
    maomaomao001  
       2020-02-06 19:11:13 +08:00
    最近接手另一个团队某架构师留下来的一堆 Less 代码,改得吐血了,是不是我的打开方式不对?
    -------> 你应该庆幸,这个 less 代码现在可能也就 400 行,你是愿意看 别人 4000 行 css 代码 , 还是更喜欢 400 行 less 代码
    chenliangngng
        4
    chenliangngng  
    OP
       2020-02-10 12:37:35 +08:00 via Android
    @maomaomao001 实际开发问题,是由开发效率、质量、健壮性、可维护性决定的,就我目前的感受,仅仅代码看上去规范了,但是重要的效率质量提升不大,健壮性和可维护性是扣分项
    chenliangngng
        5
    chenliangngng  
    OP
       2020-02-10 12:38:45 +08:00 via Android
    @maomaomao001 谢谢你的回答,antd 以后有机会可以尝试看看
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2681 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 04:12 · PVG 12:12 · LAX 20:12 · JFK 23:12
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.