blog
blog copied to clipboard
yisibl
透过D2官网小觑前端工程化
此时窗外灯影朦胧，桂叶婆娑。彼时，D2 夜场美酒畅谈，佳人如梦，在杜欢滚满床单后圆满落幕。
今年两个火热的话题，前后端分离与前端工程化。
静思回味，又去翻看了一下 D2官网，习惯性的审查元素，看了下 CSS 文件。
前进与问题并存：
- iconfont（字体图标）逐步被产品接受并广为普及，从传统的刀耕火种（原始字体制作软件生产图标字体）到工程化自动化的实现，我厂 iconfont.cn 平台功不可没（此处有广告嫌疑）。接下来 woff2 的普及还任重道远，SVG 图标漫漫路长。
- HTML5 标签逐步普及，但还远远不够，比如 依然用
.main没有使用<main> - 细节动画巧妙运用，但代码工程化处理上略显遗憾，特别是在前缀的处理上，还存在标准属性写在前缀属性前面的问题，线性渐变等不同时期 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;
}
-
存在一些典型有问题的代码：
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 开发，我们下期详述。
预告图：
有乌云我们不怕，怕的是有雾霾。
以上。
@xw332 CSS属性排序功能直接用 CssComb 吧，同样的压缩，合并这些都已经有很成熟的工具了。这个工具的初衷是弥补一些「空白」，完善整个CSS工作流。
@yisibl 其实我从使用者的角度是想要个集成在一起的开发工具包，还能支持各自的更新升级；更简单的好像是搞一篇文章，把常用推荐的小工具一起列出来，给下链接就好了；我理解的开发流程工程化，应该就是把现有的工具孤岛统统连起来吧
@cssmagic 抱歉，我改了一下正文，部分浏览器不支持：-webkit-tap-highlight-color: rgba(0, 0, 0, 0); ，需要更详细的测试。
http://stackoverflow.com/questions/5210481/disable-orange-outline-highlight-on-focus
