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 · 125 天前 · 1914 次点击
    这是一个创建于 125 天前的主题,其中的信息可能已经有所发展或是发生改变。

    常见 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  
       125 天前
    tailwind css 足矣
    koor
        2
    koor  
       125 天前
    rebass 搭配 styled-components
    weixiangzhe
        3
    weixiangzhe  
       125 天前
    我还在用 CSS Module 配合 less, 主要是简单够用
    zcf0508
        4
    zcf0508  
       125 天前
    在用 windicss ,主要是样式写起来很爽,不用跳去单独写 css
    heyjei
        5
    heyjei  
       125 天前
    现在流行 tailwind 了吗?看来要去学习了
    ddiu8081
        6
    ddiu8081  
       125 天前
    tailwind css ,能节省大量时间在起 class 名上
    shyling
        7
    shyling  
       125 天前   ❤️ 1
    TomatoYuyuko
        8
    TomatoYuyuko  
       125 天前
    用过 tailwind css 但不太喜欢,个人比较沉迷手撸 sass 的快感
    shyling
        9
    shyling  
       125 天前
    个人的感觉是 css module 不太喜欢,为了解决冲突带来的麻烦有点多,而且也解决不了命名难的问题。

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

    https://fower.vercel.app/zh-cn/
    https://xstyled.dev/
    vanton
        15
    vanton  
       125 天前
    tailwind 使用起来就是灾难。

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

    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  
       125 天前
    tailwind
    doommm
        20
    doommm  
       125 天前
    推荐试试 tailwindcss 。我是用它结合传统的 scss ,配合 vue/react 的组件化使用
    shintendo
        21
    shintendo  
       125 天前
    css modules + tailwind
    shintendo
        22
    shintendo  
       125 天前   ❤️ 1
    记得以前比较抗拒 tailwind 是觉得它跟行内 style 差不多,把样式耦合在了 html 上面。后来有一篇文章把我说服了,大意是说把样式与 html 解耦是一个幻想,大部分脱离于 html 单独写的 css ,其实都在 css 里又维护了一份 html 结构。
    chenliangngng
        23
    chenliangngng  
       125 天前
    说说我的实践,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  
       125 天前 via Android
    我选 less/sass 。
    如果你有信心应对“五彩斑斓的黑”,tailwind 也不是不行。
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   3362 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 21ms · UTC 05:31 · PVG 13:31 · LAX 22:31 · JFK 01:31
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.