Open
Description
此时窗外灯影朦胧,桂叶婆娑。彼时,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 开发,我们下期详述。
预告图:
有乌云我们不怕,怕的是有雾霾。
以上。
Metadata
Metadata
Assignees
Labels
No labels