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

jackzou 发布于2019-08-30 15:45 / 864人阅读

摘要：也可以和预处理器混用目前看下来，它只对名做哈希，也就是说然而这个算是一个有意思的方式，首先它依赖于，而并不局限于的开发，任何前端项目都可以使用，那么就也都可以使用的概念，不知道这个会有怎么样的发展，感觉可以尝试。

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 

Hello

;
    }
});

上面就是我现在在用的方式，利用命名约定做到了伪模块化（其实即便不是在使用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"

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

Info

到这里应该明白了，其实这也算是个预处理器，它将: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，样式和组件都有了，不过仍需实践。

idc机房托管超融合服务器组件样式 react如何部署到云服务器上数据科学如何国际组织的域名

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116376.html

翻译 | 如何规模化 React 应用

摘要：过去，规模化大多和服务器系统有关。基本上，容器负责让组件正常工作，组件负责东西如何展示。根据这一点，我们清楚地区分了可复用组件和数据管理层。取决于应用类型，我们可以通过听取特定，来以不同方式作出反应，从而让组件真正变得可复用。朱乙（沪江前端开发工程师）本文为原创翻译，如需转载请标明出处，不当之处敬请指出我们最近发布了 React Boilerplate 3.0，在发布前几个月，我们...

Mertens 2019-07-24 15:02 评论0 收藏0
两年React老兵的总结 - 如何组织React项目

摘要：一个复杂的应用都是由简单的应用发展而来的随着越来越多的功能加入项目代码就会变得越来越难以控制本文章主要探讨在大型项目中如何对组件进行组织让项目具备可维护性系列目录类型检查组件的组织样式的管理组件的思维状态管理目录组件设计的基本原则基本原则高一个复杂的应用都是由简单的应用发展而来的, 随着越来越多的功能加入项目, 代码就会变得越来越难以控制. 本文章主要探讨在大型项目中如何对组件进行组...

hoohack 2019-08-23 18:40 评论0 收藏0
前端每周清单第 48 期：Slack Webpack 构建优化，CSS 命名规范与用户追踪，Vue.

摘要：发布是由团队开源的，操作接口库，已成为事实上的浏览器操作标准。本周正式发布，为我们带来了，，支持自定义头部与脚部，支持增强，兼容原生协议等特性变化。新特性介绍日前发布了大版本更新，引入了一系列的新特性与提升，本文即是对这些变化进行深入解读。 showImg(https://segmentfault.com/img/remote/1460000012940044); 前端每周清单专注前端...

sean 2019-08-22 13:57 评论0 收藏0
前端开发者手册2019

摘要：年，和前端开发者与应用程序前端开发者之间产生了巨大的分歧。开发最常见的解决方案有手机和平板的原生应用程序桌面应用程序桌面应用程序原生技术最后，前端开发者可以从浏览器开发中学习到，编写代码不需要考虑浏览器引擎的限制。前端开发者手册2019 Cody Lindley 编著原文地址本手册由Frontend Masters赞助，通过深入现代化的前端工程课程来提高你的技能。下载：PDF ...

church 2019-08-02 16:18 评论0 收藏0
前端开发者手册2019

摘要：年，和前端开发者与应用程序前端开发者之间产生了巨大的分歧。开发最常见的解决方案有手机和平板的原生应用程序桌面应用程序桌面应用程序原生技术最后，前端开发者可以从浏览器开发中学习到，编写代码不需要考虑浏览器引擎的限制。前端开发者手册2019 Cody Lindley 编著原文地址本手册由Frontend Masters赞助，通过深入现代化的前端工程课程来提高你的技能。下载：PDF ...

xiao7cn 2019-08-26 13:47 评论0 收藏0