【亚洲必赢官网】用法教程

CSS Modules 入门及 React 中实践

2017/03/25 · CSS ·
React

原文出处:
AlloyTeam   

CSS Modules 用法教程

2016/06/19 · CSS ·
Modules

原文出处:
阮一峰   

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

为了让 CSS
也能适用软件工程措施,程序员想了各样格局,让它变得像一门编程语言。从最早的Less、SASS,到后来的
PostCSS,再到近来的 CSS in JS,都是为着缓解这一个难题。

亚洲必赢官网 1

本文介绍的 CSS Modules
有所差别。它不是将 CSS
改造成编程语言,而是功能很单纯,只参加了有的成效域和模块依赖,这刚好是网页组件最亟需的成效。

据此,CSS Modules
很容易学,因为它的条条框框少,同时又丰盛有用,可以确保某个组件的样式,不会影响到其余零件。

亚洲必赢官网 2

CSS Modules 详解及 React 中实践

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

初稿出处: pure render –
camsong   

亚洲必赢官网 3

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
模块化解决方案。如今在档次中大批量用到,上边具体享受下举行中的细节和设法。

 

让CSS更完美:PostCSS-modules

2017/01/22 · CSS ·
POSTCSS

初稿出处: Alexander
Madyankin   译文出处:众成翻译   

译者注(GeoffZhu):
那篇适合部分利用过预处理CSS的开发者,比如less,sass或stylus,即使您都没用过,那您一定不是个好司机。在PostCSS中早就能够选拔CSS
Modules了,该篇小编进献了一个新工具,可以让越多开发者方便的使用最新的CSS
Modules。

我们和大局功效域的css斗争了多年,现在终于是时候为止它了。不管您用的是何许语言如故框架,CSS命名争辩将不再是个难点。作者将给您来得一下PostCSS和PostCSS-modules何以行使,并且可以在服务端使用它们。
CSS发轫只是一个美化文档的工具,可是工作到1996年发生了变动。浏览器中不再单单只有文档了,即时通信,种种软件,游戏,没什么是浏览器不只怕承载的。

当今,我们在HTML和CSS方面已经走了很远很远,开发者们振奋出了CSS所有的潜力,甚至创办出了有些CSS本身都快明白不了的东西。

各种有经验的开发者都了然 —
每一次使用全局命名空间都以留给了一个爆发bug的隐患,因为快速就恐怕出现就像是命名顶牛之类的标题,再添加别的地方(项目尤为大等)的影响,代码越来越不易维护。

对此CSS来说,那意味着有题目标布局。CSS特异性和CSS宽泛性之间,一向留存着如史诗般的对决。仅仅是因为各种接纳器都或许会潜移默化到那个不想被潜移默化的因素,使之暴发了争持。

着力具有编程语言都扶助部分成效域。和CSS朝夕相伴的JavaScript有AMD,
CommonJS和最终确定的ES6 modules。可是我们并不曾一个可以模块化CSS的艺术。

对此一个高品质体系以来,独立的UI组件(也等于组件化)格外重大的 —
每一种组件小巧独立,可以拼合成复杂的页面,那让大家节省了诸多的工作。然则大家一味有一个疑点,如何预防全局命名冲突那?

写在前边

读文先看此图,能先有个大约概念:

亚洲必赢官网 4

读书本文需求 11m 24s。

零、示例库

本身为那几个课程写了一个示例库,包罗八个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

打开浏览器,访问

CSS 模块化遭受了什么难点?

CSS 模块化主要的是要解决好多个难点:CSS
样式的导入和导出。灵活按需导入以便复用代码;导出时要可以隐藏其中成效域,防止导致全局污染。Sass/Less/PostCSS
等两次三番试图缓解 CSS
编程能力弱的难题,结果它们做的也确确实实不错,但那并没有缓解模块化最重大的题材。脸谱工程师 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。

 

消除方法

因为有前人的检索,以往大家有Object-Oriented CSS,
BEM,
SMACSS等等,这个都以丰富棒并且格外实惠的不二法门。他们通过增添前缀的方式,消除了命名争辩的题材。

由此增添前缀的主意消除命名争论是个体力活(manual
mangling)。大家手动的去编写长长的选用器。你也得以运用预编译的css语言,可是它们并不曾从根本上消除难点(依然体力活)。上面是我们用BEM规范书写的一个单独组件(对于现有的除BEM之外的点子,思想上着力也是那般):

CSS

/* 普通 CSS */ .article { font-size: 16px; } .article__title {
font-size: 24px; } /* 使用css预处理语言 */ .article { font-size: 16px;
&__title { font-size: 24px; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* 普通 CSS */
.article {
  font-size: 16px;
}
 
.article__title {
  font-size: 24px;
}
 
/* 使用css预处理语言 */
.article {
  font-size: 16px;
 
  &__title {
    font-size: 24px;
  }
}

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的规则都是大局的,任何一个组件的样式规则,都对所有页面有效。

爆发局地作用域的唯一办法,就是利用一个旷世的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 模块化方案

亚洲必赢官网 5

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模块(CSS Modules)

二〇一五年面世了其它二种艺术的贯彻。分别是CSS-in-JS
和 CSS
Modules。大家将器重商量后者。

CSS模块允许你将兼具css class自动打碎,那是CSS模块(CSS
Modules)的暗中认同设置。然后生成一个JSON文件(sources
map)和原先的class关联:

CSS

/* post.css */ .article { font-size: 16px; } .title { font-weight:
24px; }

1
2
3
4
5
6
7
8
/* post.css */
.article {
  font-size: 16px;
}
 
.title {
  font-weight: 24px;
}

地点的post.css将会被转换成类似下边那样:

CSS

.xkpka { font-size: 16px; } .xkpkb { font-size: 24px; }

1
2
3
4
5
6
7
.xkpka {
  font-size: 16px;
}
 
.xkpkb {
  font-size: 24px;
}

被打碎替换的classes将被保留在一个JSON对象中:

JavaScript

`{ “article”: “xkpka”, “title”: “xkpkb” } `

1
`{  "article":  "xkpka",  "title":  "xkpkb"  }  `

在转移落成后,你可以直接引用那一个JSON对象到品种中,这样就足以用事先写过的class名来直接接纳它了。

JavaScript

import styles from ‘./post.json’; class Post extends React.Component {
render() { return ( <div className={ styles.article }> <div
className={ styles.title }>…</div> … </div> ); } }

1
2
3
4
5
6
7
8
9
10
11
12
import styles from ‘./post.json’;
 
class Post extends React.Component {
  render() {
    return (
      <div className={ styles.article }>
        <div className={ styles.title }>…</div>
        …
      </div>
    );
  }
}

更多给力的功能, 可以看看
那篇越发好的篇章.

不但是保留了事先涉嫌的两种方法的独到之处,还自行消除了组件css分离的难点。那就是CSS模块(CSS
Modules),听起来分外不易啊!

到那边,大家有境遇了另一个标题: 大家今后的CSS
Modules相关工具,只好在客户端(浏览器)使用,把它放到一个非Node.js的服务端环境中是分外极度困难的。

缘何我们须要CSS模块化

二、全局作用域

CSS Modules
允许利用:global(.className)的语法,声惠氏个大局规则。凡是这样注明的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 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 个“即使”尽量不要暴发

PostCSS-modules

为了在服务端和客户端都能选择CSS
Modules,作者写了个PostCSS-modules,它是一个PostCSS插件,让您可以在服务端使用模块化的CSS,并且服务端语言可以是Ruby,
PHP, Python 或然此外语言。

PostCSS是一个CSS预处理器,它是用JS完成的。它援救静态检查CSS,接济变量和混入(mixins),能让您利用以后还未被浏览器匡助的未来CSS语法,内联图像等等。例如使用最为常见的Autoprefixer,它只是PostCSS的一个插件。

一经您利用Autoprefixer,
其实你曾经在用PostCSS了。所以,添加PostCSS-modules到你的体系倚重列表,并不是一件难事。笔者先给你打个样(实例),用Gulp
and
EJS,其实你可以用别样语言做类似的事务。

JavaScript

// Gulpfile.js var gulp = require(‘gulp’); var postcss =
require(‘gulp-postcss’); var cssModules = require(‘postcss-modules’);
var ejs = require(‘gulp-ejs’); var path = require(‘path’); var fs =
require(‘fs’); function getJSONFromCssModules(cssFileName, json) { var
cssName = path.basename(cssFileName, ‘.css’); var jsonFileName =
path.resolve(‘./build’, cssName + ‘.json’);
fs.writeFileSync(jsonFileName, JSON.stringify(json)); } function
getClass(module, className) { var moduleFileName =
path.resolve(‘./build’, module + ‘.json’); var classNames =
fs.readFileSync(moduleFileName).toString(); return
JSON.parse(classNames)[className]; } gulp.task(‘css’, function() {
return gulp.src(‘./css/post.css’) .pipe(postcss([ cssModules({ getJSON:
getJSONFromCssModules }), ])) .pipe(gulp.dest(‘./build’)); });
gulp.task(‘html’, [‘css’], function() { return
gulp.src(‘./html/index.ejs’) .pipe(ejs({ className: getClass }, { ext:
‘.html’ })) .pipe(gulp.dest(‘./build’)); }); gulp.task(‘default’,
[‘html’]);

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
29
30
31
32
33
34
35
// Gulpfile.js
var gulp         = require(‘gulp’);
var postcss      = require(‘gulp-postcss’);
var cssModules   = require(‘postcss-modules’);
var ejs          = require(‘gulp-ejs’);
var path         = require(‘path’);
var fs           = require(‘fs’);
 
function getJSONFromCssModules(cssFileName, json) {
  var cssName       = path.basename(cssFileName, ‘.css’);
  var jsonFileName  = path.resolve(‘./build’, cssName + ‘.json’);
  fs.writeFileSync(jsonFileName, JSON.stringify(json));
}
 
function getClass(module, className) {
  var moduleFileName  = path.resolve(‘./build’, module + ‘.json’);
  var classNames      = fs.readFileSync(moduleFileName).toString();
  return JSON.parse(classNames)[className];
}
 
gulp.task(‘css’, function() {
  return gulp.src(‘./css/post.css’)
    .pipe(postcss([
      cssModules({ getJSON: getJSONFromCssModules }),
    ]))
    .pipe(gulp.dest(‘./build’));
});
 
gulp.task(‘html’, [‘css’], function() {
  return gulp.src(‘./html/index.ejs’)
    .pipe(ejs({ className: getClass }, { ext: ‘.html’ }))
    .pipe(gulp.dest(‘./build’));
});
 
gulp.task(‘default’, [‘html’]);

大家只须求实施gulp职务,就能获取更换后的CSS文件和JSON文件,然后就可以在EJS模版里面用了:

XHTML

<article class=”<%= className(‘post’, ‘article’) %>”> <h1
class=”<%= className(‘post’, ‘title’) %>”>Title</h1> …
</article>

1
2
3
4
<article class="<%= className(‘post’, ‘article’) %>">
  <h1 class="<%= className(‘post’, ‘title’) %>">Title</h1>
  …
</article>

万一你想看看实际的代码,作者在GitHub给您准备了个example。越多的例证可以看PostCSS-modules和CSS
Modules


轻松编写可怜惜的CSS,没有臃肿的mixins。长长的前缀将改为历史,欢迎来至今的CSS世界。

1 赞 收藏
评论

亚洲必赢官网 6

CSS全局功效域难题

CSS的条条框框都以大局的,任何一个零部件的体制规则,都对所有页面有效。相信写css的人都会遇见样式抵触(污染)的标题。

于是一般这么做(笔者都做过):
* class命名写长一点吗,降低争持的几率
* 加个父成分的接纳器,限制范围
* 重新命名个class吧,比较保障

因此亟待消除的标题就是css局地成效域防止全局样式顶牛(污染)的难题

三、定制哈希类名

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 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 中的样式都以有的的。

JS CSS不可以共享变量

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

四、 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″>。

总结

CSS Modules 很好的化解了 CSS 目后面临的模块化难点。帮忙与
Sass/Less/PostCSS
等搭配使用,能充裕利用现有技术积淀。同时也能和大局样式灵活搭配,便于项目中渐渐搬迁至
CSS Modules。CSS Modules
的贯彻也属轻量级,未来有正式化解方案后得以低本钱迁移。如若你的出品中恰恰蒙受类似难题,至极值得一试。

1 赞 2 收藏
评论

亚洲必赢官网 7

健康并且增添方便的CSS

用作有追求的工程师,编写健壮并且扩大方便的CSS一直是大家的靶子。那么什么样定义健壮并且扩大方便?有八个要点:

  • 面向组件 – 处理 UI 复杂性的特等实践就是将 UI 分割成一个个的小组件
    Locality_of_reference
    。如果你正在利用一个合理的框架,JavaScript
    方面就将原生协理(组件化)。举个例子,React
    就鼓励中度组件化和撤并。大家期待有一个 CSS 架构去匹配。
  • 沙箱化(Sandboxed) –
    即便一个零件的样式会对任何零件暴发不须求以及意外的震慑,那么将
    UI
    分割成组件并没有怎么用。就那下边而言,CSS的大局意义域会给你造成负担。
  • 便利 –
    大家想要所有好的东西,并且不想发生越来越多的行事。相当于说,大家不想因为运用这一个架构而让大家的开发者体验变得更糟。可能的话,大家想开发者体验变得更好。

五、输入任何模块

选取器也得以连续其余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 模块化的解决方案有广大,但根本有三类。

六、输入变量

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的模块解决决方案(比如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地图