您的位置:时时app平台注册网站 > web前端 > 探讨 PostCSS【彩世界网址】

探讨 PostCSS【彩世界网址】

2019-10-12 18:34

正文

既然如此作为一篇推广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

前人的方法

对于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模块(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,本国还从未太流行起来,可是相信不久的未来也会日渐的热门,况兼本国的能源非常少,可是近年来新出了一本大漠老师们共同翻译的书——《长远PostCSS Web设计》。有意思味的人也得以去看一下,学习某些前言的事物。本篇也只是大致的写了眨眼之间间PostCSS的东西,鉴于我国财富比较少,所以参谋了弹指间外国的博文化教育材,上边会有链接。

假如你对自己写的有失水准,能够商议,如本身写的有错误,迎接指正。你欣赏笔者的博客,请给笔者关爱Star~呦。大家齐声总结一齐前行。接待关怀自己的github博客

让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有英特尔, CommonJS和末段显著的ES6 modules。不过我们并未一个足以模块化CSS的主意。

对此二个高水平种类来讲,独立的UI组件(也正是组件化)极度主要的 — 各种组件小巧独立,可以拼合成复杂的页面,那让大家节省了无数的办事。不过大家一贯有四个疑难,如何堤防全局命名冲突那?

笔者想和你们说再见

彩世界网址 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规范发展的滞后性导致的。同有的时候间,大家也理应思量一下,真的只要预管理器就够了呢?往往在项目过大时,由于贫乏模块的定义,全局变量的难题会每每干扰着您。每便定义采用器时,总是要关照到别的文件中是还是不是也运用了长久以来的命名。究竟项目是集体的,而不是个体的。哪是还是不是有一些子能够化解这个标题啊?

缓慢解决方式

因为有前任的搜求,现在我们有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;
  }
}

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

PostCSS-modules:
make CSS great again!

PostCSS Deep Dive: What You Need to Know

1 赞 3 收藏 评论

彩世界网址 3

谈谈 PostCSS

2017/10/18 · CSS · POSTCSS

原来的小讲出处: laizimo   

前言

将来的前端,javascript的升华明显,框架林立。同偶然候,html也是齐足并驱,推出了HTML5行业内部,并且获得了布满。那样的上扬却唯独少了贰个剧中人物?

CSS,便是以此如同不起眼的实物,却在支付中发挥着和js一样首要的功力。css,是一种体制脚本,好像和编制程序语言有着必然的间隔,咱们得以将之通晓为一种描述方法。那不啻导致css被渺视了。可是,css近几年来正在经历着二回巨变——CSS Module。笔者记得js的井喷期应该能够说是node带来的,它带来了Module的概念,使得JS可以被工程化开拓项目。那么,后天的css,也将进一步美好。纵然您欣赏本身的篇章,应接商量,应接Star~。应接关怀本人的github博客

一种希望

后天的网页开垦,讲究的是组件化的思考,因而,急要求可行的css Module方式来成功网页组件的费用。自从2016年始发,海外就风靡了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。

自家急需认知你

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的叁个非常受招待的插件,被谷歌, Shopify, 推文(Tweet), Bootstrap和CodePen等营业所遍布运用。

当然,我们也得以在CodePen中央银行使它:

彩世界网址 4

此地推荐大家看一下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进行编写翻译就能够了。

本文由时时app平台注册网站发布于web前端,转载请注明出处:探讨 PostCSS【彩世界网址】

关键词: