快捷搜索:
来自 新京葡娱乐场网址 2019-10-02 15:36 的文章
当前位置: 67677新澳门手机版 > 新京葡娱乐场网址 > 正文

让CSS更完美:PostCSS-modules

让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初步只是三个标榜文书档案的工具,可是事情到1998年时有发生了扭转。浏览器中不再单单唯有文书档案了,即时通信,各个软件,游戏,没什么是浏览器不能够承载的。

未来,大家在HTML和CSS方面业已走了相当远比较远,开荒者们振奋出了CSS全部的潜质,乃至创办出了某些CSS自身都快理解不了的东西。

每二个有经历的开采者都掌握 — 每一回使用全局命名空间都以预留了一个生出bug的隐患,因为急忙就恐怕出现就像命名争论之类的难点,再增多另各州方(项目更大等)的影响,代码更加的不易维护。

对此CSS来讲,那意味有标题标布局。CSS特异性和CSS宽泛性之间,平昔存在着如英雄有趣的事般的对决。仅仅是因为各种选取器都大概会潜移默化到那么些不想被影响的要素,使之爆发了争持。

核心全体编制程序语言都支持部分功效域。和CSS朝夕相伴的JavaScript有英特尔, CommonJS和终极明显的ES6 modules。可是我们并从未一个方可模块化CSS的措施。

对于一个高水平连串以来,独立的UI组件(也正是组件化)相当重大的 — 各类组件小巧独立,能够拼合成复杂的页面,那让大家节省了广大的行事。可是我们始终有二个问号,怎么着幸免全局命名争辩那?

谈谈 PostCSS

2017/10/18 · CSS · POSTCSS

初稿出处: laizimo   

解决措施

因为有前人的索求,今后大家有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博客

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有吗关系?此处让自己为你们不停道来。

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

图片 1

本身想和你们说再见

图片 2

当前,在工程化开拓中,使用最多的应该便是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命名争持的难点,已经过了相当长时间,能够说咱俩前端开采人士,每七日在心劳计绌,如何去温婉的消除这个标题。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>

历次这样子写,测度是个程序猿,都得加班吧,哈哈!

本文由67677新澳门手机版发布于新京葡娱乐场网址,转载请注明出处:让CSS更完美:PostCSS-modules

关键词: