如何科学的组织React组件样式

leozdgao

React的组件式开发,让我们可以利用其Component Model,专注于单个组件的逻辑开发,其中还包括组织组件的样式。先声明,本文并不是webpack配置教程,不会介绍详细的配置过程,假设你们已经用过了css-loader style-loader extract-text-webpack-plugin

正在使用的方式

我们理想中的文件结构可能会是这样的:

- components
    - modal
        - modal.jsx
        - modal.css  // 可以是任意预处理器
    - dropdown
        - dropdown.jsx
        - dropdown.css

然而,js现在可以做模块化,css并不行,所有css的定义都可以被视为全局变量,在css被打包后,一个组件的样式有可能会影响到其他组件,于是我们可以通过命名约定(name convention)来曲线救国(这一点并不局限于react开发)。

@modal-prefix: modal;

.@{modal-prefix} {
}

.@{modal-prefix}-title {
}

类似于上面的使用less的方式,在文件顶部先定义个类的前缀,来尽量避免命名冲突的可能。于是在组件中就可以这样做

import React from 'react';
import './modal.less';

export default React.createClass({
    render () {
        return 

<div className="modal-title">Hello</div>

;
    }
});

上面就是我现在在用的方式,利用命名约定做到了伪模块化(其实即便不是在使用react开发项目,也会用类似的方式)。

CSS in JS

之前看到过一个ppt:https://speakerdeck.com/vjeux/react-css-in-js,谈到了类似的问题。

一个方向是把样式也直接写进组件里,即使用inline style。首先,直接用传统的inline style并不可取,它对属性的支持有限,比如不能用伪类、多个不同浏览器前缀的相同属性、媒体查询、动画等。至于重用样式而言,在react中倒是还行:将需要重用的样式对象作为模块导出即可。

其实大家很努力地希望CSS in JS可以实现,比如:

react-style

github地址

它的局限就是上面提到过的属性支持的问题,没有细究这个东西,不太喜欢。

local scoped CSS

https://github.com/css-modules/css-modules
https://github.com/webpack/css-loader#local-scope

用这个东西现在是webpack官方支持的,已在css-loader中实现,可以真正让你的css代码作为本地声明,类似的代码:

// style.css
:local(.title) { background: red; }

在需要这份样式的组件里引入这个模块:

import styles from 'style.css'



<div className={styles.title}></div>


首先css的语法中是不支持这个:local()的,我们先看看页面最终的代码:

<div class="_3dpOqNNJl6oyjYpdDHCFD9" data-reactid=".0.2.1">Info</div>

到这里应该明白了,其实这也算是个预处理器,它将:local(.title)的类名变成了一个哈希值,仅可以通过模块导入的方式来获取这个哈希值并应用到组件上(生成的类名是可以配置的)。现在css-loader可以通过添加module选项(详细内容可以参考上面CSS Modules的链接)使得css默认定义的是local scoped的,希望共享的可以用:global()定义。

也可以和预处理器混用:

:global {
  .global-class-name {
    color: green;
  }
}

目前看下来,它只对class名做哈希,也就是说:

:local(.title span) // .[hash] span

然而

:local(.title .name) // .[hash0] .[hash1]

这个算是一个有意思的方式,首先它依赖于webpack,而webpack并不局限于React的开发,任何前端项目都可以使用webpack,那么就也都可以使用CSS Modules的概念,不知道这个CSS Modules会有怎么样的发展,感觉可以尝试。

这里是一个使用样例:https://github.com/css-modules/webpack-demo

写在最后的话

目前的探索结果暂时是这样,之后可能会继续来填坑。反正现在应该不会去用CSS in JS,CSS Modules可以一试,因为css-loader这个插件基本react的项目里都会使用,写好的组件一个import, 样式和组件都有了,不过仍需实践。

阅读 19.9k

leozdgao
知识分享

前端爱好者

4k 声望
735 粉丝
0 条评论

前端爱好者

4k 声望
735 粉丝
文章目录
宣传栏