威尼斯人线上娱乐

用法教程

11 2月 , 2019  

全局CSS的终结(狗带)

2015/10/24 · CSS ·
全局

原稿出处: Mark
Dalgleish   译文出处:AlloyTeam   

CSS类名总是成效在同一的全局成效域里面。

其余一个跟CSS有长日子打交道的开发者,都只好承受CSS这拥有侵袭性的全局性情,鲜明地那是一种文档流时代的布署性模型。而对于后天现代web应用,更应有主动提出一种更周密的体裁环境。

每一种CSS类名都有只怕与其他成分产生的竟然副功效,又可能暴发争执。更令人吃惊的是,我们的class的效益说不定在大局成效域的互动影响下(原文那里比喻为全局唯一性战争),最后在页面上发出很少的机能仍旧根本没有效率。

任曾几何时候大家改变一个CSS文件,大家都亟待严酷地考虑全局环境是不是暴发争论。没有其余前端技术是亟需那样之多的正规和封锁,而那只是是为着保全最低级其他可维护性。

 

、、、

 

但我们不能向来那样下来。是时候摆脱那种全局样式的折磨。开启局地CSS的一世!

“在其余语言,全局环境的修改必要改变的代码很少”

在javascript的社区中,谢谢Browserify,Webpack和JSPM,让大家的代码变得模块化,每种模块有不言而喻的依靠及其输出的API。然则,不知怎么的,CSS视乎总时被忽视掉。

大家中诸几人,包蕴自我要好,一向利用CSS工作这么长日子,大家都尚未察觉不够局地性功能域,是一种难点。因为尚未浏览器厂商的要紧救助下我们也可以缓解。即使那样,大家仍旧须要等待着,超过半数用户能动用上浏览器的ShadowDOM的支持。

在全局成效域难点上,我们曾经运用一种类的命名规范来编码。想OOCSS, SMACSS,BEM和SUIT,各个都提供着一种艺术模拟健全的功用域规则,达到防止命名争持效果。

纵然驯服CSS无疑是一个巨大的腾飞,但那么些方法都并未搞定大家样式表上实在的题材。无论大家挑选哪个规范,大家照例被卡在全局类名上。

用法教程。但,在二〇一五年的15月22号将会发出改变。

、、、
正如我们从前的一篇小说涉及到——“Block,Element,修改你的JavaScript组件”——大家得以采纳Webpack把我们的CSS
用作一种JavaScript模块来引用。借使那听起来很生疏,去读读那篇小说会是一个good
idea,以防你错失接下来要讲的内容。

使用Webpack的css-loader,引用一个零件的CSS如下:

JavaScript

require(‘./MyComponent.css’);

1
require(‘./MyComponent.css’);

乍一看,那很想得到,大家引用的是CSS而不是JavaScript

一般,一个require引入的应该提供一些有的成效域。若是否,分明低会发生全局成效域的副功能,那是一种鸠拙的陈设。而CSS的大局效能域性情,却一定暴发如此的副成效。

为此大家在思想

、、、

2015年4月22日,Tobias
Koppers那位对Webpack孜孜不倦的代码提交者,提交了一个css-loader新性格的版本提交。当时叫placeholder,而前几日叫local-scope。那几个特点允许大家输出classname从我们的CSS到应用中的JavaScript代码。

粗略,下边那种写法:

JavaScript

requrie(‘./MyComponent.css’);

1
requrie(‘./MyComponent.css’);

咱俩改为

JavaScript

import styles from ‘./MyComponent.css’;

1
import styles from ‘./MyComponent.css’;

看望大家导出的CSS是什么的,大家的代码差不离如下:

:local(.foo){ color: red; } :local(.bar){ color:blue; }

1
2
3
4
5
6
:local(.foo){
    color: red;
}
:local(.bar){
    color:blue;
}

在地点的例证中我们使用css-loader的定制的语法  :local(.idntifier) ,输出了五个的标识符,foo和bar。
那几个标识符对应着class
strings,那将用在javascript文件中去。例如,当大家应用React:

import styles from ‘./MyComponent.css’; import React, { Component } from
‘react’; export default class MyComponent extends Component { render() {
return ( <div> <div className={styles.foo}>Foo</div>
<div className={styles.bar}>Bar</div> </div> ); } }

1
2
3
4
5
6
7
8
9
10
11
12
import styles from ‘./MyComponent.css’;
import React, { Component } from ‘react’;
export default class MyComponent extends Component {
  render() {
    return (
      <div>
        <div className={styles.foo}>Foo</div>
        <div className={styles.bar}>Bar</div>
      </div>
    );
  }
}

珍惜的是,那些标识符映射的class strings,在全局效率域上是保证唯一的。
我们不再须求给持有的类名添加冗长的前缀来模拟范围。八个零部件可以自定义本人的foo和bar标识符。——不像古板的大局作用域的情势,也不会爆发命名争辨。

、、、

格外关键的某些,不得不认可这一度暴发了宏伟转变。
咱俩今天更有信心地大胆修改我们的CSS,不用触目惊心地怕影响其它页面的要素。大家引入了一个周密的成效域方式

大局CSS的好处是,组件间通过通用的class来完结复用的功用——那还可以在部分作用域模型上已毕。关键的分别是,就好像大家编码在任何语言上,大家要求显式地引入大家赖以的类。假想一下在大局命名环境,大家引入的有的CSS不须要过多。

“编写可保险的CSS将来是值得提倡的,但不是通过谨慎地准守一个命名约定,而是在支付进程中通过单独的包裹”

出于这么些作用域模型,大家把实际的classname的控制权移交给Webpack。幸运的是,那是本人可以配备的。暗中同意境况下,css-loader会把标识符转换成为hash。
例如:

JavaScript

:local(.foo){….}

1
:local(.foo){….}

 

编译为:

JavaScript

._1rJwx92-gmbvaLiDdzgXiJ { … }

1
._1rJwx92-gmbvaLiDdzgXiJ { … }

在开发条件调试来讲,会带带来一些拦住。为了令到我们的classes变得尤为有用,大家可在Webpack的config里面安装css-loader的参数,配置class的格式。

JavaScript

loaders: [ … { test: /\.css$/, loader:
‘css?localIdentName=[name]__[local]___[hash:base64:5]’ } ]

1
2
3
4
5
6
7
loaders: [
  …
  {
    test: /\.css$/,
    loader: ‘css?localIdentName=[name]__[local]___[hash:base64:5]’
  }
]

在这五遍,大家的foo那个class会比此前编译的一发好辨认:

JavaScript

.MyComponent__foo___1rJwx { … }

1
.MyComponent__foo___1rJwx { … }

大家能清晰地看收获标识符的名字,以及他来自哪个组件。使用node_env环境变量,大家能依据开发情势和生产条件布署差其余class命名模式。

JavaScript

loader: ‘css?localIdentName=’ + ( process.env.NODE_ENV ===
‘development’ ? ‘[name]__[local]___[hash:base64:5]’ :
‘[hash:base64:5]’ )

1
2
3
4
5
loader: ‘css?localIdentName=’ + (
  process.env.NODE_ENV === ‘development’ ?
    ‘[name]__[local]___[hash:base64:5]’ :
    ‘[hash:base64:5]’
)

 

假诺我们发现这些特点,大家决不犹豫地在我们最新的系列上本地化起来。如若依据常规,大家已经为组件化而利用BEM命名CSS,那真是天作之合。

有趣的是,一种现象很快地涌出了,大家超过一半CSS文件里唯有局部化class:

JavaScript

:local(.backdrop) { … } :local(.root_isCollapsed .backdrop) { … }
:local(.field) { … } :local(.field):focus { … } etc…

1
2
3
4
5
:local(.backdrop) { … }
:local(.root_isCollapsed .backdrop) { … }
:local(.field) { … }
:local(.field):focus { … }
etc…

 

全局性的class仅仅在web应用里面的一小部分,本能地引开出一个最主要难题:

“借使不需求特殊语法,我们的class暗中认可是区域性的,而让全局性的class要求不相同。咋样?”

要是这么,大家地点的代码就改为如下:

JavaScript

.backdrop { … } .root_isCollapsed .backdrop { … } .field { … }
.field:focus { … }

1
2
3
4
.backdrop { … }
.root_isCollapsed .backdrop { … }
.field { … }
.field:focus { … }

 

尽管那class日常会超负荷模糊,但当他们转移为css-lodaer的局地作用域的格式后将会去掉这一标题。并且保险了家喻户晓的模块功效域来使用。

个别状态,大家不可以防止全局样式,大家可以一目通晓地标爱他美个非凡的大局语法。例如,当样式使用ReactCSSTransitionGroup来生成一个无效益域classes。

.panel :global .transition-active-enter{…}

在那一个例子中,大家不光是利用本地化方式命名我的模块,我们也命名了一个不在大家的功用域上的大局class。

、、、

只要我起来调研本人如何落到实处那几个暗中认同局地化class语法,大家发现到它不会太勤奋。
为了达成那些目标,我们推荐PostCSS——一个神奇的工具允许你编写自定义的CSS转换插件。后天最受欢迎的CSS打造工具Autoprefixer实在是PostCSS插件,同时为一个独门的工具而已。

为让有些CSS正式地动用,我早已开源了一个可观实验性质的插件postcss-local-scope。它依然在腾飞,所以在生育环境中利用你须要控制风险。

即使您利用Webpack,那是极度不难的流水线:挂上postcss-loader和postcss-local-scope在你的CSS创设流程。比起文档,我早就创建了一个示例库——postcss-local-scope-example。里面显示了怎么利用的例子。
令人激动的是,引入局地作用域仅仅是一个初叶。
让打造工具处理classname有一部分私房的宏伟影响。从长期来看,我们相应截止人为的编译器,而是让电脑来优化出口。

“在今后,我们可以在一个最优的编译时间内,自动化找出可拔取的体裁,生成可组件之间共享的class”

万一你品味了部分CSS,你就回不去了。真正体验过,样式的部分作用性在享有浏览器上运行如常,你会难以忘记的心得。

引入局地效率域对大家处理CSS有主要的的连带反应。命名规范,重用方式,潜在的体制抽离,分包等等,都会一向境遇那种变化的影响。大家无非在那边早先了有些CSS的一世。

理解那种转变的影响是大家依旧需求用力。伴随你有价值的投入和尝试,我愿意那是用作一个更大的社区的一遍讲话

“参预大家,check出postcss-local-scope-example的代码,眼见为实”

假如你行动了,我以为你会容许那并不夸大:
全局CSS的光阴将会终结,局地CSS才是前景。

 

后记:
二〇一五年九月24日:
postcss-local-scope的最初想法已经被Webpack的托拜厄斯Koppers所承受。那意味着改项目曾经被弃用了。以后大家初步确认在css-loader上通过一个module的注解可以支撑CSS
Modules。我创造了一个库来演示CSSModules在css-loader上的用法,包罗类的存续及功用组件间共享样式等。

1 赞 1 收藏
评论

威尼斯人线上娱乐 1

CSS Modules 用法教程

2016/06/19 · CSS ·
Modules

初稿出处:
阮一峰   

学过网页开发就会分晓,CSS 不只怕算编程语言,只是网页样式的一种描述方法。

为了让 CSS
也能适用软件工程措施,程序员想了各类法子,让它变得像一门编程语言。从最早的Less、SASS,到后来的
PostCSS,再到方今的 CSS in JS,都以为着解决这些标题。

威尼斯人线上娱乐 2

本文介绍的 CSS Modules
有所差别。它不是将 CSS
改造成编程语言,而是功用很单纯,只进入了有些功用域和模块看重,那刚好是网页组件最需求的成效。

于是,CSS Modules
很容易学,因为它的平整少,同时又尤其有用,可以确保某个组件的体裁,不会影响到其他零件。

威尼斯人线上娱乐 3

CSS Modules 入门及 React 中实践

2017/03/25 · CSS ·
React

原文出处:
AlloyTeam   

CSS Modules 详解及 React 中实践

2016/01/18 · CSS · CSS
Modules,
React

原稿出处: pure render –
camsong   

威尼斯人线上娱乐 4

CSS 是前者领域中迈入最慢的一块。由于 ES2015/2016 的长足普及和
Babel/Webpack 等工具的迅猛发展,CSS
被远远甩在了背后,渐渐改为大型项目工程化的痛点。也成为了前者走向绝望模块化前务必化解的难点。

CSS 模块化的化解方案有那些,但要害有两类。一类是干净扬弃 CSS,使用 JS 或
JSON
来写样式。Radium,jsxstyle,react-style
属于这一类。优点是能给 CSS 提供 JS
同样强大的模块化能力;缺点是无法应用成熟的 CSS 预处理器(或后电脑)
Sass/Less/PostCSS,:hover:active
伪类处理起来复杂。另一类是依然利用 CSS,但运用 JS 来管理体制依赖,代表是
CSS
Modules。CSS
Modules 能最大化地结合现有 CSS 生态和 JS 模块化能力,API
简洁到大致零读书费用。宣布时仍然编译出单身的 JS 和 CSS。它并不依靠于
React,只要你利用 Webpack,可以在 Vue/Angular/jQuery
中应用。是自家以为日前最好的 CSS
模块化解决方案。近年来在品种中多量应用,下边具体享受下实施中的细节和想方设法。

 

零、示例库

自家为那一个课程写了一个示例库,包蕴四个Demo。通过它们,你可以轻松学会CSS
Modules。

首先,克隆示例库。

JavaScript

$ git clone

1
$ git clone https://github.com/ruanyf/css-modules-demos.git

下一场,安装倚重。

JavaScript

$ cd css-modules-demos $ npm install

1
2
$ cd css-modules-demos
$ npm install

跟着,就可以运行第二个示范了。

JavaScript

$ npm run demo01

1
$ npm run demo01

开拓浏览器,访问

写在面前

读文先看此图,能先有个几乎概念:

威尼斯人线上娱乐 5

翻阅本文要求 11m 24s。

CSS 模块化碰着了哪些难点?

CSS 模块化主要的是要缓解好多个难题:CSS
样式的导入和导出。灵活按需导入以便复用代码;导出时要力所能及隐藏其中效能域,避防导致全局污染。Sass/Less/PostCSS
等后续试图缓解 CSS
编程能力弱的题材,结果它们做的也确实可以,但那并不曾缓解模块化最根本的难题。Facebook工程师 Vjeux 首先抛出了 React 开发中遇到的一层层 CSS
相关难题。加上自己个人的见地,总括如下:

  1. 大局污染

CSS
使用全局选拔器机制来安装样式,优点是惠及重写样式。缺点是拥有的样式都是全局生效,样式大概被漏洞卓殊多覆盖,因而暴发了至极难看的
!important,甚至 inline !important
和复杂性的[分选器权重计数表](Selectors Level
3),提升犯错可能率和使用资金。Web
Components 标准中的 Shadow DOM
能彻底化解这几个标题,但它的做法有点极端,样式彻底局地化,造成外部不或然重写样式,损失了灵活性。

  1. 命名混乱

 

鉴于全局污染的标题,三个人一齐开发时为了防止样式争辨,拔取器越来越复杂,不难形成区其他命名风格,很难统一。样式变多后,命老将越发混乱。

  1. 凭借管理不彻底

零件应该相互独立,引入一个零件时,应该只引入它所须要的 CSS
样式。但现行的做法是除了要引入 JS,还要再引入它的 CSS,而且 Saas/Less
很难落到实处对每种组件都编译出单身的 CSS,引入所有模块的 CSS 又导致浪费。JS
的模块化已经特别成熟,如若能让 JS 来管理 CSS
看重是很好的解决办法。Webpack 的 css-loader 提供了那种能力。

  1. 不能共享变量

复杂组件要使用 JS 和 CSS 来共同处理体制,就会招致有些变量在 JS 和 CSS
中冗余,Sass/PostCSS/CSS 等都不提供跨 JS 和 CSS 共享变量那种力量。

  1. 代码压缩不彻底

由于活动端互连网的不确定性,今后对 CSS
压缩已经到了变态的水平。很多压缩工具为了节约一个字节会把 ’16px’ 转成
‘1pc’。但对万分长的 class 名却没办法,力没有用到刀刃上。

上边的难点即使只凭 CSS 自己是无能为力缓解的,借使是透过 JS 来保管 CSS
就很好化解,由此 Vjuex 给出的化解方案是完全的 CSS in
JS,但这一定于完全抛弃CSS,在 JS 中以 Object 语法来写
CSS,推测刚看到的同伴都震惊了。直到出现了 CSS Modules。

 

一、局地功效域

CSS的规则都以大局的,任何一个组件的样式规则,都对任何页面有效。

发出一些效率域的绝无仅有方式,就是选择一个无比的class的名字,不会与其他拔取爱惜名。那就是
CSS Modules 的做法。

下边是一个React组件App.js。

JavaScript

import React from ‘react’; import style from ‘./App.css’; export default
() => { return ( <h1 className={style.title}> Hello World
</h1> ); };

1
2
3
4
5
6
7
8
9
10
import React from ‘react’;
import style from ‘./App.css’;
 
export default () => {
  return (
    <h1 className={style.title}>
      Hello World
    </h1>
  );
};

地点代码中,我们将样式文件App.css输入到style对象,然后引用style.title代表一个class。

CSS

.title { color: red; }

1
2
3
.title {
  color: red;
}

构建工具会将类名style.title编译成一个哈希字符串。

XHTML

<h1 class=”_3zyde4l1yATCOkgn-DBWEL”> Hello World </h1>

1
2
3
<h1 class="_3zyde4l1yATCOkgn-DBWEL">
  Hello World
</h1>

App.css也会同时被编译。

JavaScript

._3zyde4l1yATCOkgn-DBWEL { color: red; }

1
2
3
._3zyde4l1yATCOkgn-DBWEL {
  color: red;
}

那样一来,这几个类名就改为独一无二了,只对App组件有效。

CSS Modules
提供各个插件,协助分歧的营造工具。本文使用的是
Webpack
的css-loader插件,因为它对
CSS Modules 的协理最好,而且很简单选取。顺便说一下,若是您想学
Webpack,可以阅读我的课程Webpack-Demos。

下边是以此示例的webpack.config.js。

JavaScript

module.exports = { entry: __dirname + ‘/index.js’, output: {
publicPath: ‘/’, filename: ‘./bundle.js’ }, module: { loaders: [ {
test: /.jsx?$/, exclude: /node_modules/, loader: ‘babel’, query: {
presets: [‘es2015’, ‘stage-0’, ‘react’] } }, { test: /.css$/, loader:
“style-loader!css-loader?modules” }, ] } };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
module.exports = {
  entry: __dirname + ‘/index.js’,
  output: {
    publicPath: ‘/’,
    filename: ‘./bundle.js’
  },
  module: {
    loaders: [
      {
        test: /.jsx?$/,
        exclude: /node_modules/,
        loader: ‘babel’,
        query: {
          presets: [‘es2015’, ‘stage-0’, ‘react’]
        }
      },
      {
        test: /.css$/,
        loader: "style-loader!css-loader?modules"
      },
    ]
  }
};

上边代码中,关键的一行是style-loader!css-loader?modules,它在css-loader后边加了一个查询参数modules,表示打开
CSS Modules 作用。

将来,运行这几个Demo。

JavaScript

$ npm run demo01

1
$ npm run demo01

打开
,可以见见结果,h1标题呈现为革命。

CSS Modules介绍

CSS Modules是如何事物吧?首先,让我们从官方文档出手:
GitHub – css-modules/css-modules: Documentation about
css-modules

A CSS Module is a CSS file in which all class names and animation
names are scoped locally by default.
CSS模块就是颇具的类名都只有一部分效用域的CSS文件。

之所以CSS
Modules既不是合法正式,也不是浏览器的性状,而是在打造步骤(例如利用Webpack或Browserify)中对CSS类名拔取器限定功效域的一种艺术(通过hash完结类似于命名空间的办法)。

It doesn’t really matter in the end (although shorter class names mean
shorter stylesheets) because the point is that they are dynamically
generated, unique, and mapped to the correct
styles.在运用CSS模块时,类名是动态变化的,唯一的,并规范对应到源文件中的各类类的体制。

这也是落到实处样式成效域的法则。它们被界定在特定的模版里。例如大家在buttons.js里引入buttons.css文件,并使用.btn的体裁,在其他零件里是不会被.btn影响的,除非它也引入了buttons.css.

可大家是出于怎么样目标把CSS和HTML文件搞得这么零碎呢?大家怎么要选拔CSS模块呢?

CSS Modules 模块化方案

威尼斯人线上娱乐 6

CSS Modules 内部通过 [ICSS](css-modules/icss ·
GitHub)
来化解体制导入和导出那七个难点。分别对应 :import:export
七个新增的伪类。

JavaScript

:import(“path/to/dep.css”) { localAlias: keyFromDep; /* … */ }
:export { exportedKey: exportedValue; /* … */ }

1
2
3
4
5
6
7
8
:import("path/to/dep.css") {
  localAlias: keyFromDep;
  /* … */
}
:export {
  exportedKey: exportedValue;
  /* … */
}

 

但一向利用这多少个举足轻重字编程太难为,实际项目中很少会直接运用它们,大家须求的是用
JS 来保管 CSS 的能力。结合 Webpack 的 css-loader 后,就足以在 CSS
中定义样式,在 JS 中导入。
启用 CSS Modules

JavaScript

// webpack.config.js
css?modules&localIdentName=[name]__[local]-[hash:base64:5]

1
2
// webpack.config.js
css?modules&localIdentName=[name]__[local]-[hash:base64:5]

加上 modules 即为启用,localIdentName 是设置生成样式的命名规则。

JavaScript

/* components/Button.css */ .normal { /* normal 相关的有所样式 */ }
.disabled { /* disabled 相关的装有样式 */ }

1
2
3
/* components/Button.css */
.normal { /* normal 相关的所有样式 */ }
.disabled { /* disabled 相关的所有样式 */ }

JavaScript

// components/Button.js import styles from ‘./Button.css’;
console.log(styles); buttonElem.outerHTML = `<button
class=${styles.normal}>Submit</button>`

1
2
3
4
// components/Button.js
import styles from ‘./Button.css’;
console.log(styles);
buttonElem.outerHTML = `<button class=${styles.normal}>Submit</button>`

生成的 HTML 是

<button class=”button–normal-abc53″>Submit</button>

1
<button class="button–normal-abc53">Submit</button>

 

注意到 button--normal-abc53 是 CSS Modules 按照 localIdentName
自动生成的 class 名。其中的 abc53
是根据给定算法生成的种类码。经过这么模糊处理后,class
名基本就是绝无仅有的,大大降低了档次中样式覆盖的可能率。同时在生育环境下修改规则,生成更短的
class 名,可以进步 CSS 的压缩率。

上例中 console 打印的结果是:

JavaScript

Object { normal: ‘button–normal-abc53’, disabled:
‘button–disabled-def886’, }

1
2
3
4
Object {
  normal: ‘button–normal-abc53’,
  disabled: ‘button–disabled-def886’,
}

CSS Modules 对 CSS 中的 class 名都做了拍卖,使用对象来保存原 class
和混淆后 class 的对应关系。

由此这一个概括的拍卖,CSS Modules 完结了以下几点:

  • 所有样式都以 local 的,化解了命名顶牛和全局污染难点
  • class 名生成规则配置灵活,可以此来裁减 class 名
  • 只需引用组件的 JS 就能解决组件所有的 JS 和 CSS
  • 如故是 CSS,大概 0 学习话费

体制暗许局地

采纳了 CSS Modules 后,就一定于给各种 class 名外加加了一个
:local,以此来兑现样式的局地化,若是您想切换来全局形式,使用相应的
:global

:local:global 的分别是 CSS Modules 只会对 :local 块的 class
样式做 localIdentName 规则处理,:global 的体裁编译后不变。

JavaScript

.normal { color: green; } /* 以上与下部等价 */ :local(.normal) {
color: green; } /* 定义全局样式 */ :global(.btn) { color: red; } /*
定义五个全局样式 */ :global { .link { color: green; } .box { color:
yellow; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.normal {
  color: green;
}
 
/* 以上与下面等价 */
:local(.normal) {
  color: green;
}
 
/* 定义全局样式 */
:global(.btn) {
  color: red;
}
 
/* 定义多个全局样式 */
:global {
  .link {
    color: green;
  }
  .box {
    color: yellow;
  }
}

Compose 来构成样式

对此样式复用,CSS Modules 只提供了唯一的不二法门来拍卖:composes 组合

JavaScript

/* components/Button.css */ .base { /* 所有通用的体裁 */ } .normal {
composes: base; /* normal 别的样式 */ } .disabled { composes: base;
/* disabled 其余样式 */ }

1
2
3
4
5
6
7
8
9
10
11
12
/* components/Button.css */
.base { /* 所有通用的样式 */ }
 
.normal {
  composes: base;
  /* normal 其它样式 */
}
 
.disabled {
  composes: base;
  /* disabled 其它样式 */
}

JavaScript

import styles from ‘./Button.css’; buttonElem.outerHTML = `<button
class=${styles.normal}>Submit</button>`

1
2
3
import styles from ‘./Button.css’;
 
buttonElem.outerHTML = `<button class=${styles.normal}>Submit</button>`

生成的 HTML 变为

<button class=”button–base-fec26
button–normal-abc53″>Submit</button>

1
<button class="button–base-fec26 button–normal-abc53">Submit</button>

由于在 .normal 中 composes 了 .base,编译后会 normal 会变成两个class。

composes 仍是可以组成外部文件中的样式。

JavaScript

/* settings.css */ .primary-color { color: #f40; } /*
components/Button.css */ .base { /* 所有通用的体制 */ } .primary {
composes: base; composes: primary-color from ‘./settings.css’; /*
primary 此外样式 */ }

1
2
3
4
5
6
7
8
9
10
11
12
13
/* settings.css */
.primary-color {
  color: #f40;
}
 
/* components/Button.css */
.base { /* 所有通用的样式 */ }
 
.primary {
  composes: base;
  composes: primary-color from ‘./settings.css’;
  /* primary 其它样式 */
}

 

对于多数门类,有了 composes 后曾经不再须要Sass/Less/PostCSS。但假诺您想用的话,由于 composes 不是标准的 CSS
语法,编译时会报错。就只能利用预处理器自身的语法来做样式复用了。
class 命名技巧

CSS Modules 的命名规范是从 BEM 增加而来。BEM 把体制名分为 3
个级别,分别是:

  • Block:对应模块名,如 Dialog
  • Element:对应模块中的节点名 Confirm Button
  • Modifier:对应节点相关的情景,如 disabled、highlight

综上,BEM 最后获得的 class 名为
dialog__confirm-button--highlight。使用双标志 __--
是为着和区块内单词间的相间符区分开来。纵然看起来有点意外,但 BEM
被尤其多的大型项目和团队选用。我们实施下来也很认可那种命有名的模特式。

CSS Modules 中 CSS 文件名正要对应 Block 名,只须求再考虑 Element 和
Modifier。BEM 对应到 CSS Modules 的做法是:

JavaScript

/* .dialog.css */ .ConfirmButton–disabled { /* … */ }

1
2
3
4
/* .dialog.css */
.ConfirmButton–disabled {
  /* … */
}

您也得以不依据完全的命名规范,使用 camelCase 的写法把 Block 和 Modifier
放到一起:

JavaScript

/* .dialog.css */ .disabledConfirmButton { }

1
2
3
/* .dialog.css */
.disabledConfirmButton {
}

何以完结CSS,JS变量共享

注:CSS Modules 中尚无变量的定义,那里的 CSS 变量指的是 Sass 中的变量。

地方提到的 :export 关键字可以把 CSS 中的 变量输出到 JS
中。下边演示怎样在 JS 中读取 Sass 变量:

JavaScript

/* config.scss */ $primary-color: #f40; :export { primaryColor:
$primary-color; }

1
2
3
4
5
6
/* config.scss */
$primary-color: #f40;
 
:export {
  primaryColor: $primary-color;
}

 

JavaScript

/* app.js */ import style from ‘config.scss’; // 会输出 #F40
console.log(style.primaryColor);

1
2
3
4
5
/* app.js */
import style from ‘config.scss’;
 
// 会输出 #F40
console.log(style.primaryColor);

二、全局成效域

CSS Modules
允许选取:global(.className)的语法,声Bellamy(Bellamy)个大局规则。凡是那样表明的class,都不会被编译成哈希字符串。

App.css投入一个大局class。

JavaScript

.title { color: red; } :global(.title) { color: green; }

1
2
3
4
5
6
7
.title {
  color: red;
}
 
:global(.title) {
  color: green;
}

App.js应用普通的class的写法,就会引用全局class。

JavaScript

import React from ‘react’; import styles from ‘./App.css’; export
default () => { return ( <h1 className=”title”> Hello World
</h1> ); };

1
2
3
4
5
6
7
8
9
10
import React from ‘react’;
import styles from ‘./App.css’;
 
export default () => {
  return (
    <h1 className="title">
      Hello World
    </h1>
  );
};

运作那个示例。

JavaScript

$ npm run demo02

1
$ npm run demo02

打开

CSS Modules
还提供一种显式的一对功用域语法:local(.className),等同于.className,所以地点的App.css也得以写成上边那样。

JavaScript

:local(.title) { color: red; } :global(.title) { color: green; }

1
2
3
4
5
6
7
:local(.title) {
  color: red;
}
 
:global(.title) {
  color: green;
}

为何大家要求CSS模块化

CSS Modules 使用技术

CSS Modules 是对现有的 CSS
做减法。为了追求**简单可控**,作者提出依照如下原则:

  • 不接纳接纳器,只利用 class 名来定义样式
  • 不层叠多少个 class,只使用一个 class 把所有样式定义好
  • 不嵌套
  • 使用 composes 组合来促成复用

上面两条标准约等于削弱了体制中最灵敏的一部分,初使用者很难接受。第一条实施起来难度不大,但第二条要是模块状态过多时,class
数量将加倍上涨。

一定要明了,上边之所以称为指出,是因为 CSS Modules
并不强制你早晚要如此做。听起来有点格格不入,由于多数 CSS
项目设有深厚的野史遗留难点,过多的限制就代表扩充迁移开销和与外部合作的血本。初期使用中必将必要部分和平解决。幸运的是,CSS
Modules 那点做的很好:

1. 如果本人对一个成分运用多少个 class 呢?

没难点,样式依旧生效。

2. 什么自己在一个 style 文件中行使同名 class 呢?

没难点,这几个同名 class 编译后虽说大概是随机码,但仍是同名的。

3. 倘若我在 style 文件中运用了 id 选用器,伪类,标签选用器等啊?

没难点,所有那一个选取器将不被更换,原封不动的产出在编译后的 css
中。也就是说 CSS Modules 只会转换 class 名相关样式。

但注意,上面 3 个“假诺”尽量不要暴发

三、定制哈希类名

css-loader默许的哈希算法是[hash:base64],这会将.title编译成._3zyde4l1yATCOkgn-DBWEL那样的字符串。

威尼斯人线上娱乐 ,webpack.config.js里头能够定制哈希字符串的格式。

JavaScript

module: { loaders: [ // … { test: /.css$/, loader:
“style-loader!css-loader?modules&localIdentName=[path][name]—[local]—[hash:base64:5]”
}, ] }

1
2
3
4
5
6
7
8
9
module: {
  loaders: [
    // …
    {
      test: /.css$/,
      loader: "style-loader!css-loader?modules&amp;localIdentName=[path][name]—[local]—[hash:base64:5]"
    },
  ]
}

运转这么些示例。

JavaScript

$ npm run demo03

1
$ npm run demo03

你会发现.title被编译成了demo03-components-App—title—GpMto。

CSS全局作用域难点

CSS的规则都以大局的,任何一个组件的样式规则,都对任何页面有效。相信写css的人都会赶上样式冲突(污染)的标题。

于是一般这么做(小编都做过):
* class命名写长一点吧,下落顶牛的可能率
* 加个父成分的拔取器,限制范围
* 重新命名个class吧,相比较保险

据此亟待化解的题材就是css局地效用域幸免全局样式争执(污染)的标题

CSS Modules 结合 React 实践

className 处直接使用 css 中 class 名即可。

JavaScript

.root {} .confirm {} .disabledConfirm {}

1
2
3
.root {}
.confirm {}
.disabledConfirm {}

import classNames from ‘classnames’; import styles from ‘./dialog.css’;
export default class Dialog extends React.Component { render() { const
cx = classNames({ confirm: !this.state.disabled, disabledConfirm:
this.state.disabled }); return <div className={styles.root}> <a
className={styles.disabledConfirm}>Confirm</a> … </div>
} }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import classNames from ‘classnames’;
import styles from ‘./dialog.css’;
 
export default class Dialog extends React.Component {
  render() {
    const cx = classNames({
      confirm: !this.state.disabled,
      disabledConfirm: this.state.disabled
    });
 
    return <div className={styles.root}>
      <a className={styles.disabledConfirm}>Confirm</a>
      …
    </div>
  }
}

专注,一般把组件最外层节点对应的 class 名称为 root。那里运用了
[classnames](https://www.npmjs.com/package/classnames)
库来操作 class 名。

一经你不想频繁的输入 styles.**,可以试一下
[react-css-modules](gajus/react-css-modules ·
GitHub),它经过高阶函数的方式来避免再次输入
styles.**

CSS Modules 结合历史遗留项目执行

好的技能方案除了作用强大炫酷,还要能形成现有项目能平滑迁移。CSS Modules
在那点上展现的万分灵活。

表面怎么样覆盖局地样式

当生成混淆的 class 名后,可以化解命名争持,但因为不可能预言最后 class
名,不大概透过一般选用器覆盖。大家以往项目中的实践是足以给组件关键节点加上
data-role 属性,然后通过品质采纳器来覆盖样式。

// dialog.js return <div className={styles.root}
data-role=’dialog-root’> <a className={styles.disabledConfirm}
data-role=’dialog-confirm-btn’>Confirm</a> … </div>

1
2
3
4
5
// dialog.js
  return <div className={styles.root} data-role=’dialog-root’>
      <a className={styles.disabledConfirm} data-role=’dialog-confirm-btn’>Confirm</a>
      …
  </div>

 

JavaScript

/* dialog.css */ [data-role=”dialog-root”] { // override style }

1
2
3
4
/* dialog.css */
[data-role="dialog-root"] {
  // override style
}

因为 CSS Modules 只会扭转类选取器,所以这里的属性选用器不须求添加
:global

怎么着与全局样式共存

前者项目不可防止会引入 normalize.css 或其余一类全局 css 文件。使用
Webpack 可以让全局样式和 CSS Modules
的一部分样式和谐共存。上面是大家项目中接纳的 webpack 部分安插代码:

JavaScript

小说权归小编所有。 商业转发请联系小编得到授权,非商业转发请声明出处。
小编:camsong 链接:
来源:知乎 // webpack.config.js 局部 module: { loaders: [{ test:
/\.jsx?$/, loader: ‘babel’ }, { test: /\.scss$/, exclude:
path.resolve(__dirname, ‘src/styles’), loader:
‘style!css?modules&localIdentName=[name]__[local]!sass?sourceMap=true’
}, { test: /\.scss$/, include: path.resolve(__dirname, ‘src/styles’),
loader: ‘style!css!sass?sourceMap=true’ }] }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
作者:camsong
链接:http://zhuanlan.zhihu.com/purerender/20495964
来源:知乎
 
// webpack.config.js 局部
module: {
  loaders: [{
    test: /\.jsx?$/,
    loader: ‘babel’
  }, {
    test: /\.scss$/,
    exclude: path.resolve(__dirname, ‘src/styles’),
    loader: ‘style!css?modules&localIdentName=[name]__[local]!sass?sourceMap=true’
  }, {
    test: /\.scss$/,
    include: path.resolve(__dirname, ‘src/styles’),
    loader: ‘style!css!sass?sourceMap=true’
  }]
}

JavaScript

/* src/app.js */ import ‘./styles/app.scss’; import Component from
‘./view/Component’ /* src/views/Component.js */ // 以下为组件相关样式
import ‘./Component.scss’;

1
2
3
4
5
6
7
/* src/app.js */
import ‘./styles/app.scss’;
import Component from ‘./view/Component’
 
/* src/views/Component.js */
// 以下为组件相关样式
import ‘./Component.scss’;

目录结构如下:

JavaScript

src ├── app.js ├── styles │ ├── app.scss │ └── normalize.scss └── views
├── Component.js └── Component.scss

1
2
3
4
5
6
7
8
src
├── app.js
├── styles
│   ├── app.scss
│   └── normalize.scss
└── views
    ├── Component.js
    └── Component.scss

那样具有全局的样式都放到 src/styles/app.scss
中引入就足以了。其余具有目录包括 src/views 中的样式都是部分的。

四、 Class 的组合

在 CSS Modules
中,一个选拔器可以延续另一个采纳器的规则,这名叫”组合”(“composition”)。

在App.css中,让.title继承.className

JavaScript

.className { background-color: blue; } .title { composes: className;
color: red; }

1
2
3
4
5
6
7
8
.className {
  background-color: blue;
}
 
.title {
  composes: className;
  color: red;
}

App.js不要修改。

JavaScript

import React from ‘react’; import style from ‘./App.css’; export default
() => { return ( <h1 className={style.title}> Hello World
</h1> ); };

1
2
3
4
5
6
7
8
9
10
import React from ‘react’;
import style from ‘./App.css’;
 
export default () => {
  return (
    <h1 className={style.title}>
      Hello World
    </h1>
  );
};

运转这几个示例。

JavaScript

$ npm run demo04

1
$ npm run demo04

打开

App.css编译成下边的代码。

JavaScript

._2DHwuiHWMnKTOYG45T0x34 { color: red; } ._10B-buq6_BEOTOl9urIjf8 {
background-color: blue; }

1
2
3
4
5
6
7
._2DHwuiHWMnKTOYG45T0x34 {
  color: red;
}
 
._10B-buq6_BEOTOl9urIjf8 {
  background-color: blue;
}

相应地, h1的class也会编译成<h1 class=”_2DHwuiHWMnKTOYG45T0x34
_10B-buq6_BEOTOl9urIjf8″>。

JS CSS不可以共享变量

复杂组件要运用 JS 和 CSS 来共同处理体制,就会导致有些变量在 JS 和 CSS
中冗余,CSS预处理器/后处理器 等都不提供跨 JS 和 CSS 共享变量那种能力。

总结

CSS Modules 很好的化解了 CSS 近来面临的模块化难点。扶助与
Sass/Less/PostCSS
等搭配使用,能丰硕利用现有技术积累。同时也能和大局样式灵活搭配,便于项目中日渐搬迁至
CSS Modules。CSS Modules
的达成也属轻量级,以往有业内搞定方案后方可低本钱迁移。要是你的成品中正好遇到类似难题,万分值得一试。

1 赞 2 收藏
评论

威尼斯人线上娱乐 7

五、输入任何模块

选用器也得以三番五次其他CSS文件之中的平整。

another.css

JavaScript

.className { background-color: blue; }

1
2
3
.className {
  background-color: blue;
}

App.css可以继承another.css里面的平整。

JavaScript

.title { composes: className from ‘./another.css’; color: red; }

1
2
3
4
.title {
  composes: className from ‘./another.css’;
  color: red;
}

运作那个示例。

JavaScript

$ npm run demo05

1
$ npm run demo05

打开

年轻力壮并且增加方便的CSS

用作有追求的工程师,编写健壮并且增添方便的CSS一贯是大家的靶子。那么怎么着定义健壮并且扩充方便?有多个中央:

  • 面向组件 – 处理 UI 复杂性的最佳实践就是将 UI 分割成一个个的小组件
    Locality_of_reference
    。如若你正在使用一个靠边的框架,JavaScript
    方面就将原生帮忙(组件化)。举个例子,React
    就鼓励中度组件化和撤并。大家意在有一个 CSS 架构去匹配。
  • 沙箱化(Sandboxed) –
    如若一个组件的体制会对任何零件爆发不需求以及意外的影响,那么将
    UI
    分割成组件并不曾什么用。就那地方而言,CSS的全局意义域会给你造成负担。
  • 便利 –
    我们想要所有好的东西,并且不想暴发越来越多的行事。也等于说,我们不想因为运用那么些架构而让大家的开发者体验变得更糟。或许的话,我们想开发者体验变得更好。

六、输入变量

CSS Modules 帮忙选拔变量,不过须要安装 PostCSS 和
postcss-modules-values。

JavaScript

$ npm install –save postcss-loader postcss-modules-values

1
$ npm install –save postcss-loader postcss-modules-values

把postcss-loader加入webpack.config.js。

JavaScript

var values = require(‘postcss-modules-values’); module.exports = {
entry: __dirname + ‘/index.js’, output: { publicPath: ‘/’, filename:
‘./bundle.js’ }, module: { loaders: [ { test: /.jsx?$/, exclude:
/node_modules/, loader: ‘babel’, query: { presets: [‘es2015’,
‘stage-0’, ‘react’] } }, { test: /.css$/, loader:
“style-loader!css-loader?modules!postcss-loader” }, ] }, postcss: [
values ] };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var values = require(‘postcss-modules-values’);
 
module.exports = {
  entry: __dirname + ‘/index.js’,
  output: {
    publicPath: ‘/’,
    filename: ‘./bundle.js’
  },
  module: {
    loaders: [
      {
        test: /.jsx?$/,
        exclude: /node_modules/,
        loader: ‘babel’,
        query: {
          presets: [‘es2015’, ‘stage-0’, ‘react’]
        }
      },
      {
        test: /.css$/,
        loader: "style-loader!css-loader?modules!postcss-loader"
      },
    ]
  },
  postcss: [
    values
  ]
};

接着,在colors.css里面定义变量。

JavaScript

@value blue: #0c77f8; @value red: #ff0000; @value green: #aaf200;

1
2
3
@value blue: #0c77f8;
@value red: #ff0000;
@value green: #aaf200;

App.css可以引用那么些变量。

JavaScript

@value colors: “./colors.css”; @value blue, red, green from colors;
.title { color: red; background-color: blue; }

1
2
3
4
5
6
7
@value colors: "./colors.css";
@value blue, red, green from colors;
 
.title {
  color: red;
  background-color: blue;
}

运转这么些示例。

JavaScript

$ npm run demo06

1
$ npm run demo06

打开

1 赞 3 收藏
评论

威尼斯人线上娱乐 8

CSS模块化方案分类

CSS 模块化的解决方案有众多,但要害有三类。

CSS 命名约定

规范化CSS的模块化解决方案(比如BEM BEM — Block Element
Modifier,OOCSS,AMCSS,SMACSS,SUITCSS)
但存在以下难点:
* JS CSS之间如故没有挖掘变量和接纳器等
* 复杂的命名

CSS in JS

到底撤除 CSS,用 JavaScript 写 CSS 规则,并内联样式。 React: CSS in JS
// Speaker
Deck。Radium,react-style
属于这一类。但存在以下难题:
* 不可以使用伪类,媒体询问等
* 样式代码也会并发大批量双重。
* 不能动用成熟的 CSS 预处理器(或后电脑)

选拔JS 来管理体制模块

行使JS编译原生的CSS文件,使其拥有模块化的能力,代表是 CSS Modules
GitHub – css-modules/css-modules: Documentation about
css-modules 。

CSS Modules 能最大化地组合现有 CSS 生态(预处理器/后电脑等)和 JS
模块化能力,大致零就学开支。只要你利用
Webpack,可以在任何项目中行使。是作者认为当前最好的 CSS 模块消除决方案。

CSS Modules 使用教程

启用 CSS Modules

JavaScript

// webpack.config.js
css?modules&localIdentName=[name]__[local]-[hash:base64:5]

1
2
// webpack.config.js
css?modules&localIdentName=[name]__[local]-[hash:base64:5]

加上 modules 即为启用,localIdentName 是安装生成样式的命名规则。

CSS

/* components/Button.css */ .normal { /* normal 相关的所有样式 */ }

1
2
/* components/Button.css */
.normal { /* normal 相关的所有样式 */ }

JavaScript

// components/Button.js import styles from ‘./Button.css’;
console.log(styles); buttonElem.outerHTML = `<button
class=${styles.normal}>Submit</button>`

1
2
3
4
// components/Button.js
import styles from ‘./Button.css’;
console.log(styles);
buttonElem.outerHTML = `<button class=${styles.normal}>Submit</button>`

生成的 HTML 是

XHTML

<button class=”button–normal-abc53″>Submit</button>

1
<button class="button–normal-abc53">Submit</button>

注意到 button--normal-abc53 是 CSS Modules 按照 localIdentName
自动生成的 class 名。其中的abc53
是依照给定算法生成的系列码。经过如此模糊处理后,class
名基本就是绝无仅有的,大大下跌了品种中样式覆盖的几率。同时在生产环境下修改规则,生成更短的
class 名,可以进步 CSS 的压缩率。

上例中 console 打印的结果是:

CSS

Object {   normal: ‘button–normal-abc53’,   disabled:
‘button–disabled-def886’, }

1
2
3
4
Object {
  normal: ‘button–normal-abc53’,
  disabled: ‘button–disabled-def886’,
}

CSS Modules 对 CSS 中的 class 名都做了处理,使用对象来保存原 class
和混淆后 class 的相应关系。

经过那么些概括的处理,CSS Modules 完成了以下几点:
* 所有样式都是部分功能域 的,解决了大局污染难点
* class 名生成规则配置灵活,可以此来收缩 class 名
* 只需引用组件的 JS 就能化解组件所有的 JS 和 CSS
* 照旧是 CSS,大概 0 学习话费

CSS Modules 在React中的实践

那么我们在React中怎么使用?

手动引用化解

className 处直接运用 css 中 class 名即可。

JavaScript

import React from ‘react’; import styles from ‘./table.css’;   export
default class Table extends React.Component {     render () {
        return <div className={styles.table}>             <div
className={styles.row}>             </div>
        </div>;     } }

1
2
3
4
5
6
7
8
9
10
11
import React from ‘react’;
import styles from ‘./table.css’;
 
export default class Table extends React.Component {
    render () {
        return <div className={styles.table}>
            <div className={styles.row}>
            </div>
        </div>;
    }
}

渲染出来的零件出来

XHTML

<div class=”table__table___32osj”>     <div
class=”table__row___2w27N”>     </div> </div>

1
2
3
4
<div class="table__table___32osj">
    <div class="table__row___2w27N">
    </div>
</div>

react-css-modules

设若你不想频仍的输入 styles.**,有一个 GitHub –
gajus/react-css-modules: Seamless mapping of class names to CSS modules
inside of React
components.,它通过高阶函数的方式来扭转className,然而不引进应用,后文种提到。

API也很简短,给组件外包一个CSSModules即可。

JavaScript

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>;     } }   export default CSSModules(Table,
styles);

1
2
3
4
5
6
7
8
9
10
11
12
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>;
    }
}
 
export default CSSModules(Table, styles);

只是这样咱们得以见到,它是需求周转时的依靠,而且亟需在运行时才拿走className,质量损耗大,那么有没有方便又象是无损的法门吗?答案是局地,使用babel插件babel-plugin-react-css-modulesGitHub
– gajus/babel-plugin-react-css-modules: Transforms styleName to
className using compile time CSS module
resolution.
className取得前置到编译阶段。

babel-plugin-react-css-modules

babel-plugin-react-css-modules
可以兑现采用styleName性格自动加载CSS模块。大家通过该babel插件来进展语法树解析并最一生成className

来看看组件的写法,以往你只须要把className换成styleName即可得到CSS局地功效域的力量了,是否极度简单。

JavaScript

import React from ‘react’; import styles from ‘./table.css’;   class
Table extends React.Component {     render () {         return <div
styleName=’table’>         </div>;     } }   export default
Table;

1
2
3
4
5
6
7
8
9
10
11
import React from ‘react’;
import styles from ‘./table.css’;
 
class Table extends React.Component {
    render () {
        return <div styleName=’table’>
        </div>;
    }
}
 
export default Table;

办事原理

那么该babel插件是怎么工作的啊?让我们从官方文档入手:

GitHub – gajus/babel-plugin-react-css-modules: Transforms styleName to
className using compile time CSS module
resolution.

作者不才 ,稍作翻译如下:
1.
营造每种文件的有所样式表导入的目录(导入具有.css.scss增添名的公文)。

  1. 使用postcss
    解析匹配到的css文件
  2. 遍历所有
    JSX
    成分表明
  3. styleName 属性解析成匿名和命名的一部分css模块引用
  4. 招来与CSS模块引用相匹配的CSS类名称:
    * 如果styleName的值是一个字符串字面值,生成一个字符串字面值。
    *
    假若是JSXExpressionContainer,在运行时行使helper函数来打造如果styleName的值是一个jSXExpressionContainer,
    使用支持函数([getClassName]在运转时社团className值。
  5. 从要素上移除styleName属性。
    7.
    将转变的className加上到存活的className值中(假诺不存在则开创className属性)。

利用实例

在成熟的门类中,一般都会用到CSS预处理器大概后电脑。

那里以应用了stylusCSS预处理器为例子,大家来看下怎么着行使。

  • 安装着重

Shell

npm install -save-dev sugerss babel-plugin-react-css-modules

1
npm install -save-dev sugerss babel-plugin-react-css-modules
  • 编写Webpack配置
JavaScript

// webpack.config.js module: {   loaders: \[{     test: /\\.js?$/,
    loader: \[\['babel-plugin-react-css-modules',{
          generateScopedName:'\[name\]\_\_\[local\]',
          filetypes: {               ".styl": "sugerss"            }
     }\]\]   }, {     test: /\\.module.styl$/,     loader:
'style!css?modules&localIdentName=\[name\]\_\_\[local\]!styl?sourceMap=true'
  }, {     test: /\\.styl$/,     loader:
'style!css!styl?sourceMap=true'   }\] }

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6729d9ed4116610999-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6729d9ed4116610999-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6729d9ed4116610999-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6729d9ed4116610999-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f6729d9ed4116610999-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6729d9ed4116610999-6">
6
</div>
<div class="crayon-num" data-line="crayon-5b8f6729d9ed4116610999-7">
7
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6729d9ed4116610999-8">
8
</div>
<div class="crayon-num" data-line="crayon-5b8f6729d9ed4116610999-9">
9
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6729d9ed4116610999-10">
10
</div>
<div class="crayon-num" data-line="crayon-5b8f6729d9ed4116610999-11">
11
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6729d9ed4116610999-12">
12
</div>
<div class="crayon-num" data-line="crayon-5b8f6729d9ed4116610999-13">
13
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6729d9ed4116610999-14">
14
</div>
<div class="crayon-num" data-line="crayon-5b8f6729d9ed4116610999-15">
15
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6729d9ed4116610999-16">
16
</div>
<div class="crayon-num" data-line="crayon-5b8f6729d9ed4116610999-17">
17
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6729d9ed4116610999-18">
18
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6729d9ed4116610999-1" class="crayon-line">
// webpack.config.js
</div>
<div id="crayon-5b8f6729d9ed4116610999-2" class="crayon-line crayon-striped-line">
module: {
</div>
<div id="crayon-5b8f6729d9ed4116610999-3" class="crayon-line">
  loaders: [{
</div>
<div id="crayon-5b8f6729d9ed4116610999-4" class="crayon-line crayon-striped-line">
    test: /\.js?$/,
</div>
<div id="crayon-5b8f6729d9ed4116610999-5" class="crayon-line">
    loader: [['babel-plugin-react-css-modules',{
</div>
<div id="crayon-5b8f6729d9ed4116610999-6" class="crayon-line crayon-striped-line">
          generateScopedName:'[name]__[local]',
</div>
<div id="crayon-5b8f6729d9ed4116610999-7" class="crayon-line">
          filetypes: {
</div>
<div id="crayon-5b8f6729d9ed4116610999-8" class="crayon-line crayon-striped-line">
              &quot;.styl&quot;: &quot;sugerss&quot;
</div>
<div id="crayon-5b8f6729d9ed4116610999-9" class="crayon-line">
           }
</div>
<div id="crayon-5b8f6729d9ed4116610999-10" class="crayon-line crayon-striped-line">
     }]]
</div>
<div id="crayon-5b8f6729d9ed4116610999-11" class="crayon-line">
  }, {
</div>
<div id="crayon-5b8f6729d9ed4116610999-12" class="crayon-line crayon-striped-line">
    test: /\.module.styl$/,
</div>
<div id="crayon-5b8f6729d9ed4116610999-13" class="crayon-line">
    loader: 'style!css?modules&amp;localIdentName=[name]__[local]!styl?sourceMap=true'
</div>
<div id="crayon-5b8f6729d9ed4116610999-14" class="crayon-line crayon-striped-line">
  }, {
</div>
<div id="crayon-5b8f6729d9ed4116610999-15" class="crayon-line">
    test: /\.styl$/,
</div>
<div id="crayon-5b8f6729d9ed4116610999-16" class="crayon-line crayon-striped-line">
    loader: 'style!css!styl?sourceMap=true'
</div>
<div id="crayon-5b8f6729d9ed4116610999-17" class="crayon-line">
  }]
</div>
<div id="crayon-5b8f6729d9ed4116610999-18" class="crayon-line crayon-striped-line">
}
</div>
</div></td>
</tr>
</tbody>
</table>

  • 零件写法

JavaScript

import React from ‘react’; import ‘./table.module.styl’;   class Table
extends React.Component {     render () {         return <div
styleName=’table’>         </div>;     } }   export default
Table;

1
2
3
4
5
6
7
8
9
10
11
import React from ‘react’;
import ‘./table.module.styl’;
 
class Table extends React.Component {
    render () {
        return <div styleName=’table’>
        </div>;
    }
}
 
export default Table;

如上,你可以透过布置Webpack中module.loaders的test路径Webpack-module-loaders-configuration,来不同样式文件是不是需求CSS模块化。
搭配sugerss这个postcss插件作为stylus的语法加载器,来支持babel插件babel-plugin-react-css-modules的语法解析。

最后我们回过头来看下,大家React组件只要求把className换成styleName,搭配以上创设配置,即可兑现CSS模块化

最后

CSS Modules 很好的搞定了 CSS 近年来边临的模块化难点。协理与
CSS处理器搭配使用,能丰硕利用现有技术积累。如若您的出品中恰恰遇见类似题材,万分值得一试。

梦想大家都能写出健康并且可扩充的CSS,以上。

1 赞 2 收藏
评论

威尼斯人线上娱乐 9


相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图