1. 首页
  2. 前端进阶
  3. CSS

同学,请停止 css-in-js 的行为

本周精读文章:请停止 css-in-js 的行为

1 引言

同学,请停止 css-in-js 的行为

这篇文章表面是在讲 CSS in JS,实际上是 CSS Modules 支持者与 styled-components 拥趸之间的唇枪舌剑、你来我往。从 2014 年 Vjeux 的演讲开始,css-in-js 的轮子层出不穷。终于过了三年,鸡血时期已经慢慢过去,大家开始冷静思考了。

2 内容概要

styled-components

styled-components 利用 ES6 的 tagged template 语法创建 react 纯样式组件。消除了人肉在 dom 和 css 之间做映射和切换的痛苦,并且有大部分编辑器插件的大力支持(语法高亮等)。此外,styled-components 在 ReactNaive 中尤其适用。

styled-components 简单易学,引用官方源码:

import React from 'react';

import styled from 'styled-components';

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

<Title>
  Hello World, this is my first styled component!
</Title>

css-modules

顾名思义,css-modules 将 css 代码模块化,可以很方面的避免本模块样式被污染。并且可以很方便的复用 css 代码。

// 全局变量
:global(.className) {
  background-color: blue;
}

// 本地变量,其它模块无法污染
.className {
  background-color: blue;
}

.title {
  // 复用 className 类的样式
  composes: className;
  color: red;
}

react-css-modules

值得一提的是,文章的作者也是 react-css-modules 的作者。

react-css-modules 代码示例:

import React from 'react';
import CSSModules from 'react-css-modules';
import styles from './table.css';

class Table extends React.Component {
    render () {
        return <div styleName='table'>
            <div styleName='row'>
                <div styleName='cell'>A0</div>
                <div styleName='cell'>B0</div>
            </div>
        </div>;
    }
}

export default CSSModules(Table, styles);

react-css-modules 引入了 styleName,将本地变量和全局变量很清晰的分开。并且也避免了每次对 styles 对象的引用,本地 className 名也不用总是写成 camelCase。

另外,使用 react-css-modules,可以方便的覆盖本地变量的样式:

import customStyles from './table-custom-styles.css';

<Table styles={customStyles} />;

文章内容

3 精读

参与本次精读的同学有 黄子毅杨森camsong。该部分由他们的观点总结而出。

CSS 本身有不少缺陷,如书写繁琐(不支持嵌套)、样式易冲突(没有作用域概念)、缺少变量(不便于一键换主题)等不一而足。为了解决这些问题,社区里的解决方案也是出了一茬又一茬,从最早的 CSS prepocessor(SASS、LESS、Stylus)到后来的后起之秀 PostCSS,再到 CSS Modules、Styled-Components 等。更有甚者,有人维护了一份完整的 CSS in JS 技术方案的对比。截至目前,已有 49 种之多。

Styled-components 优缺点

优点

使用成本低

如果是要做一个组件库,让使用方拿着 npm 就能直接用,样式全部自己搞定,不需要依赖其它组件,如 react-dnd 这种,比较适合。

更适合跨平台

适用于 react-native 这类本身就没有 css 的运行环境。

缺陷

缺乏扩展性

样式就像小孩的脸,说变就变。比如是最简单的 button,可能在用的时候由于场景不同,就需要设置不同的 font-size,height,width,border 等等,如果全部使用 css-in-js 那将需要把每个样式都变成 props,如果这个组件的 dom 还有多层级呢?你是无法把所有样式都添加到 props 中。同时也不能全部设置成变量,那就丧失了单独定制某个组件的能力。css-in-js 生成的 className 通常是不稳定的随机串,这就给外部想灵活覆盖样式增加了困难。

css-modules 优缺点

优点

1、CSS Modules 可以有效避免全局污染和样式冲突,能最大化地结合现有 CSS 生态和 JS 模块化能力

2、与 SCSS 对比,可以避免 className 的层级嵌套,只使用一个 className 就能把所有样式定义好。

缺点:

1、与组件库难以配合

2、会带来一些使用成本,本地样式覆盖困难,写到最后可能一直在用 :global。

关于 scss/less

无论是 sass 还是 less 都有一套自己的语法,postcss 更支持了自定义语法,自创的语法最大特点就是雷同,格式又不一致,增加了无意义的学习成本。我们更希望去学习和使用万变不离其宗的东西,而不愿意使用各种定制的“语法糖”来“提高效率”。

就 css 变量与 js 通信而言,虽然草案已经考虑到了这一点,通过表达式与 attribute 通信,使用 js 与 attribute 同步。不难想象,这种情况维护的变量值最终是存储在 js 中更加妥当,然而 scss 给大家带来的 css first 思想根深蒂固,导致许多基础库的变量完全存储在 _variable.scss 文件中,现在无论是想适应 css 的新特性,还使用 css-in-js 都有巨大的成本,导致项目几乎无法迁移。反过来,如果变量存储在 js 中,就像草案中说的一样轻巧,你只要换一种方式实现 css 就行了。

总结

在众多解决方案中,没有绝对的优劣。还是要结合自己的场景来决定。

我们团队在使用过 scss 和 css modules 后,仍然又重新选择了使用 scss。css modules 虽然有效解决了样式冲突的问题,但是带来的使用成本也很大。尤其是在写动画(keyframe)的时候,语法尤其奇怪,总是出错,难以调试。并且我们团队在开发时,因为大家书写规范,也从来没有碰到过样式冲突的问题。

Styled-components 笔者未曾使用过,但它消除人肉在 dom 和 css 之间做映射的优点,非常吸引我。而对于样式扩展的问题,其实也有比较优雅的方式

const CustomedButton = styled(Button)`
  color: customedColor;
`;

原文地址:https://github.com/dt-fe/weekly

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「画漫画的程序员」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

本文著作权归作者所有,如若转载,请注明出处

转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com

标题:同学,请停止 css-in-js 的行为

链接:https://www.javascriptc.com/4904.html

« 哈哈,css-in-js 杀鸡用牛刀
Compilers are the New Frameworks»
Flutter 中文教程资源

相关推荐

QR code