PostCSS真的太好用了！

时间  2019-11-08
标签 postcss 好用 繁體版
原文   原文链接

image.png

在PostCSS官网有着这样的对PostCSS特性介绍，箭头后面是对应功能的插件及其github地址。css

PostCSS是一款使用插件去转换CSS的工具，有许多很是好用的插件，例如autoprefixer,cssnext以及CSS Modules。而上面列举出的这些特性，都是由对应的postcss插件去实现的。而使用PostCSS则须要与webpack或者parcel结合起来。
在Parcel中使用PostCSS的方法：添加配置文件.postcssrc(JSON),.postcssrc.js或者是postcss.config.js。
拿 .postcssrc 文件来举例：html

{
  "modules": true,
  "plugins": {
    "autoprefixer": {
      "grid": true
    }
  }
}

Plugins 在 plugins 对象中被指定为 key，并使用对象的值定义选项。若是插件没有选项，只需将其设置为 true 便可。
下面我将对根据官方readme的演示demo，对各个插件进行一一介绍，并添加一些隐藏在插件背后的知识点的说明。前端

1.什么是Autoprefixer？

首先明确一点Autoprefixer是一个根据can i use解析css而且为其添加浏览器厂商前缀的PostCSS插件。
不加任何vender prefix的一般写法。vue

::placeholder {
    color: gray;
}

Autoprefixer将使用基于当前浏览器支持的特性和属性数据去为你添加前缀。你能够尝试下Autoprefixer的demo：http://autoprefixer.github.io/
image
由上图能够看出，像没有浏览器差别已经彻底符合W3C标准的css2.1属性display，position等，Autoprefixer不会为其加前缀，而像css3属性transform就会为其加前缀，其中--webkit是chrome和safari前缀，--ms则是ie的前缀，像firefox因为已经实现了对transform的W3C标准化，所以使用transform便可。react

所以Autoprefixer是一个很是有用的加速前端开发的一个工具，可是它须要基于PostCSS去发挥做用。webpack

若是对vender prefix存疑，能够去看个人这篇博客：rem / Vender Prefix / CSS extensionscss3

2.什么是postcss-cssnext？

postcss-cssnext语法input：git

:root {
  --fontSize: 1rem;
  --mainColor: #12345678;
  --centered: {
      display: flex;
      align-items: center;
      justify-content: center;
  };
}
body {
    color: var(--mainColor);
    font-size: var(--fontSize);
    line-height: calc(var(--fontSize) * 1.5);
    padding: calc((var(--fontSize) / 2) + 1px);
}
.centered {
    @apply --centered;
}

浏览器可用语法output:angularjs

body {
    color: rgba(18, 52, 86, 0.47059);
    font-size: 16px;
    font-size: 1rem;
    line-height: 24px;
    line-height: 1.5rem;
    padding: calc(0.5rem + 1px);
}
.centered {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

粗略看了一遍演示demo，http://cssnext.io/playground/，感受既好用又很差用。
好用的地方在于经过var()和calc()进行css属性值的计算，也有@apply这样的应用大段规则的写法，也能够借此去了解一些新的css草案特性；很差用的地方在于有必定的学习成本，并且在前期与webpack，gulp以及parcel进行结合时也须要花费必定时间，而且若是有新的前端组成员加入，必需要掌握这种cssnext的语法。
这样作有些彷佛在尝试将css变为一种能够进行逻辑处理的语言，可是我我的认为这对于css这样的灵活的须要具象思惟而且须要大量调试的语言来讲，工做中使用cssnext不是一个很好的选择，可是工做之余能够做为一个学习新的css草案特性的一个入口，待到归入标准再去使用。github

刚开始对本身的想法不肯定，所以去看了下前辈们的想法，其中顾铁灵对cssnext的想法与个人想法一模一样：

CSS 的转译器（transpiler），根据目前仍处于草案阶段、未被浏览器实现的标准把代码转译成符合目前浏览器实现的 CSS。相似 ES6 的 Babel。
相比之下，Autoprefixer 更加具备实用价值，而 cssnext 实现的功能之后浏览器会怎么实现还存疑，感受只能玩玩。

3.什么是postcss-modules？

在看postcss-modules以前，首先要明确的是CSS Modules的这个概念，关于CSS Modules，能够阅读我翻译的一篇文章：【译】什么是CSS Modules ？咱们为何须要他们？

postcss-modules则是CSS Modules在PostCSS上的实现插件，这里有一篇插件做者本人写的介绍postcss-modules的文章：PostCSS-modules:make CSS great again!。

在我有限的开发经验中，只在react中使用过css modules，在vue和angularjs中都没用到过，并且在react中使用时，不会去用postcss-modules这个插件，而是使用react-css-modules这个CSS Modules思想在react中的插件。

下面将给出最简单的入门例子：
在React上下文中，CSS Modules可能像下面这样写：

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 className={styles.cell}>A0</div>
                <div className={styles.cell}>B0</div>
            </div>
        </div>;
    }
}

最后渲染出的组件的标签会是以下形式：

<div class="table__table___32osj">
    <div class="table__row___2w27N">
        <div class="table__cell___1oVw5">A0</div>
        <div class="table__cell___1oVw5">B0</div>
    </div>
</div>

若是对为何会把class名编译成table__table___32osj这样的形式存在疑惑，须要先把css modules搞清楚：【译】什么是CSS Modules ？咱们为何须要他们？

若是须要在开发环境或者生产环境结合webpack去使用，那么能够阅读react-css-modules的官方文档寻找答案。

经过此次探索咱们能够发现，前端开发在不一样的生态，或者说框架体系下，同一个技术，例如CSS Modules这种将思想，会有对应的实现方式，而咱们要掌握的，不只仅是在某种框架下配置使用的方法，而是这种开发思想。由于学习的核心在于学习知识，而不是无休止的学习工具。

4.什么是stylelint？

这是用来强制开发人员按照团队css规范写css样式的工具，相似eslint。
若想使用，只须要去启用规则便可。

节选一段stylelint做者博文中的话：

没错，你的团队可能在某个地方的某条纯文本wiki中记录了团队的代码样式规范。可是，不容忽视的是人的因素：人老是会犯错——老是在无心之间。
并且即便你很自律地执着遵循某个规范的代码风格，可是你没办法确保你的同事或是你的开源项目的贡献者可以像你同样。没有linter的帮助，你必须人工检查代码样式和错误。而机器存在的意义就是代替人来完成可以自动化实现的任务。linter就是这样的机器，有了linter，你不须要浪费时间检查代码风格，也不须要对每个代码错误都写一大堆的注释，所以它可以极大程度地减小你花费在代码审阅上的时间。你无须检查代码究竟作了些什么，也无需关心它看起来什么样。

事实与stylelint做者说的是同样的，即便团队有前端开发规范，也会不经意间写出不符合规范的代码，由于每次写css规则前都去规范check一遍不是谁都能作到的，若是团队再没有code review这一关的话，写出各类各样风格的css代码就是一件必然的事了，短时间没有什么影响，当项目变得庞大起来，增长新功能或者重写旧功能将会是一件很痛苦的事。

咱们主要去关注Rules部分：
sytlelint的规则主要有3类，我将从每一类规则中挑一个拿出来做为示例。

  • Possible errors(常见的错误写法，强烈推荐开启)
  • Limit language features(弃用一些正确的写法，中等推荐开启)
  • Stylistic issues(代码风格代码统一，普通建议开启)
  • Possible errors ------ color-no-invalid-hex: 禁止无效的十六进制颜色

彻底形式的十六进制颜色能够是6或者8（7，8位是透明度的值）个字符。一样他们的缩写能够是3或者4个字符。
options : true
下面的代码违反规则：

a { color: #00; }
a { color: #fff1az; }
a { color: #12345aa; }

下面的代码符合规则:

a { color: #000; }
a { color: #000f; }
a { color: #fff1a0; }
a { color: #123450aa; }
  • Limit language features ------ color-no-hex:禁止使用十六进制颜色

options : true
十六进制的颜色违反规则：

a { color: #000; }
a { color: #fff1aa; }
a { color: #123456aa; }

无效的十六进制色一样违规：

a { color: #foobar; }
a { color: #0000000000000000; }

下面的是符合规则的：

a { color: black; }
a { color: rgb(0, 0, 0); }
a { color: rgba(0, 0, 0, 1); }
  • Stylistic issues ------ color-hex-case: 自动将十六进制色转换为大写或者小写

Options string: "lower"|"upper"
可使用stylelint "foo/*.css" --fix实现一样的功能。
"小写"
下面的代码是违规的:

a { color: #FFF; }

下面的是符合规则的：

a { color: #000; }
a { color: #fff; }

"大写"
下面的代码是违规的:

a { color: #fff; }

下面的是符合规则的：

a { color: #000; }
a { color: #FFF; }

更多的stylelint的规则能够查阅：https://github.com/stylelint/...

5.什么是LostGrid？

Lost Grid是一个强大的PostCSS网格系统，可与任何预处理器甚至是原生CSS一块儿使用。
在这里有很是好的demo展现：http://lostgrid.org/lostgrid-...

节选2个展现进行说明。

.ColumnSection__grid div {
    lost-column: 1/1;
}
@media (min-width: 400px) {
    .ColumnSection__grid div {
        lost-column: 1/3;
    }
}
@media (min-width: 900px) {
    .ColumnSection__grid div {
        lost-column: 1/6;
    }
}

大于900px时：
image
小于900px时：
image

.NestingSection__grid {
    background: #8eb19d;
}

.NestingSection__grid div {
    background: #7ba48d;
    lost-column: 1/3;
}
.NestingSection__grid div div {
    background: #68977c;
    lost-column: 1/2;
}

image

通过查看css样式咱们发现，其实就是巧用了table布局，before/after伪元素，以及css选择器，以及border-box布局，但其实最最核心的地方仍是在于很好的使用了css自己具备的流式布局以及BFC，针对各类状况，在插件内部使用了大量的样式进行约束。
image

在css3的flex布局和grid布局逐渐被浏览器所支持的今天，我我的建议不使用LostGrid插件。

期待和你们交流，共同进步，欢迎你们加入我建立的与前端开发密切相关的技术讨论小组：

努力成为优秀前端工程师！

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程