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

澳门新萄京官方网站:PostCss使用方法,未来的编

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

让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初始只是一个吹牛文书档案的工具,不过事情到一九九八年发生了转换。浏览器中不再只是唯有文书档案了,即时通信,各类软件,游戏,没什么是浏览器不能够承载的。

近期,大家在HTML和CSS方面业已走了非常远相当远,开辟者们振作振作出了CSS全体的潜在的能量,以致创建出了活龙活现部分CSS本人都快理解不了的事物。

每二个有经验的开荒者都晓得 — 每一趟使用全局命名空间都以留下了一个发出bug的隐患,因为快捷就也许现身就像命名矛盾之类的主题素材,再增加其余方面(项目更是大等)的震慑,代码越来越不易维护。

对于CSS来讲,这代表有毛病的布局。CSS特异性和CSS宽泛性之间,一贯存在着如英雄典故般的对决。仅仅是因为每一个选取器都只怕会影响到那叁个不想被潜移暗化的因素,使之发生了冲突。

骨干具备编制程序语言都扶植部分成效域。和CSS尺布多管闲事粟的JavaScript有AMD, CommonJS和结尾分明的ES6 modules。不过我们并不曾三个可以模块化CSS的措施。

对于叁个高水平连串以来,独立的UI组件(也正是组件化)非常关键的 — 各样组件小巧独立,能够拼合成复杂的页面,那让大家节省了不菲的办事。不过大家意气风发味有贰个疑点,怎么着防范全局命名冲突那?

谈谈 PostCSS

2017/10/18 · CSS · POSTCSS

初稿出处: laizimo   

一、PostCss简介

PostCSS 本人是一个效果相比较单纯的工具。它提供了风流倜傥种方式用 JavaScript 代码来拍卖 CSS(A tool for transforming CSS with JavaScript)。它承受把 CSS 代码分析成肤浅语法树结构(Abstract Syntax Tree,AST),再交由插件来进展拍卖。插件基于 CSS 代码的 AST 所能举办的操作是丰富多彩的,举例能够支撑变量和混入(mixin),扩展浏览器相关的表明前缀,或是把利用以往的 CSS 规范的样式法规转译(transpile)成当下的 CSS 规范援救的格式。从这几个角度来讲,PostCSS 的有力之处在于其不断上扬的插件系列。开垦职员也得以依据项目标内需,开荒出本身的 PostCSS 插件。

PostCSS 不会独自使用,而是与已有个别构建筑工程具协作使用,如 Gulp、Grunt 和 Webpack 都可以。大家只必要选用必要的 PostCSS 插件进行配置。本文首要介绍在Gulp 中动用 PostCSS 的二种常用插件。

CSS Modules 详解及 React 中实践

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

原稿出处: pure render - camsong   

澳门新萄京官方网站 1

CSS 是前者领域中前行最慢的勃勃生机块。由于 ES2014/二零一六 的一点也不慢广泛和 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 模块解决决方案。那二日在项目中山大学量使用,下边具体享受下实行中的细节和费尽脑筋。

 

前言

那是Glen Maddern揭橥于二零一六年3月13日的后生可畏篇作品,首假如事先翻译的篇章《略知如火如荼二CSS模块方法》里关系这篇小说,以后好不轻便蔓引株求跟进来看看。

此处的翻译都以依赖自家本身的通晓举行的,所以不是一句一句的来的,有何样不对的也不免,水平有限,希望大家建议。

缓慢解决方式

因为有前任的探求,以往大家有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;
  }
}

前言

近来的前端,javascript的进化明显,框架林立。同期,html也是齐驱并驾,推出了HTML5正经,况且获得了推广。那样的上扬却只是少了四个脚色?

CSS,正是那一个就如不起眼的东西,却在开垦中发挥着和js同样主要的效果与利益。css,是黄金时代种体制脚本,好像和编程语言有着必然的偏离,大家得以将之理解为大器晚成种描述方法。那就像导致css被轻视了。但是,css近几年来正在经历着贰次巨变——CSS Module。笔者回忆js的井喷期应该能够说是node带来的,它带动了Module的定义,使得JS能够被工程化开辟品种。那么,今日的css,也将越来越美好。假诺你喜欢自身的文章,款待批评,款待Star~。接待关切本人的github博客

二、构建gulp PostCss项目

有关gulp的选拔方式,请参见gulp教程,创设步骤:
<pre>
1.npm init
2.npm install gulp gulp-postcss --save-dev
3.npm install autoprefixer --save-dev(增多要求引用的插件)
</pre>
在类型文件夹下新建文件gulpfile.js、文件夹/dest & /src,然后配置gulpfile.js:
<pre>
var gulp = require('gulp');
var postcss = require('gulp-postcss');
// autoprefixer 给一点供给包容性的质量增添浏览器私有前缀
var autoprefixer = require('autoprefixer');
// cssnext 允许使用CSS的今后版本
var cssnext = require('cssnext');
// precss 检查了@if @else,编写翻译符合必要的代码
var precss = require('precss');
// alias 定义自个儿的速写或"小名"
var alias = require('postcss-alias');
// postcss-crip 有数百个属性缩写的插件
var crip = require('postcss-crip');
// 创立CSS图形 postcss-circle(创制圆) postcss-triangle(创建三角形)
var circle = require('postcss-circle');
var triangle = require('postcss-triangle');
// 使用 top: center; 来达到垂直居中, left: center; 达到水平居中
var center = require('postcss-center');
gulp.task('css', function() {
var processors = [
autoprefixer,
cssnext,
precss,
alias,
crip,
circle,
triangle,
linkcolor,
center
];
return gulp.src('./src/.css')
.pipe(postcss(processors))
.pipe(gulp.dest('./dest'));
});
gulp.task('default', ['css']);
</pre>
配置完成后,大家能够来测量检验下postcss插件到底能带动如何的欢娱。
1.在/src目录下新建八个style.css的文本,随意写二个索然无味大家供给安装浏览器前缀的体裁,比如:
<pre>
.demo {
display: flex;
transform: rotate(90deg);
}
</pre>
2.在支配台输入指令gulp css 恐怕gulp,查看/dest文件夹,开采文件夹下有一个style.css的公文,里面纵使通过postcss的autoprefixer插件管理的css代码:
<pre>
.demo {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
</pre>
再看看别的postcss插件所起到的功效:
1.cssnext 插件允许开荒职员在当前的品类中选取CSS以往版本中恐怕会步向的新特点。cssnext 负担把这么些新性格转译成当下浏览器中得以使用的语法cssnext 是如日中天雨后春笋与 CSS 未来版本相关的 PostCSS 插件的组合,愈来愈多措施能够参照他事他说加以考察更多cssnext方法。
• 自定义属性的称谓以“--”以前。当注明了自定义属性之后,能够在样式法规中应用“var()”函数来援引,如下:
<pre>
.cssnext {
background: color(red alpha(-10%));
}
:root {
--mainColor: red;
}
a {
color: color(var(--mainColor) alpha(90%));
}
编写翻译后的结果:
.cssnext {
background: rgba(255, 0, 0, 0.9);
}
a {
color: rgba(255, 0, 0, 0.9);
}
</pre>
• 自定义选取器,CSS 扩充标准(CSS Extensions)中允许创制自定义选拔器,比方能够对具有的标题成分(h1 到 h6)创造贰个自定义选用器并选用样式。通过“@custom-selector”来定义自定义选拔器。
<pre>
@custom-selector :--style h1, h2, h3, h4, h5, h6;
:--style {
font-weight: bold;
}
编写翻译后的结果:
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: bold;
}
</pre>
• @apply,命名自定义属性中积攒热气腾腾组属性,然后以别的样式援用它们,类似于sass的@extend,须求征引并下载:
<pre>
在gulpfile.js中引用:
var apply = require('postcss-apply');
在决定台输入指令:
npm install postcss-apply --save-dev
</pre>
<pre>
:root {
--my-theme: {
background-color: black;
color: white;
border: 1px solid green;
};
}
.my {
@apply --my-theme;
}
编译后的结果:
.my {
background-color: black;
color: white;
border: 1px solid green;
}
</pre>
• calc()能够利用数学生运动算中的轻巧加( )、减(-)、乘(
)和除(/)来化解难点,並且还足以依靠单位如px,em,rem和百分比来转变总计:
<pre>
在gulpfile.js中引用:
var calc = require('postcss-calc');
在决定台输入指令:
npm install postcss-calc --save-dev
</pre>
<pre>
:root {
--font-size-theme: 14px;
}
body {
font-size: var(--font-size-theme);
}
div {
font-size: calc(var(--font-size-theme) x 2);
height: calc(50px - 1em);
margin-bottom: calc(var(--font-size-theme) x 1.5);
}
编写翻译后的结果:
body {
font-size: 14px;
}
div {
font-size: 28px;
height: calc(50px - 1em);
margin-bottom: 21px;
}
</pre>
2.选择纯CSS来创建形状,如postcss-circle & postcss-triangle,创建圆形和三角形的语法:
<pre>
.circle {
circle: size color
}
.triangle {
triangle: pointing-<up|down|left|right>;
width: <length>;
height: <length>;
background-color: <color>;
}
</pre>
postcss有成都百货上千有意思的插件,风乐趣的可以去github上查占星关的plugin,然后尝试选拔。

CSS 模块化碰着了什么难点?

CSS 模块化首要的是要消除好三个难题:CSS 样式的导入和导出。灵活按需导入以便复用代码;导出时要能力所能达到遮盖个中功用域,以防变成全局污染。Sass/Less/PostCSS 等持续试图缓慢解决 CSS 编程技术弱的难点,结果它们做的也的确能够,但那并从未化解模块化最重大的主题材料。推特(TWTR.US)程序猿 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开拓思量上找到二个变型点,最佳去找Christopher Chedeau 二〇一六年八月在NationJS上宣布的“css in js”解说。那是贰个分水线,各样区别的考虑,就如高速粒子似的在和谐的方向上快速进步。比如:在React及部分看重React的门类中写样式, React Style,jsxstyle和Radium是个中七个,最新的,最抢眼的,和最实用的艺术。假如发明是在风华正茂种探寻的情事下邻座的可能(adjacent possible),那么christopher是开创了成百上千类似周围(adjacent)大概性。

澳门新萄京官方网站 2

这个难点,以不一样的花样存在于大的CSS代码库中。christopher建议,那个主题素材都或许通过在js中写代码来消除。但这种建设方案引进了其自己的错综相连和特征。只要看一下,在头里涉嫌的品种中(React Style,jsxstyle和Radium),管理在:hover状态下range的方式。这些主题材料,在浏览器端css中已经早被化解了。

CSS Modules team找到难点的最首要--保持和CSS大器晚成致,使用styles-in-js的格局编写。纵然大家照旧坚持不渝主张使用了CSS的花样,但还应该有要谢谢对我们提供数不胜数提议的朋友。

我们一贯在苦思苦想地思念CSS,怎么样去编写更加好。

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的服务端情状中是不行十一分困难的。

正文

既然如此作为龙马精神篇推广PostCSS的文章,大家就相应先来询问一下那是如何,和大家后边讲的CSS Module有吗关系?此处让自家为你们不停道来。

CSS Modules 模块化方案

澳门新萄京官方网站 3

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 语法,编写翻译时会报错。就不得不使用预管理器自个儿的语法来做样式复用了。
澳门新萄京官方网站:PostCss使用方法,未来的编码方式。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);

第1步:暗中认可局地成效域

在css模块中,每二个文本都以单身编写翻译的,因而你能够运用部分CSS短命名-不用忧郁命名矛盾。上边看一下,提交开关的4种状态的例

澳门新萄京官方网站 4

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

澳门新萄京官方网站 5

自个儿想和你们说再见

澳门新萄京官方网站 6

当下,在工程化开拓中,使用最多的应当正是Less、Sass和Stylus。首先,还是介绍一下它们啊。它们有个统风度翩翩的名字——css预管理器。何为CSS预管理器?应该正是黄金时代种能够将您遵照它的平整写出来的格式转成css的事物(依然讲的易懂一点)。它们的面世能够说是恰好碰上其时,消除了css的有的可惜:

  • 语法远远不足有力,不能嵌套书写,不便于模块化开垦
  • 从不改变量和逻辑上的复用机制,导致在css的属性值中只好接纳字面量情势,以致持续重复书写重复的样式,导致难以保证。

直面上述难题,css预管理器给出了那多少个有效的建设方案:

  1. 变量:就好像任何编制程序语言同样,免于多处修改。
    • Sass:使用「$」对变量实行宣示,变量名和变量值使用冒号举行分割
    • Less:使用「@」对变量实行宣示
    • Stylus:中宣称变量未有其他限制,结尾的子集团秋毫之末,但变量名和变量值之间必供给有『等号』。但供给潜心的是,借使用“@”符号来声称变量,Stylus会进行编写翻译,但不会赋值给变量。正是说,Stylus 不要选择『@』评释变量。Stylus 调用变量的法子和Less、Sass千篇一律。
  2. 作用域:有了变量,就非得得有成效域实行田管。就想js同样,它会从部分功能域初阶往上搜求变量。
    • Sass:它的主意是三者中最差的,不设有全局变量的概念
    • Less:它的方法和js比较平日,逐级往上寻觅变量
    • Stylus:它的措施和Less比较相似,但是它和Sass同样更偏侧于指令式查找
  3. 嵌套:对于css来说,有嵌套的写法无疑是圆满的,更疑似父亲和儿子层级之间显然关系
    • 三者在这里处的处理都以同生气勃勃的,使用「&」表示父元素

有了那几个方案,会使得我们可以在承接保险DPY、可维护性、灵活性的前提下,编写css样式。

重临话题中,之所以会师世向预管理器那样子的应用方案,百川归海依然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书写格局

用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命名冲突的标题,由来已经非常久,能够说咱俩前端开辟人士,每一日在狼狈周章,如何去文雅的解决这一个难点。css并未有像js同样出现了英特尔、CMD和ES6 Module的模块化方案。

那正是说,回到难题,怎样去消除吗?大家的先辈也会有建议过不相同的方案:

  1. Object-Oriented CSS
  2. BEM
  3. SMACSS

方案能够说是数不胜数,不乏有团体内部的化解方案。不过超越二分之一都是二个共同点——为选拔器增添前缀。

那只是三个体力活,你或者供给手动的去编写长长的选取器,或然你能够运用预编译的css语言。可是,它们犹如并为消除本质的难点——为啥会形成这种缺憾。大家不要紧来拜望,使用BEM规范写出来的事例:

JavaScript

<!-- 正确的。成分都位居 'search-form' 模块内 --><!-- 'search-form' 模块 --> <form class="search-form"> <!-- 在 'search-form' 模块内的 'input' 成分 --> <input class="search-form__input" /> <!-- 在 'search-form' 模块内的 'button' 成分 --> <button class="search-form__button"></button> </form> <!-- 不得法的。成分位于 'search-form' 模块的上下文之外 --><!-- 'search-form' 模块 --> <form class=""search-block> </form> <!-- 在 'search-form' 模块内的 'input' 成分 --> <input class="search-form__input"/> <!-- 在 'search-form' 模块内的 'button' 成分 --> <button class="search-form__button"></button>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- 正确的。元素都位于 'search-form' 模块内 --><!-- 'search-form' 模块 -->
<form class="search-form">
    <!-- 在 'search-form' 模块内的 'input' 元素 -->
    <input class="search-form__input" />
    <!-- 在 'search-form' 模块内的 'button' 元素 -->
    <button class="search-form__button"></button>
</form>
<!-- 不正确的。元素位于 'search-form' 模块的上下文之外 --><!-- 'search-form' 模块 -->
<form class=""search-block>
</form>
<!-- 在 'search-form' 模块内的 'input' 元素 -->
<input class="search-form__input"/>
<!-- 在 'search-form' 模块内的 'button' 元素 -->
<button class="search-form__button"></button>

老是那样子写,推断是个技师,都得加班吧,哈哈!

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模块,你不要想念使用一些短命名了。能够像下边这样。

/* 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 Module情势来形成网页组件的支出。自从二〇一四年起来,国外就风行了CSS-in-JS(规范的代表,react的styled-components),还应该有大器晚成种正是CSS Module。

本篇谈及前面一个,须求对后面一个进行通晓的话,自行Google就可以

对于css,大家都了解,它是一门描述类语言,并不设有动态性。那么,要怎么去产生module呢。大家得以先来看多个react使用postcss的事例:

//example.css .article { font-size: 14px; } .title { font-size: 20px; }

1
2
3
4
5
6
7
8
//example.css
 
.article {
    font-size: 14px;
}
.title {
    font-size: 20px;
}

而后,将这一个命名打乱:

.zxcvb{ font-size: 14px; } .zxcva{ font-size: 20px; }

1
2
3
4
5
6
.zxcvb{
    font-size: 14px;
}
.zxcva{
    font-size: 20px;
}

将之命名对应的故事情节,放入到JSON文件中去:

{ "article": "zxcvb", "title": "zxcva" }

1
2
3
4
{
    "article": "zxcvb",
    "title": "zxcva"
}

然后,在js文件中采用:

import style from 'style.json'; class Example extends Component{ render() { return ( div classname={style.article}> div classname={style.title}>/div> /div> ) } }

1
2
3
4
5
6
7
8
9
10
11
import style from 'style.json';
 
class Example extends Component{
    render() {
        return (
            div classname={style.article}>
                div classname={style.title}>/div>
            /div>
        )
    }
}

那标准,就描绘出了百尺竿头副css module的原型。当然,大家不容许每趟都必要手动去写那个东西。大家须求自动化的插件扶植大家做到那二个进度。之后,大家理应先来询问一下postCSS。

总结

CSS Modules 很好的化解了 CSS 近些日子边临的模块化难点。协理与 Sass/Less/PostCSS 等搭配使用,能充足利用现存手艺积淀。同有的时候间也能和全局样式灵活搭配,便于项目中国和日本渐搬迁至 CSS Modules。CSS Modules 的兑现也属轻量级,现在有行业内部实施方案后得以低本钱迁移。借使你的出品中恰恰曰镪类似主题材料,非常值得黄金时代试。

1 赞 2 收藏 评论

澳门新萄京官方网站 7

取名约定

大概拿按键的事例来讲

/* 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}`

理之当然,如若您是依据代码量来收钱的,你能够依据你的办法持续。

本人供给认知您

PostCSS是何许?也许,你会以为它是预管理器、大概后Computer等等。其实,它什么都不是。它能够领悟为黄金年代种插件系统。使用它GitHub主页上的牵线:

PostCSS is a tool for transforming CSS with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax, inline images, and more.

您能够在采纳预管理器的事态下使用它,也足以在原生的css中动用它。它都是支撑的,何况它具备着一个高大的生态系统,比方你可能常用的Autoprefixer,正是PostCSS的一个丰富受迎接的插件,被Google, Shopify, Instagram, Bootstrap和CodePen等公司周边选用。

本来,大家也足以在CodePen中接纳它:

澳门新萄京官方网站 8

此地推荐大家看一下PostCSS的深远体系

接下去,大家来看一下PostCSS的布置:

那边大家选拔webpack postcss postcss-loader cssnext postcss-import的重新整合。

第蒸蒸日上,大家能够因此yarn来设置这几个包:

yarn add --dev webpack extract-text-webpack-plugin css-loader file-loader postcss postcss-loader postcss-cssnext postcss-import

1
2
yarn add --dev webpack extract-text-webpack-plugin css-loader file-loader postcss postcss-loader postcss-cssnext postcss-import
 

然后,大家配备一下webpack.config.js:

const webpack = require('webpack'); const path = require('path'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { context: path.resolve(__dirname, 'src'), entry: { app: './app.js'; }, module: { loaders: [ { test: /.css$/, use: ExtractTextPlugin.extract({ use: [ { loader: 'css-loader', options: { importLoaders: 1 }, }, 'postcss-loader', ], }), }, ], }, output: { path: path.resolve(__dirname, 'dist/assets'), }, plugins: [ new ExtractTextPlugin('[name].bundle.css'), ], };

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
const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
  context: path.resolve(__dirname, 'src'),
  entry: {
    app: './app.js';
  },
  module: {
    loaders: [
      {
        test: /.css$/,
        use: ExtractTextPlugin.extract({
          use: [
            {
              loader: 'css-loader',
              options: { importLoaders: 1 },
            },
            'postcss-loader',
          ],
        }),
      },
    ],
  },
  output: {
    path: path.resolve(__dirname, 'dist/assets'),
  },
  plugins: [
    new ExtractTextPlugin('[name].bundle.css'),
  ],
};

下一场在根目录下配置postcss.config.js

module.exports = { plugins: { 'postcss-import': {}, 'postcss-cssnext': { browsers: ['last 2 versions', '> 5%'], }, }, };

1
2
3
4
5
6
7
8
module.exports = {
  plugins: {
    'postcss-import': {},
    'postcss-cssnext': {
      browsers: ['last 2 versions', '> 5%'],
    },
  },
};

其后,就足以在支付中利用cssnext的风味了

/* Shared */ @import "shared/colors.css"; @import "shared/typography.css"; /* Components */ @import "components/Article.css";

1
2
3
4
5
/* Shared */
@import "shared/colors.css";
@import "shared/typography.css";
/* Components */
@import "components/Article.css";

/* shared/colors.css */ :root { --color-black: rgb(0,0,0); --color-blue: #32c7ff; } /* shared/typography.css */ :root { --font-text: "FF DIN", sans-serif; --font-weight: 300; --line-height: 1.5; } /* components/Article.css */ .article { font-size: 14px; & a { color: var(--color-blue); } & p { color: var(--color-black); font-family: var(--font-text); font-weight: var(--font-weight); line-height: var(--line-height); } @media (width > 600px) { max-width: 30em; } }

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
/* shared/colors.css */
:root {
  --color-black: rgb(0,0,0);
  --color-blue: #32c7ff;
}
 
/* shared/typography.css */
:root {
  --font-text: "FF DIN", sans-serif;
  --font-weight: 300;
  --line-height: 1.5;
}
 
/* components/Article.css */
.article {
  font-size: 14px;
  & a {
    color: var(--color-blue);
  }
  & p {
    color: var(--color-black);
    font-family: var(--font-text);
    font-weight: var(--font-weight);
    line-height: var(--line-height);
  }
  @media (width > 600px) {
    max-width: 30em;
  }
}

最终选用webpack进行编写翻译就足以了。

一个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模块又无可奈何使用了。

总结

PostCSS,国内还未曾太流行起来,不过相信不久的今天也会稳步的火爆,而且我国的能源少之又少,可是近年来新出了一本大漠老师们共同翻译的书——《深远PostCSS Web设计》。风乐趣的人也能够去看一下,学习某些前言的东西。本篇也只是大抵的写了龙马精神晃PostCSS的东西,鉴于国内能源少之又少,所以参照他事他说加以考察了一下海外的博文化教育材,上面会有链接。

只要您对自家写的有疑点,能够商议,如小编写的有错误,迎接指正。你赏识自个儿的博客,请给本人关爱Star~呦。大家齐声总括一同发展。应接关怀自己的github博客

第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中使用的类名来得以完成。

参照他事他说加以考察链接

PostCSS-modules:
make CSS great again!

PostCSS Deep Dive: What You Need to Know

1 赞 3 收藏 评论

澳门新萄京官方网站 9

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

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选拔器。

第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检查实验并移除空类。

第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是布局,这么些都仅仅用名字表明含义,不会在别的省方运作。假若要声澳优(Ausnutria Hyproca)个box-shadow变量,但它并不能够公布自己含义,那时就无法不运用@mixin@extend了。

使用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模块,希望能协理你和你的集团,即能够沟通当前的CSS知识和产品,又能够更舒服,更火速地做到工作。大家已经竭尽维持语法的粗略,并写了有个别例证,当您能够采取这几个事例里的代码时,你就足以行使它实行工作了。这里有局地有关Webpack,JSPM和Browseriry类型的DEMO,希望对您具有扶助。大家一贯看有哪些新的条件能够运营CSS模块:正在适配服务器端NODEJS和Rails。

为了使业务更简短,这里做了二个Plunkr,能够一贯动手,不用安装。领头吧

 澳门新萄京官方网站 10

假定您计划使用了,能够看黄金时代看CSS模块源码,若是有啥难题,能够在issue里进行座谈。CSS模块组,规模小,不恐怕包涵全体的应用场景。

盼望你们的座谈。

祝:写样式欢快。

原文:CSS Modules

初藳链接:

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

关键词: