Skip to content

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

Open
@yisibl

Description

@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 开发,我们下期详述。

预告图:

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

以上。

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions