透过D2官网小觑前端工程化

[yisibl]

此时窗外灯影朦胧，桂叶婆娑。彼时，D2 夜场美酒畅谈，佳人如梦，在杜欢滚满床单后圆满落幕。

今年两个火热的话题，前后端分离与前端工程化。

静思回味，又去翻看了一下 D2官网，习惯性的审查元素，看了下 CSS 文件。

前进与问题并存：

1. iconfont（字体图标）逐步被产品接受并广为普及，从传统的刀耕火种（原始字体制作软件生产图标字体）到工程化自动化的实现，我厂 iconfont.cn 平台功不可没（此处有广告嫌疑）。接下来 woff2 的普及还任重道远，SVG 图标漫漫路长。
2. HTML5 标签逐步普及，但还远远不够，比如 依然用 .main 没有使用 <main>
3. 细节动画巧妙运用，但代码工程化处理上略显遗憾，特别是在前缀的处理上，还存在标准属性写在前缀属性前面的问题，线性渐变等不同时期 CSS 语法处理上捉襟见肘。粗鄙的猜测是自己写了一些简单的预处理器 mixin 来处理。

.foo {
  transform-origin: -25px 0; /* 应该放到最后 */
  -o-transform-origin: -25px 0;
  -ms-transform-origin: -25px 0;
  -moz-transform-origin: -25px 0;
  -webkit-transform-origin: -25px 0;
}

1. 存在一些典型有问题的代码：

   4.1 兼容性细节

   .foo {
    -webkit-tap-highlight-color: transparent; /* 部分浏览器只支持这个 */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
   } 

   4.2 absolute 与 display 并存，display 属性自动计算为 block。

   .foo {
     position: absolute;
     display: inline-blcok; /* 多余属性 */
   }

然而上面的问题，传统 CSS 预处理来做似乎无能为力，依靠规范文档来提前预防效果亦是差强人意，特别是多人合作的项目，更是参差不齐。

抛开大局，审视细节，如何用工程化的角度来让这些小而烦的问题变的小而易呢？

正如 @xufei (民工) 所说：

『很庆幸我们生活在这个时代』，让我们有机会思考并解决这些问题，如何更好的规划 CSS 工作流，实现自动化工程化 CSS 开发，我们下期详述。

预告图：

有乌云我们不怕，怕的是有雾霾。

以上。

[Justineo]

可以把 @民工 改成 @xufei

[yisibl]

@Justineo 好了。

[dangjian]

规范性的编码，靠自觉是无法保证的，可以引入辅助工具。比如写CSS就要排序和添加浏览器前缀的工具。

[julytian]

你好，想问下左边输入右边自动化输出是怎样做到的?

[Rayi]

@Justineo 没能看到10一起搞基实乃遗憾啊

[ychow]

不错！期待下期。

[frankLife]

css工具化、工程化，期待！

[xw332]

工具很期待，建议可以增加类似CssComb梳子的排序功能，还可以考虑加上压缩、合并之类的功能，也可以和其他开源项目打包推出后处理工具集

[xufei]

这个很好啊

[elrrrrrrr]

非常期待

[yisibl]

@xw332 CSS属性排序功能直接用 CssComb 吧，同样的压缩，合并这些都已经有很成熟的工具了。这个工具的初衷是弥补一些「空白」，完善整个CSS工作流。

[jornakbobo]

你们让 风驰 情何以堪

[xw332]

@yisibl 其实我从使用者的角度是想要个集成在一起的开发工具包，还能支持各自的更新升级；更简单的好像是搞一篇文章，把常用推荐的小工具一起列出来，给下链接就好了；我理解的开发流程工程化，应该就是把现有的工具孤岛统统连起来吧

[yisibl]

@xw332 集成在一起不是问题，后面我写文章介绍一下。

[markyun]

前端越来越有地位了哈。