原文:A look into writing future CSS with PostCSS and cssnext

译者:nzbin

像 Twitter,Google,BBC 使用的一样,我打算对 CSS 后处理器 PostCSS 的世界一探究竟。

PostCSS是什么?

PostCSS 是使用 javascript 插件转换 CSS 的后处理器。PostCSS 本身不会对你的 CSS 做任何事情,你需要安装一些 plugins 才能开始工作。这不仅使其模块化,同时功能也会更强。

它的工作原理就是解析 CSS 并将其转换成一个 CSS 的节点树,这可以通过 javascript 来控制(也就是插件发挥作用)。然后返回修改后的树并保存。它与 Sass(一种预处理器)的工作原理不同,你基本上是用一种不同的语言来编译 CSS 。

预处理和后处理到底是什么?

为了用简单的方式解释预处理和后处理的不同,我将以单位转换为例。当书写 Sass 时,我们可以用函数将 px 转换成 rem

  1. /* input */
  2. .selector { margin-bottom: rem(20px); }
  3.  
  4. /* output, assuming base font size is 1rem */
  5. .selector { margin-bottom: 1.25rem; }

这种方式节省了我们手工计算的的时间。不过通过 PostCSS,我们能够做的更好。因为是后处理的缘故,我们不需要任何函数来编译CSS。我们可以直接书写 px ,它可以自动地转换成 rem  。

  1. /* input */
  2. .selector { margin-bottom: 20px; }
  3.  
  4. /* output, assuming base font size is 1rem */
  5. .selector { margin-bottom: 1.25rem; }

PostCSS 会在每一个 px 值出现并运行计算之前处理声明,将其转换成 rem 的值。注意:因为 PostCSS 模块化的本质,你需要使用 postcss-pxtorem 才能完成转换。

使用 cssnext 书写未来的 CSS

我们可以在样式表中利用 cssnext 额外增加的一些 css 规范。cssnext 是一个 PostCSS 的包,其中包含了大量的特性组件,比如 custom propertiescustom selectors

  1. /* custom properties */
  2. :root {
  3. --heading-color: #ff0000;
  4. }
  5.  
  6. /* custom selectors */
  7. @custom-selector :--headings h1, h2, h3, h4, h5, h6;
  8.  
  9. /* usage */
  10. :--headings {
  11. color: var(--heading-color);
  12. }

通过 cssnext,上述代码会被处理成以下内容

  1. h1,
  2. h2,
  3. h3,
  4. h4,
  5. h5,
  6. h6 {
  7. color: #ff0000;
  8. }

这真的很简洁,其中还有很多令人兴奋的特性。因为我们书写的是未来规范的 css,所以 PostCSS 的生成步骤不需要浏览器去执行。你可以 点击这里 查看所有的特性。

接下来,我将用 PostCSS 的自定义函数扩展 CSS 的功能。

更上一层楼:用自定义函数扩展 CSS 的功能

使用 cssnext,我们可以通过 javascript 创建自定义函数来操作被解析的 CSS。在 Sass 中,我们经常使用生成行距的函数(根据基本的 line-height 计算),它有助于创建简单且可维护的垂直韵律。

  1. $line-height: 32px;
  2.  
  3. /* vertical rhythm function */
  4. @function vr($amount) {
  5. @return $line-height * $amount;
  6. }
  7.  
  8. /* input */
  9. .selector { margin-bottom: vr(2) }
  10.  
  11. /* output */
  12. .selector { margin-bottom: 64px; }

如果用PostCSS做的话,我们可以自定义CSS组件而不是函数。

  1. /* input */
  2. .selector { margin-bottom: 2vr }
  3.  
  4. /* output */
  5. .selector { margin-bottom: 64px; }

我更喜欢这种方法,因为他看起来更自然,如同写原生 CSS 一样。JavaScript 的代码如下:

  1. var vr = function (css) {
  2. var lineHeight = 32;
  3.  
  4. css.eachDecl(function (decl) {
  5. if (decl.value.match(/vr/)) {
  6. decl.value = lineHeight * parseFloat(decl.value) + 'px';
  7. }
  8. });
  9. };

如果你对 JavaScript 不熟悉的话,看起来工作量好像增加了,事实上也没有多少东西。以下是带注释的 JavaScript 代码:

  1. // Define the function to include in the PosCSS transforms list, and pass in the CSS node tree.
  2. var vr = function (css) {
  3.  
  4. // Set the line-height.
  5. var lineHeight = 32;
  6.  
  7. // Loop through each CSS declaration using PostCSS's `eachDecl()` and pass in the declaration (`decl`) string.
  8. css.eachDecl(function (decl) {
  9.  
  10. // Match if the declaration value has the 'vr' unit.
  11. if (decl.value.match(/vr/)) {
  12.  
  13. // Replace the declaration value with the calculated value.
  14. // Use parseFloat() to remove the `vr` unit from the string and return a number.
  15. decl.value = lineHeight * parseFloat(decl.value) + 'px';
  16. }
  17. });
  18. };

感兴趣的朋友可以看看我编写的这个高级插件postcss-vertical-rhythm,它无需引入额外的插件只需要加入到 PostCSS transforms 中。

这只是你可以用 PostCSS 实现的一个小例子。希望你能够看到它的强大之处以及和预处理器的不同。我建议你阅读文档以及插件列表,了解哪些东西可以在你的项目中使用。

速度

PostCSS 声称比预处理器快 3-30 倍。出于好奇,我在 10000 个选择器的 5 个属性上使用上述 Sass 函数和 PostCSS 函数,也就是处理 50000 次,以下是对比结果。

Libsass 3.2

PostCSS

令我吃惊的是,PostCSS 在处理这个函数时几乎快了 13 秒。难以置信的快了 34 倍。很显然真实生活中不会出现这样的脚本,但是这个有趣的测试能够看出它的执行效率,我们希望有一个能降低构建速度的新工具。值得一提的是,libsass 将在 3.3 版本中提升运行速度,所以我很期待新版本的运行速度到底提升了多少。

思考

PostCSS 看起来很有前途。我喜欢它的模块化,我可以编写我需要的插件,并且根据需要自定义功能。尝试未来的 CSS 语法是一件令人兴奋的事。

当然,我并不是说我们应该放弃 Sass。Sass 是一个很好的工具,我建议任何人应该先从预处理器开始学习。如果你喜欢冒险的话,我肯定推荐你试一试 PostCSS。

我很乐意听到任何人在实际项目中使用 PostCSS 的想法和经验。请与我保持联系!

展望未来:使用 PostCSS 和 cssnext 书写 CSS的更多相关文章

  1. PostCSS一种更优雅、更简单的书写CSS方式

    Sass团队创建了Compass大大提升CSSer的工作效率,你无需考虑各种浏览器前缀兼,只需要按官方文档的书写方式去写,会得到加上浏览器前缀的代码,如下: .row { @include displ ...

  2. PostCSS以及cssnext语法

    什么是postcss postcss 一种对css编译的工具,类似babel对js的处理,常见的功能如: 1 . 使用下一代css语法 2 . 自动补全浏览器前缀 3 . 自动把px代为转换成 rem ...

  3. create-react-app 构建的项目使用 css module 方式来书写 css

    先 yarn eject 释放出来配置文件具体参见我之前写过相关的文章(这里不再重复), 找到 config 文件夹下的文件如下图所示: 找到如图所示的配置: 书写 css 的文件名例如(App.mo ...

  4. CSS预编译与PostCSS以及Webpack构建CSS综合方案

    CSS全称Cascading Style Sheets(层叠样式表),用来为HTML添加样式,本质上是一种标记类语言.CSS前期发展非常迅速,1994年哈肯·维姆·莱首次提出CSS,1996年12月W ...

  5. [翻译]用PostCSS改善你的CSS代码质量

    “代码质量”这个术语对于程序员来说并不陌生.毕竟,每个开发人员都知道,代码只是能工作是不够的.它还应该具备其他要素:它应该是可读的,良好的格式和一致性.它也应该符合一些标准的量化指标.不过这些在写CS ...

  6. 更愉快的书写CSS

    我在写CSS的时候经常会碰到些麻烦事儿: 1)看上去蛮简单的排版却写了很久 2)代码写的越来越散,总是这里补一句,那里补一句,没有条理性 3)margin.padding.font-size等属性在不 ...

  7. 深入浅出ES6(十七):展望未来

    作者 Jason Orendorff  github主页  https://github.com/jorendorff 出于对文章长度的考虑,我们还保留了一些尚未提及的新特性,在最后的这篇文章中我会集 ...

  8. 书写CSS需要注意的地方

    1.注意对图片设置宽高和转化为块2.文字超出的设置3.空白部分用空div来设置4.做之前考虑重用,重用部分命名不要和内容相关 尽量公共(comWidth area small big img list ...

  9. 书写Css文件要点

    1. 自定义样式名 实例1:<style type="text/css"> input.ng-invalid{ // .号一定要在对应的元素名后面, 没有空格 colo ...

随机推荐

  1. 在离线环境中发布.NET Core至Windows Server 2008

    在离线环境中发布.NET Core至Windows Server 2008 0x00 写在开始 之前一篇博客中写了在离线环境中使用.NET Core,之后一边学习一边写了一些页面作为测试,现在打算发布 ...

  2. SSH实战 · 用spring框架下的hibernatetemplate的get方法出现的问题

    用get方法查询:      return this.getHibernateTemplate().get(Product.class, pid); 出现错误为:id to load is requi ...

  3. scanf()中清除输入缓冲区的几种方法归纳

    应用场景:我们使用多个scanf()的时候,如果输入缓冲区还有数据的话,那么scanf()就不会询问用户输入,而是直接就将输入缓冲区的内容拿出来用了,这就导致了前面的错误影响到后面的内容,为了隔离这种 ...

  4. MVC常遇见的几个场景代码分享

    本次主要分享几个场景的处理代码,有更好处理方式多多交流,相互促进进步:代码由来主要是这几天使用前端Ace框架做后台管理系统,这Ace是H5框架里面的控件效果挺多的,做兼容也很好,有点遗憾是控件效果基本 ...

  5. 获取微软原版“Windows 10 推送器(GWX)” 卸载工具

    背景: 随着Windows 10 免费更新的结束,针对之前提供推送通知的工具(以下简称GWX)来说使命已经结束,假设您还未将Windows 8.1 和Windows 7 更新到Windows 10 的 ...

  6. 消息队列性能对比——ActiveMQ、RabbitMQ与ZeroMQ(译文)

    Dissecting Message Queues 概述: 我花了一些时间解剖各种库执行分布式消息.在这个分析中,我看了几个不同的方面,包括API特性,易于部署和维护,以及性能质量..消息队列已经被分 ...

  7. TFS 测试用例步骤数据统计

    TFS系统集成了一套BI系统,基于SQL Server的Analysis Service进行实现的.通过这几年的深入使用,能够感触到这个数据数据仓库模型是多么的优秀,和微软官方提供的数据仓库示例Adv ...

  8. Kotlin中变量不同于Java: var 对val(KAD 02)

    原文标题:Variables in Kotlin, differences with Java. var vs val (KAD 02) 作者:Antonio Leiva 时间:Nov 28, 201 ...

  9. docker4dotnet #1 – 前世今生 & 世界你好

    作为一名.NET Developer,这几年看着docker的流行实在是有些眼馋.可惜的是,Docker是基于Linux环境的,眼瞧着那些 java, python, node.js, go 甚至连p ...

  10. mysql删除重复记录语句的方法

    例如: id name value 1 a pp 2 a pp 3 b iii 4 b pp 5 b pp 6 c pp 7 c pp 8 c iii id是主键 要求得到这样的结果 id name ...