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

[问题交流] 常见的 CSS 方案选择

  •  
  •   anc95 ·
    anc95 · 2022-01-18 14:33:20 +08:00 · 4295 次点击
    这是一个创建于 1019 天前的主题,其中的信息可能已经有所发展或是发生改变。

    常见 CSS 方案简单总结

    原生 CSS

    优点:

    1. 简单

    Less / Sass 等 CSS 预编语言

    优点:

    1. CSS 基础上增强函数、theme 等特点(不过 css variable 也支持 theme )
    2. 编译可以做一些 treeshaking 的优化,体积相对 CSS 会更优一些

    CSS/Less Module

    这是一种 CSS In CSS 的方案

    优点:

    1. 能解决样式冲突的问题

    缺点:

    1. 相对应的缺点是样式不能自由覆写

    CSS In JS

    styld-componentsemotion css 为代表的一些方案

    优点:

    1. 相比 CSS Module 而言,样式可在 JS 层灵活控制(如根据 JS 状态切换不同的样式,CSS Module 包括其它方案需要在 clssName 层控制)

    缺点:

    1. 相对应的缺点是样式不能自由覆写
    2. 会写很多的冗余代码,样式不太好做复用?

    Utility CSS

    以 tailwind css 和 windcss 为代码的一些 CSS 方案。

    问题

    目前在考虑我的项目代码怎么写,感觉很难 all in 到其中一种方案里

    咨询下贵站的大佬们平时都倾向于使用哪种或哪几种组合方案,及其原因

    24 条回复    2022-01-18 23:08:00 +08:00
    daysv
        1
    daysv  
       2022-01-18 14:38:25 +08:00
    tailwind css 足矣
    koor
        2
    koor  
       2022-01-18 14:41:24 +08:00
    rebass 搭配 styled-components
    weixiangzhe
        3
    weixiangzhe  
       2022-01-18 14:41:31 +08:00
    我还在用 CSS Module 配合 less, 主要是简单够用
    zcf0508
        4
    zcf0508  
       2022-01-18 14:42:41 +08:00
    在用 windicss ,主要是样式写起来很爽,不用跳去单独写 css
    heyjei
        5
    heyjei  
       2022-01-18 14:44:03 +08:00
    现在流行 tailwind 了吗?看来要去学习了
    ddiu8081
        6
    ddiu8081  
       2022-01-18 14:47:16 +08:00
    tailwind css ,能节省大量时间在起 class 名上
    shyling
        7
    shyling  
       2022-01-18 15:13:28 +08:00   ❤️ 1
    TomatoYuyuko
        8
    TomatoYuyuko  
       2022-01-18 15:16:56 +08:00
    用过 tailwind css 但不太喜欢,个人比较沉迷手撸 sass 的快感
    shyling
        9
    shyling  
       2022-01-18 15:17:46 +08:00
    个人的感觉是 css module 不太喜欢,为了解决冲突带来的麻烦有点多,而且也解决不了命名难的问题。

    css in js 就更麻烦了, 首先改 className 问题也不大,style={{ backgroundColor: a ? 'red': 'blue' }} 好像也没啥问题
    newbieRenew
        10
    newbieRenew  
       2022-01-18 15:19:56 +08:00 via iPhone
    借助 Sass 纯手工打造。那个 tailwind 的用法简直是灾难,特别是官网的例子,完全弄成标记语言了,看似复用,其实完全背离了模块化的理念,耦合太多,一旦需要改变某个数值,改起来简直是灾难。
    f056917
        11
    f056917  
       2022-01-18 15:32:44 +08:00
    @TomatoYuyuko +1 ,我都是手撸的
    f056917
        12
    f056917  
       2022-01-18 15:33:30 +08:00
    主要是担心用别的会样式冲突
    newbieRenew
        13
    newbieRenew  
       2022-01-18 15:37:23 +08:00 via iPhone
    tailwind 的糟点用一个例子来形容: 某个边栏,你命名为“nav-left”并置于左边。一天,需求变更为放在右边,为了让其他人看明白,你是可能会更改名字为“nav-right”并置于右边。当变更频繁、没有模块化时,你更改的地方可能会很多了。其实你可以更好的命名为“nav-side”,从样式表里来控制它的方位,无需更改页面布局。
    XCFOX
        14
    XCFOX  
       2022-01-18 16:59:18 +08:00
    小孩才做选择,大人 CSS In JS 、Utility CSS 全都要

    https://fower.vercel.app/zh-cn/
    https://xstyled.dev/
    vanton
        15
    vanton  
       2022-01-18 17:20:40 +08:00
    tailwind 使用起来就是灾难。

    一旦有大量需要修改类似组件的需求,工作量远超过手写 css
    yaphets666
        16
    yaphets666  
       2022-01-18 17:50:44 +08:00
    专业的前端,做前端工程,只有一个选择,就是 scss
    fortunezhang
        17
    fortunezhang  
       2022-01-18 20:31:50 +08:00
    个人现在只用 scss 。妥妥的生产力
    Cbdy
        18
    Cbdy  
       2022-01-18 20:55:32 +08:00
    分享一下我的实践的感想,你说的我基本都稍微用过,实际实践下来的话

    CSS Modules ,公司项目,有一些用 CSS Modules 的,但个人项目已经不用了,以前用的也改造掉了

    用 Emotion 写的石头剪刀布小游戏
    https://github.com/alchemy-works/RPS

    用 styled-components 写的五子棋小游戏
    https://github.com/alchemy-works/gomoku

    用 Tailwind CSS 写的 Todo List
    https://github.com/alchemy-works/todo-list

    实际是这么几种方案:

    - CSS Modules (包括 Vue 的 SFC 中的 Scoped CSS ):依赖编译工具链,和原有写 CSS 体验最接近,单独的 CSS 文件
    - CSS in JS ( styled-components 、Emotion 、styled-jsx 等):可以脱离编译工具链,更加灵活,和 JS 相性好
    - CSS 原子类( Tailwind CSS 等):正经使用要编译工具链,使用成本有点大
    - 行内 CSS:这个局限性太大了,在很少场景作为补充使用

    我个人更倾向于 styled-components/emotion 这种 CSS in JS 的方案

    快速写静态的小页面我可能会用 Tailwind CSS 一把梭
    BealuoC
        19
    BealuoC  
       2022-01-18 20:56:59 +08:00
    tailwind
    doommm
        20
    doommm  
       2022-01-18 21:23:09 +08:00
    推荐试试 tailwindcss 。我是用它结合传统的 scss ,配合 vue/react 的组件化使用
    shintendo
        21
    shintendo  
       2022-01-18 21:28:52 +08:00
    css modules + tailwind
    shintendo
        22
    shintendo  
       2022-01-18 21:39:12 +08:00   ❤️ 1
    记得以前比较抗拒 tailwind 是觉得它跟行内 style 差不多,把样式耦合在了 html 上面。后来有一篇文章把我说服了,大意是说把样式与 html 解耦是一个幻想,大部分脱离于 html 单独写的 css ,其实都在 css 里又维护了一份 html 结构。
    chenliangngng
        23
    chenliangngng  
       2022-01-18 22:31:32 +08:00
    说说我的实践,react 技术栈

    less ,用不用无所谓,曾经的优点在现代的 css 和各种已封装组件库面前,聊胜于无
    css module ,长期在使用,没有特别大的缺点,改 class 名字可能不如 vue 的 scoped 加 data-
    styld-components ,用过半年,我个人觉得很扯淡的技术方案,方便单元测试倒是可以,但是背离关注点分离原则,js 和 css 混在一起,久而久之让 js 代码稀烂
    tailwind css ,用过 3 个月,后面全删了重写。原因是学了 css 再学另一套 class 有点没必要,每次要过 2 遍脑袋,其实并不直观,而且必要的时候还是要自己写 style 和 class

    推荐 less+css module ,不要再带别的了
    DOLLOR
        24
    DOLLOR  
       2022-01-18 23:08:00 +08:00 via Android
    我选 less/sass 。
    如果你有信心应对“五彩斑斓的黑”,tailwind 也不是不行。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2898 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 13:40 · PVG 21:40 · LAX 06:40 · JFK 09:40
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.