澳门新萄京官方网站-www.8455.com-澳门新萄京赌场网址

澳门新萄京官方网站:未来的编码方式,用法教

2019-08-10 作者:澳门新萄京赌场网址   |   浏览(76)

CSS Modules 详解及 React 中实践

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

初稿出处: pure render - camsong   

澳门新萄京官方网站 1

CSS 是前者领域中升华最慢的一块。由于 ES2015/二〇一四 的急迅广泛和 Babel/Webpack 等工具的迅猛发展,CSS 被远远甩在了后边,逐步形成大型项目工程化的痛点。也改为了前面二个走向绝望模块化前必须消除的难点。

CSS 模块化的减轻方案有大多,但注重有两类。一类是通透到底丢弃 CSS,使用 JS 或 JSON 来写样式。Radium,jsxstyle,react-style 属于这一类。优点是能给 CSS 提供 JS 同样强大的模块化本领;短处是无法选用成熟的 CSS 预管理器(或后Computer) Sass/Less/PostCSS,:hover:active 伪类管理起来复杂。另一类是依旧使用 CSS,但使用 JS 来保管体制依赖,代表是 CSS Modules。CSS Modules 能最大化地组成现存 CSS 生态和 JS 模块化才能,API 简洁到大概零学学花费。公布时依然编写翻译出单身的 JS 和 CSS。它并不正视于 React,只要您使用 Webpack,能够在 Vue/Angular/jQuery 中利用。是本身觉安妥前最棒的 CSS 模块消除决方案。近年来在等级次序中山大学量选用,下边具体享受下进行中的细节和主张。

 

CSS Modules 入门及 React 中实践

2017/03/25 · CSS · React

原稿出处: AlloyTeam   

前言

那是Glen Maddern发表于二〇一五年七月二十二日的一篇小说,首假设事先翻译的稿子《知晓CSS模块方法》里关系那篇小说,今后到底蔓引株求跟进来看看。

这里的翻译都以基于自家本人的驾驭实行的,所以不是一句一句的来的,有哪些不对的也免不了,水平有限,希望我们提出。

前言

那是Glen Maddern公布于2016年九月18日的一篇小说,首假诺事先翻译的文章《了解CSS模块方法》里提到这篇作品,今后好不轻松顺藤摘瓜跟进来看看。

此地的翻译都以依据本身要好的驾驭实行的,所以不是一句一句的来的,有啥样不对的也不免,水平有限,希望大家建议。

CSS Modules 用法教程

2016/06/19 · CSS · Modules

原稿出处: 阮一峰   

学过网页开垦就能驾驭,CSS 不能算编制程序语言,只是网页样式的一种描述方法。

为了让 CSS 也能适用软件工程措施,技术员想了各样办法,让它变得像一门编制程序语言。从最早的Less、SASS,到后来的 PostCSS,再到方今的 CSS in JS,都是为着化解那几个难题。

澳门新萄京官方网站 2

正文介绍的 CSS Modules 有所区别。它不是将 CSS 更动成编制程序语言,而是效用很单纯,只步向了一些功能域和模块重视,那刚刚是网页组件最亟需的效果。

所以,CSS Modules 很容易学,因为它的条条框框少,同期又不行有用,可以有限帮助有个别组件的样式,不会潜移暗化到任何零件。

澳门新萄京官方网站 3

CSS 模块化碰到了什么难题?

CSS 模块化首要的是要消除比非常多个难点:CSS 样式的导入和导出。灵活按需导入以便复用代码;导出时要能够隐蔽其间作用域,以防产生全局污染。Sass/Less/PostCSS 等继续试图缓和 CSS 编制程序技术弱的难点,结果它们做的也实在美貌,但那并不曾消除模块化最关键的标题。推特(Twitter)务职业职员程师 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。

 

写在前边

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

澳门新萄京官方网站 4

开卷本文须求 11m 24s。

正文

假虚拟在这段日子CSS开垦合计上找到四个变动点,最佳去找克里Stowe弗 Chedeau 二零一六年11月在NationJS上公布的“css in js”演说。那是三个分割线,各样不一致的思维,就像高速粒子似的在友好的样子上便捷腾飞。举例:在React及部分依赖React的类型中写样式, React Style,jsxstyle和Radium是中间四个,最新的,最抢眼的,和最管用的法子。假诺发明是在一种探求的情况下邻座的或然(adjacent possible),那么christopher是创制了广大好像周边(adjacent)大概性。

澳门新萄京官方网站 5

这一个主题材料,以差别的款型存在于大的CSS代码库中。christopher提议,这一个标题都或许因而在js中写代码来减轻。但这种消除方案引进了其本身的复杂和特色。只要看一下,在以前提到的项目中(React Style,jsxstyle和Radium),管理在:hover状态下range的艺术。这几个主题材料,在浏览器端css中一度早被消除了。

CSS Modules team找到标题标要害--保持和CSS一致,使用styles-in-js的点子编写。即使我们照旧百折不挠想法使用了CSS的样式,但还也许有要多谢对大家提供大多建议的意中人。

咱俩一向在思前想后地考虑CSS,如何去编写越来越好。

正文

若是想在近年CSS开发合计上找到一个变通点,最棒去找克里斯多夫 Chedeau 二〇一四年10月在NationJS上刊载的“css in js”解说。那是一个分水线,种种不一致的沉思,就疑似高速粒子似的在协和的大方向上不慢上扬。比方:在React及片段正视React的门类中写样式, React Style,jsxstyle和Radium是内部四个,最新的,最高超的,和最有效的点子。假如发明是在一种搜求的境况下邻座的或是(adjacent possible),那么christopher是创造了多数近乎相近(adjacent)或许性。

澳门新萄京官方网站 6

这一个标题,以不一致的样式存在于大的CSS代码库中。christopher建议,这几个难题都大概因此在js中写代码来消除。但这种消除方案引进了其自己的头眼昏花和特征。只要看一下,在头里提到的品种中(React Style,jsxstyle和Radium),管理在:hover状态下range的格局。那个标题,在浏览器端css中已经早被化解了。

CSS Modules team找到难点的要紧--保持和CSS一致,使用styles-in-js的秘技编写。纵然我们仍然百折不回主见使用了CSS的情势,但还应该有要感激对我们提供多数提出的仇敌。

大家直接在冥思苦想地揣摩CSS,如何去编写更加好。

零、示例库

自家为这一个课程写了二个示例库,包括八个德姆o。通过它们,你能够轻易学会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 Modules 模块化方案

澳门新萄京官方网站 7

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介绍

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模块呢?

第1步:暗许局地功能域

在css模块中,每二个文书都以单身编写翻译的,因而你能够使用部分CSS短命名-不用忧虑命名争论。上边看一下,提交开关的4种情形的例

澳门新萄京官方网站 8

第1步:默许局部功能域

在css模块中,每贰个文书都以独自编写翻译的,由此你能够应用一些CSS短命名-不用怀恋命名争论。下边看一下,提交按键的4种情况的例

澳门新萄京官方网站 9

一、局地功能域

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 效率。

今昔,运行这么些德姆o。

JavaScript

$ npm run demo01

1
$ npm run demo01

打开 ,能够看到结果,h1标题呈现为革命。

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模块化

常规的CSS书写格局

用Suit或BEM命名、一些CSS样式、一段html。代码如下:

css代码段:

/* components/submit-button.css */

.Button { /* all styles for Normal */ }

.Button--disabled { /* overrides for Disabled */ }

.Button--error { /* overrides for Error */ }

.Button--in-progress { /* overrides for In Progress */

html代码段:

<button class="Button Button--in-progress">Processing...</button>

地方代码运营不错,我们有4种意况的类名,BEM命名,制止了选择嵌套选用器。使用大写字母开端的单词Button作为采纳器,防止与事先或援用样式的类名顶牛。并且大家选择--modifier语法来驱除基础样式。

到这段日子终止,那都是一段不错的可有限援救的代码。但也引入了从严的命名标准。但那也是能用规范CSS,做到的最棒的诀窍了。

正规的CSS书写形式

用Suit或BEM命名、一些CSS样式、一段html。代码如下:

css代码段:

/* components/submit-button.css */

.Button { /* all styles for Normal */ }

.Button--disabled { /* overrides for Disabled */ }

.Button--error { /* overrides for Error */ }

.Button--in-progress { /* overrides for In Progress */

html代码段:

<button class="Button Button--in-progress">Processing...</button>

上边代码运营不错,大家有4种情形的类名,BEM命名,幸免了动用嵌套选择器。使用大写字母开始的单词Button作为采纳器,防止与前边或援引样式的类名争论。而且大家利用--modifier语法来扫除基础样式。

到明日了却,那都以一段不错的可爱惜的代码。但也引进了严刻的命名规范。但那也是能用规范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 结合 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 中的样式都是有个别的。

CSS全局作用域难点

CSS的准则都以全局的,任何二个零件的样式法规,都对任何页面有效。相信写css的人都会碰着样式争辨(污染)的主题素材。

于是乎一般这么做(小编都做过):
* class命名写长一点吗,裁减争辨的可能率
* 加个父元素的选用器,限制范围
* 重新命名个class吧,相比保险

由此亟待化解的题材就是css局地成效域制止全局样式争辨(污染)的题目

CSS模块书写格局

应用CSS模块,你不用忧郁使用一些短命名了。能够像上面那样。

/* components/submit-button.css */

.normal { /* all styles for Normal */ }

.disabled { /* all styles for Disabled */ }

.error { /* all styles for Error */ }

.inProgress { /* all styles for In Progress */

看,你不要在任哪儿方再去加长长的前缀。为何能够那样做,大家得以像别的语言同样,不用在地面变量前加长长的前缀,只要把CSS对应的文书名改成submit-botton.css

那能够让在JS中运用requireimport加载的CSS模块文件,能够被编写翻译出来。

/* components/submit-button.js */

import styles from './submit-button.css';

buttonElem.outerHTML = `<button class=${styles.normal}>Submit</button>`

实在在页面使用的体制名,是动态变化的唯一标识。CSS模块把公文编写翻译成ICSS格式的文本,这种格式文件能够方便CSS和JS进行通讯。当您运营程序,会拿走近似上面包车型大巴代码

<button class="components_submit_button__normal__abc5436"> Processing...</button>

获取近似结果,表明运营成功~

CSS模块书写方式

动用CSS模块,你不用顾虑使用一些短命名了。能够像上边那样。

/* components/submit-button.css */

.normal { /* all styles for Normal */ }

.disabled { /* all styles for Disabled */ }

.error { /* all styles for Error */ }

.inProgress { /* all styles for In Progress */

看,你不要在任什么地点方再去加长长的前缀。为啥能够那样做,我们得以像其余语言一样,不用在本地变量前加长长的前缀,只要把CSS对应的公文名改成submit-botton.css

那能够让在JS中利用requireimport加载的CSS模块文件,能够被编译出来。

/* components/submit-button.js */

import styles from './submit-button.css';

buttonElem.outerHTML = `<button class=${styles.normal}>Submit</button>`

的确在页面使用的体制名,是动态变化的独一标记。CSS模块把公文编写翻译成ICSS格式的文件,这种格式文件能够方便CSS和JS举行通讯。当您运转程序,会获取近似下边的代码

<button class="components_submit_button__normal__abc5436"> Processing...</button>

获取近似结果,表达运行成功~

三、定制哈希类名

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 很好的化解了 CSS 最近边临的模块化难题。扶助与 Sass/Less/PostCSS 等搭配使用,能丰硕利用现存技巧积淀。同一时候也能和全局样式灵活搭配,便于项目中国和东瀛渐搬迁至 CSS Modules。CSS Modules 的兑现也属轻量级,将来有专门的工作化解方案后方可低本钱迁移。要是您的制品中恰恰遇见类似主题材料,极其值得一试。

1 赞 2 收藏 评论

澳门新萄京官方网站 10

JS CSS不能分享变量

复杂组件要采用 JS 和 CSS 来共同管理体制,就能够导致有个别变量在 JS 和 CSS 中冗余,CSS预管理器/后管理器 等都不提供跨 JS 和 CSS 分享变量这种工夫。

命名约定

照旧拿开关的事例来讲

/* components/submit-button.css */

.normal { /* all styles for Normal */ }

.disabled { /* all styles for Disabled */ }

.error { /* all styles for Error */ }

.inProgress { /* all styles for In Progress */

装有类名都是单独的,不是五个是基类名,其余的用来修改。在CSS模块中,全数类必须回顾全体的性能和样式。这令你在JS中使用类名时有非常的大的不及。

/* 不要像这么 */

`class=${[styles.normal, styles['in-progress']].join(" ")}`

/* 分歧之处是应用单独的类名 */

`class=${styles['in-progress']}`

/* 最棒利用驼峰式 */

`class=${styles.inProgress}`

自然,假诺您是遵照代码量来收钱的,你能够遵守你的法子继续。

命名约定

依然拿开关的事例来讲

/* components/submit-button.css */

.normal { /* all styles for Normal */ }

.disabled { /* all styles for Disabled */ }

.error { /* all styles for Error */ }

.inProgress { /* all styles for In Progress */

怀有类名都以单独的,不是二个是基类名,另外的用来修改。在CSS模块中,全数类必须总结全数的属性和样式。那让你在JS中使用类名时有相当大的两样。

/* 不要像那样 */

`class=${[styles.normal, styles['in-progress']].join(" ")}`

/* 分化之处是采取单独的类名 */

`class=${styles['in-progress']}`

/* 最佳应用驼峰式 */

`class=${styles.inProgress}`

自然,要是您是依照代码量来收钱的,你可以服从你的办法持续。

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

作为有追求的程序员,编写健壮并且扩展方便的CSS平素是大家的指标。那么哪些定义健壮何况增添方便?有八个大旨:

  • 面向组件 – 管理 UI 复杂性的极品实施正是将 UI 分割成叁个个的小组件 Locality_of_reference 。要是您正在接纳二个靠边的框架,JavaScript 方面就将原生扶助(组件化)。比方,React 就鼓励中度组件化和剪切。大家愿意有二个 CSS 架构去相称。
  • 沙箱化(Sandboxed) – 假若多个零件的体裁会对任何零件产生不要求以及意外的熏陶,那么将 UI 分割成组件并从未什么样用。就那上头来说,CSS的全局意义域会给您变成担任。
  • 平价 – 我们想要所有好的事物,并且不想发出越多的做事。也正是说,大家不想因为使用那几个架构而让我们的开拓者体验变得更糟。或然的话,我们想开垦者体验变得更好。

一个React例子

此处不是关于React特有的CSS模块。但React提供了,在应用CSS模块时,特别赏心悦指标体验。下边做二个复杂点的例子。

/* components/submit-button.jsx */

import { Component } from 'react';

import styles from './submit-button.css';

export default class SubmitButton extends Component {

render() {

let className, text = "Submit"

if (this.props.store.submissionInProgress) {

className = styles.inProgress text = "Processing..."

} else if (this.props.store.errorOccurred) {

className = styles.error

} else if (!this.props.form.valid) {

className = styles.disabled

} else {

className = styles.normal

}

return <button className={className}>{text}</button>

}

}

你能够动用你的体裁,不用再想不开全局争论,让您能够小心于组件开垦,并不是在写样式上。一旦偏离从前的频仍在CSS,js之间切换格局,你就再也不想回到了。

但那只是始于,当你思索体制统有时,CSS模块又无奈使用了。

一个React例子

此间不是有关React特有的CSS模块。但React提供了,在运用CSS模块时,非常特出的经验。上面做一个复杂点的例证。

/* components/submit-button.jsx */

import { Component } from 'react';

import styles from './submit-button.css';

export default class SubmitButton extends Component {

render() {

let className, text = "Submit"

if (this.props.store.submissionInProgress) {

className = styles.inProgress text = "Processing..."

} else if (this.props.store.errorOccurred) {

className = styles.error

} else if (!this.props.form.valid) {

className = styles.disabled

} else {

className = styles.normal

}

return <button className={className}>{text}</button>

}

}

您能够应用你的样式,不用再忧郁全局争辩,让您能够小心于组件开采,并不是在写样式上。一旦离开之前的一再在CSS,js之间切换格局,你就再也不想回去了。

但这只是从头,当您思索体制统不时,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 模块化的化解方案有十分的多,但主要有三类。

第2步 一切皆为组件

前边提到CSS模块必要各样状态都包罗全数所需的体制。

这边倘令你须要四个情景,大家相比较一下CSS模块和BEM命名。

/* BEM Style */

innerHTML = `<button class="Button Button--in-progress">`

/* CSS Modules */

innerHTML = `<button class="${styles.inProgress}">`

等一下,怎样在具有情形分享样式呢?答案是CSS模块的最强劲工具-组件

.common { /* all the common styles you want */ }

.normal { composes: common; /* anything that only applies to Normal */ }

.disabled { composes: common; /* anything that only applies to Disabled */ }

.error { composes: common; /* anything that only applies to Error */ }

.inProgress { composes: common; /* anything that only applies to In Progress */ }

关键词composes指出.normal包含.common中的样式,就如sass里的@extend重在词同样。sass是因而重写css选用器来完结的。css模块则是通过改造js中运用的类名来促成。

第2步 一切皆为组件

前方提到CSS模块必要各种状态都包涵全部所需的样式。

此地借使你须求多个状态,大家相比较一下CSS模块和BEM命名。

/* BEM Style */

innerHTML = `<button class="Button Button--in-progress">`

/* CSS Modules */

innerHTML = `<button class="${styles.inProgress}">`

等一下,如何在具备情形分享样式呢?答案是CSS模块的最精锐工具-组件

.common { /* all the common styles you want */ }

.normal { composes: common; /* anything that only applies to Normal */ }

.disabled { composes: common; /* anything that only applies to Disabled */ }

.error { composes: common; /* anything that only applies to Error */ }

.inProgress { composes: common; /* anything that only applies to In Progress */ }

关键词composes指出.normal包含.common中的样式,就像sass里的@extend第一词同样。sass是通过重写css选拔器来达成的。css模块则是经过更动js中应用的类名来促成。

六、输入变量

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 收藏 评论

澳门新萄京官方网站 11

CSS 命名约定

规范化CSS的模块解决决方案(例如BEM BEM — Block Element Modifier,OOCSS,AMCSS,SMACSS,SUITCSS)
但存在以下难题:
* JS CSS之间还是未有开掘变量和选取器等
* 复杂的命名

SASS:

使用前边的BEM例子,使用一些SASS的@extend

.Button--common { /* font-sizes, padding, border-radius */ }

.Button--normal { @extends .Button--common; /* blue color, light blue background */}

.Button--error { @extends .Button--common; /* red color, light red background */}

那将编译为

.Button--common, .Button--normal, .Button--error { /* font-sizes, padding, border-radius */ }

.Button--normal { /* blue color, light blue background */ }

.Button--error { /* red color, light red background */ }

您只须要在您的价签上引用贰个类名,能够获得通用的和唯有的体制。功能很庞大,但您无法不精通,那也存在着非常处境和陷阱。HugoGiraudel 汇总了一部分难点,想驾驭更加多,请点击《为什么您应该制止使用SASS的@extend》

SASS:

应用前边的BEM例子,使用部分SASS的@extend

.Button--common { /* font-sizes, padding, border-radius */ }

.Button--normal { @extends .Button--common; /* blue color, light blue background */}

.Button--error { @extends .Button--common; /* red color, light red background */}

那将编写翻译为

.Button--common, .Button--normal, .Button--error { /* font-sizes, padding, border-radius */ }

.Button--normal { /* blue color, light blue background */ }

.Button--error { /* red color, light red background */ }

您只供给在你的标签上援引八个类名,能够获得通用的和独有的样式。效用很有力,但你必须清楚,那也设有着独特别情报况和陷阱。HugoGiraudel 汇总了部分题目,想询问更加多,请点击《干什么您应当防止选用SASS的@extend》

CSS in JS

到底取消 CSS,用 JavaScript 写 CSS 准则,并内联样式。 React: CSS in JS // Speaker Deck。Radium,react-style 属于这一类。但存在以下难题:
* 不恐怕使用伪类,媒体询问等
* 样式代码也会现出大量再一次。
* 不能够运用成熟的 CSS 预管理器(或后计算机)

使用CSS模块

composes入眼词和@extend利用格局类似,但工作措施是不一致的。看个例证

.common { /* font-sizes, padding, border-radius */ }

.normal { composes: common; /* blue color, light blue background */ }

.error { composes: common; /* red color, light red background */ }

在浏览器旅长会被编写翻译为

.components_submit_button__common__abc5436 { /* font-sizes, padding, border-radius */ }

.components_submit_button__normal__def6547 { /* blue color, light blue background */ }

.components_submit_button__error__1638bcd { /* red color, light red background */ }

在js代码中,import styles from "./submit-button.css"将得到

styles: {
common: "components_submit_button__common__abc5436",
normal: "components_submit_button__common__abc5436 components_submit_button__normal__def6547", error: "components_submit_button__common__abc5436 components_submit_button__error__1638bcd"
}

要么接纳styles.normalstryles.error,在DOM上将被渲染为多少个类名

<button class="components_submit_button__common__abc5436 components_submit_button__normal__def6547"> Submit</button>

这就是composes的职能,你能够统一多少个样式,但不用去修改你的JS代码,也不会重写你的CSS选拔器。

使用CSS模块

composes关键词和@extend利用方法类似,但工作形式是见仁见智的。看个例证

.common { /* font-sizes, padding, border-radius */ }

.normal { composes: common; /* blue color, light blue background */ }

.error { composes: common; /* red color, light red background */ }

在浏览器上将会被编写翻译为

.components_submit_button__common__abc5436 { /* font-sizes, padding, border-radius */ }

.components_submit_button__normal__def6547 { /* blue color, light blue background */ }

.components_submit_button__error__1638bcd { /* red color, light red background */ }

在js代码中,import styles from "./submit-button.css"将得到

styles: {
common: "components_submit_button__common__abc5436",
normal: "components_submit_button__common__abc5436 components_submit_button__normal__def6547", error: "components_submit_button__common__abc5436 components_submit_button__error__1638bcd"
}

要么选拔styles.normalstryles.error,在DOM师长被渲染为多少个类名

<button class="components_submit_button__common__abc5436 components_submit_button__normal__def6547"> Submit</button>

这就是composes的职能,你能够统一多少个样式,但不用去修改你的JS代码,也不会重写你的CSS采取器。

使用JS 来治本体制模块

选择JS编写翻译原生的CSS文件,使其兼具模块化的技艺,代表是 CSS Modules GitHub – css-modules/css-modules: Documentation about css-modules 。

CSS Modules 能最大化地结合现成 CSS 生态(预管理器/后Computer等)和 JS 模块化能力,差比比较少零上学开销。只要你使用 Webpack,能够在别的项目中采纳。是小编以为近年来最棒的 CSS 模块消除决方案。

第3步.文件间分享代码

使用SASS或LESS工作,通过@import来援引同八个做事空间的文件。你能够注脚变量,函数,并在其余文件中行使。很不错的章程,但在每一种分化的类型中,变量命名有十分大大概争辨。那么您就得重构你的代码,编写如variables.scsssettings.scss,你也不知晓怎么组件信赖于怎么样个变量了。你的settings文件会变得十分的大。

也可以有越来越好的消除方案(《应用Webpack塑造更加小巧的CSS》),但出于SASS的全局属性,照旧有十分大的界定。

CSS模块二回只运营两个独立的文书,因而不会污染全局成效域。js代码用利用importrequire来援用正视,CSS模块使用compose从另二个文件引用样式。

/* colors.css */

.primary { color: #720; }

.secondary { color: #777; }/* other helper classes... */

/* submit-button.css */

.common { /* font-sizes, padding, border-radius */ }

.normal { composes: common; composes: primary from "../shared/colors.css"; }

使用组件,大家得以像引用本地类名同样,引用colors.css文件的类。何况,组件变化的类名在出口时会被改换,但CSS文件自个儿并不转移,composes块也会在转移浏览器端CSS从前被删除。

/* colors.css */
.shared_colors__primary__fca929 { color: #720; }
.shared_colors__secondary__acf292 { color: #777; }

/* submit-button.css */
.components_submit_button__common__abc5436 { /* font-sizes, padding, border-radius */ }
.components_submit_button__normal__def6547 {}

 

<button class="shared_colors__primary__fca929 components_submit_button__common__abc5436 components_submit_button__normal__def6547"> Submit </button>

 

实际,在浏览器端,normal未有本身的体制。那是好专门的学业,你可以增加新的语义化的对象,但不用去增多CSS样式。大家还是能做得越来越多一点,

在全站开采中加进类名和视觉的一致性,在浏览器端收缩年体育制代码的轻重缓急。

旁注:能够使用csso检查评定并移除空类。

第3步.文件间共享代码

使用SASS或LESS工作,通过@import来引用同三个行事空间的文件。你能够注明变量,函数,并在别的文件中应用。很科学的方法,但在相继差异的种类中,变量命名有一点都不小希望争持。那么你就得重构你的代码,编写如variables.scsssettings.scss,你也不知情怎么组件正视于如何个变量了。你的settings文件会变得比较大。

也许有更加好的消除方案(《动用Webpack营造越来越小巧的CSS》),但由于SASS的大局属性,依旧有相当的大的限制。

CSS模块三回只运营一个单身的文书,由此不会传染全局成效域。js代码用利用importrequire来援用信赖,CSS模块使用compose从另三个文书引用样式。

/* colors.css */

.primary { color: #720; }

.secondary { color: #777; }/* other helper classes... */

/* submit-button.css */

.common { /* font-sizes, padding, border-radius */ }

.normal { composes: common; composes: primary from "../shared/colors.css"; }

行使组件,大家得以像引用本地类名同样,援引colors.css文件的类。况兼,组件变化的类名在出口时会被改变,但CSS文件本身并不转移,composes块也会在变化莫测浏览器端CSS在此以前被剔除。

/* colors.css */
.shared_colors__primary__fca929 { color: #720; }
.shared_colors__secondary__acf292 { color: #777; }

/* submit-button.css */
.components_submit_button__common__abc5436 { /* font-sizes, padding, border-radius */ }
.components_submit_button__normal__def6547 {}

 

<button class="shared_colors__primary__fca929 components_submit_button__common__abc5436 components_submit_button__normal__def6547"> Submit </button>

 

其实,在浏览器端,normal未有笔者的体裁。那是好事情,你可以增多新的语义化的目的,但不用去增多CSS样式。大家还是能够做得更加多一点,

在全站开辟中加进类名和视觉的一致性,在浏览器端收缩年体育制代码的深浅。

旁注:能够行使csso检查测量检验并移除空类。

CSS Modules 使用教程

第4步:单一职责模块

组件的有力之处在于描述叁个因素是怎么着,而不修饰它的体裁。它以一种分裂的章程来映射页面实体(成分)和体制实体(样式规则)。

看四个旧的CSS例子

.some_element { font-size: 1.5rem; color: rgba(0,0,0,0); padding: 0.5rem; box-shadow: 0 0 4px -2px; }

三个元素,一些体制,很轻巧。就算那样,照旧存在部分标题:color,font-size,box-shadow,padding,那些都在此处钦点了,但无计可施在别的地点采纳。

大家用SASS重构一下。

$large-font-size: 1.5rem;
$dark-text: rgba(0,0,0,0);
$padding-normal: 0.5rem;
@mixin subtle-shadow { box-shadow: 0 0 4px -2px; }
.some_element {
@include subtle-shadow;
font-size: $large-font-size;
color: $dark-text;
padding: $padding-normal;
}

比旧的CSS样式有十分的大的精益求精,大家只是概念了相当少的一有的。事实上像$large-font-size是排版,$padding-normal是布局,这么些都只是用名字表明含义,不会在另外地方运作。借使要声美赞臣(Meadjohnson)个box-shadow变量,但它并无法公布小编含义,那时就必须使用@mixin@extend了。

第4步:单一职责模块

零件的强劲之处在于描述二个成分是何等,而不修饰它的体裁。它以一种差别的章程来映射页面实体(成分)和体制实体(样式准绳)。

看一个旧的CSS例子

.some_element { font-size: 1.5rem; color: rgba(0,0,0,0); padding: 0.5rem; box-shadow: 0 0 4px -2px; }

三个成分,一些体制,非常粗略。就算那样,依然存在部分主题素材:color,font-size,box-shadow,padding,这一个都在此地钦命了,但力无法支在另各地点使用。

大家用SASS重构一下。

$large-font-size: 1.5rem;
$dark-text: rgba(0,0,0,0);
$padding-normal: 0.5rem;
@mixin subtle-shadow { box-shadow: 0 0 4px -2px; }
.some_element {
@include subtle-shadow;
font-size: $large-font-size;
color: $dark-text;
padding: $padding-normal;
}

比旧的CSS样式有比相当的大的精雕细琢,大家只是概念了非常少的一片段。事实上像$large-font-size是排版,$padding-normal是布局,这几个都只是用名字表明含义,不会在另各地方运作。若是要声美赞臣个box-shadow变量,但它并不能够发表自己含义,那时就非得选拔@mixin@extend了。

启用 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模块

透过利用组件,大家能够在组件中,注释写明哪些能够重复使用的类名。

.element {
composes: large from "./typography.css";
composes: dark-text from "./colors.css";
composes: padding-all-medium from "./layout.css";
composes: subtle-shadow from "./effect.css";
}

动用文件系统,并非命名空间,来划分分歧用途的体裁。自然会油但是生援引四个纯粹用途的文件。

假设您想从贰个文书中援用五个类,这里有一个轻易的诀窍:

/* this short hand: */
.element {
composes: padding-large margin-small from "./layout.css";
}
/* is equivalent to: */
.element {
composes: padding-large from "./layout.css";
composes: margin-small from "./layout.css";
}

让你在网址开荒上,种种视觉对应二个类名。用地点的情势,来支付你的网址,变为一种恐怕。

.article {
composes: flex vertical centered from "./layout.css";
}
.masthead {
composes: serif bold 48pt centered from "./typography.css";
composes: paragraph-margin-below from "./layout.css";
}
.body {
composes: max720 paragraph-margin-below from "layout.css";
composes: sans light paragraph-line-height from "./typography.css";
}

那是一种自己有意思味特别研究的才能。在小编眼里,它结合了像Tachyons的原子CSS技术,像Semantic UI体制类名的可读性,单一任务等优势。

但CSS模块的传说才刚刚起首,希望你能去在现行反革命或今后应用它,并传到它。

使用CSS模块

通过使用组件,大家得以在组件中,注释写明哪些能够重复使用的类名。

.element {
composes: large from "./typography.css";
composes: dark-text from "./colors.css";
composes: padding-all-medium from "./layout.css";
composes: subtle-shadow from "./effect.css";
}

运用文件系统,实际不是命名空间,来划分不一样用途的样式。自然会现出引用三个纯粹用途的公文。

若是您想从三个文本中援引八个类,这里有三个方便人民群众的点子:

/* this short hand: */
.element {
composes: padding-large margin-small from "./layout.css";
}
/* is equivalent to: */
.element {
composes: padding-large from "./layout.css";
composes: margin-small from "./layout.css";
}

让你在网址开垦上,各样视觉对应三个类名。用地方的措施,来支付你的网址,变为一种或者。

.article {
composes: flex vertical centered from "./layout.css";
}
.masthead {
composes: serif bold 48pt centered from "./typography.css";
composes: paragraph-margin-below from "./layout.css";
}
.body {
composes: max720 paragraph-margin-below from "layout.css";
composes: sans light paragraph-line-height from "./typography.css";
}

那是一种自己有意思味越发研商的技能。以我之见,它构成了像Tachyons的原子CSS技术,像Semantic UI体制类名的可读性,单一职分等优势。

但CSS模块的传说才刚刚先河,希望您能去在方今或未来应用它,并传到它。

CSS Modules 在React中的施行

那正是说大家在React中怎么使用?

上手

经过行使CSS模块,希望能帮衬您和你的公司,即能够交换当前的CSS知识和成品,又足以更安适,更神速地完毕职业。大家已经竭尽维持语法的粗略,并写了部分事例,当你能够利用这几个事例里的代码时,你就足以接纳它实行职业了。这里有一对关于Webpack,JSPM和Browseriry品种的DEMO,希望对你全体支持。大家一贯看有哪些新的条件能够运转CSS模块:正在适配服务器端NODEJS和Rails。

为了使业务更简明,这里做了一个Plunkr,能够直接入手,不用安装。开始吧

 澳门新萄京官方网站 12

要是您计划使用了,能够看一看CSS模块源码,借使有啥样难题,能够在issue里实行座谈。CSS模块组,规模小,不能够涵盖全数的行使场景。

愿意你们的座谈。

祝:写样式高兴。

原文:CSS Modules

初稿链接:

上手

通过使用CSS模块,希望能帮衬您和您的公司,就可以以沟通当前的CSS知识和产品,又能够更舒畅,更迅捷地做到职业。我们已经竭尽保持语法的轻松,并写了有些事例,当您能够动用那几个事例里的代码时,你就能够选取它进行专门的学业了。这里有一对有关Webpack,JSPM和Browseriry项指标DEMO,希望对你持有扶助。大家直接看有哪些新的条件足以运作CSS模块:正在适配服务器端NODEJS和Rails。

为了使专门的学问更简便,这里做了叁个Plunkr,能够一向入手,不用安装。发轫吧

 澳门新萄京官方网站 13

要是你准备选择了,能够看一看CSS模块源码,假若有何样难点,能够在issue里进行探究。CSS模块组,规模小,无法涵盖全数的应用场景。

瞩望你们的座谈。

祝:写样式欢乐。

原文:CSS Modules

原著链接:

手动援引化解

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预管理器只怕后Computer。

此间以应用了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 收藏 评论

澳门新萄京官方网站 14

本文由澳门新萄京官方网站发布于澳门新萄京赌场网址,转载请注明出处:澳门新萄京官方网站:未来的编码方式,用法教

关键词: