8000 透过D2官网小觑前端工程化 · Issue #6 · yisibl/blog · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
yisibl opened this issue Oct 25, 2014 · 24 comments
Open

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

yisibl opened this issue Oct 25, 2014 · 24 comments

Comments

@yisibl
Copy link
Owner
yisibl commented Oct 25, 2014

此时窗外灯影朦胧，桂叶婆娑。彼时，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
Copy link

可以把 @民工 改成 @xufei

@yisibl
Copy link
Owner Author
yisibl commented Oct 25, 2014

@Justineo 好了。

@dangjian
Copy link

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

@julytian
Copy link

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

@Rayi
Copy link
Rayi commented Oct 25, 2014

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

@ychow
Copy link
ychow commented Oct 26, 2014

不错！期待下期。

@frankLife
Copy link

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

@xw332
Copy link
xw332 commented Oct 26, 2014

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

@xufei
Copy link
xufei commented Oct 26, 2014

这个很好啊

@elrrrrrrr
Copy link

非常期待

@yisibl
Copy link
Owner Author
yisibl commented Oct 27, 2014

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

@jornakbobo
Copy link

你们让 风驰 情何以堪

@xw332
Copy link
xw332 commented Oct 27, 2014

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

@yisibl
Copy link
Owner Author
yisibl commented Oct 27, 2014

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

@markyun
Copy link
markyun commented Oct 27, 2014

前端越来越有地位了哈。

@cssmagic
Copy link

请教 -webkit-tap-highlight-color: transparent 有啥兼容性问题呀？

@yisibl
Copy link
Owner Author
yisibl commented Oct 31, 2014

@cssmagic 抱歉，我改了一下正文，部分浏览器不支持：-webkit-tap-highlight-color: rgba(0, 0, 0, 0); ，需要更详细的测试。

http://stackoverflow.com/questions/5210481/disable-orange-outline-highlight-on-focus

@jikeytang jikeytang mentioned this issue Nov 13, 2014
Open
@jsonxu jsonxu mentioned this issue Nov 18, 2014
Open
@zhanglun
Copy link

一直以为一丝是程序媛 ……………………在这里看到照片才知道…………==！ http://css.w3ctech.com/

@yisibl
Copy link
Owner Author
yisibl commented Jan 29, 2015

@zhanglun 呜呜 ~~~~(>_<)~~~~ ，我要删帖了啊！

@sjclijie
Copy link
sjclijie commented Oct 5, 2015

@yisibl 居然跟我一个名字

@yisibl
Copy link
Owner Author
yisibl commented Oct 8, 2015

@sjclijie 幸会，幸会。

@anchengjian
Copy link

不是一直说的一丝姐么 － － 说好的姐呢

@meimei777
Copy link

@yisibl 师父，集成在一起不是问题，后面写文章，文章在哪里呢～～～

@zoffyzhang
Copy link

男的？被大漠老师的文章骗了，可恶啊！！
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
0