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.

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

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

Open
yisibl opened this Issue Oct 25, 2014 · 24 comments

Comments

Projects
None yet
@yisibl
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

This comment has been minimized.

Show comment
Hide comment
@Justineo

Justineo Oct 25, 2014

可以把 @民工 改成 @xufei

Justineo commented Oct 25, 2014

可以把 @民工 改成 @xufei

@yisibl

This comment has been minimized.

Show comment
Hide comment
@yisibl

yisibl Oct 25, 2014

Owner

@Justineo 好了。

Owner

yisibl commented Oct 25, 2014

@Justineo 好了。

@dangjian

This comment has been minimized.

Show comment
Hide comment
@dangjian

dangjian Oct 25, 2014

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

dangjian commented Oct 25, 2014

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

@julytian

This comment has been minimized.

Show comment
Hide comment
@julytian

julytian Oct 25, 2014

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

julytian commented Oct 25, 2014

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

@Rayi

This comment has been minimized.

Show comment
Hide comment
@Rayi

Rayi Oct 25, 2014

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

Rayi commented Oct 25, 2014

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

@ychow

This comment has been minimized.

Show comment
Hide comment
@ychow

ychow Oct 26, 2014

不错!期待下期。

ychow commented Oct 26, 2014

不错!期待下期。

@frankLife

This comment has been minimized.

Show comment
Hide comment
@frankLife

frankLife Oct 26, 2014

css工具化、工程化,期待!

frankLife commented Oct 26, 2014

css工具化、工程化,期待!

@xw332

This comment has been minimized.

Show comment
Hide comment
@xw332

xw332 Oct 26, 2014

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

xw332 commented Oct 26, 2014

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

@xufei

This comment has been minimized.

Show comment
Hide comment
@xufei

xufei Oct 26, 2014

这个很好啊

xufei commented Oct 26, 2014

这个很好啊

@elrrrrrrr

This comment has been minimized.

Show comment
Hide comment
@elrrrrrrr

elrrrrrrr Oct 26, 2014

非常期待

elrrrrrrr commented Oct 26, 2014

非常期待

@yisibl

This comment has been minimized.

Show comment
Hide comment
@yisibl

yisibl Oct 27, 2014

Owner

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

Owner

yisibl commented Oct 27, 2014

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

@jornakbobo

This comment has been minimized.

Show comment
Hide comment
@jornakbobo

jornakbobo Oct 27, 2014

你们让 风驰 情何以堪

jornakbobo commented Oct 27, 2014

你们让 风驰 情何以堪

@xw332

This comment has been minimized.

Show comment
Hide comment
@xw332

xw332 Oct 27, 2014

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

xw332 commented Oct 27, 2014

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

@yisibl

This comment has been minimized.

Show comment
Hide comment
@yisibl

yisibl Oct 27, 2014

Owner

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

Owner

yisibl commented Oct 27, 2014

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

@markyun

This comment has been minimized.

Show comment
Hide comment
@markyun

markyun Oct 27, 2014

前端越来越有地位了哈。

markyun commented Oct 27, 2014

前端越来越有地位了哈。

@cssmagic

This comment has been minimized.

Show comment
Hide comment
@cssmagic

cssmagic Oct 28, 2014

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

cssmagic commented Oct 28, 2014

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

@yisibl

This comment has been minimized.

Show comment
Hide comment
@yisibl

yisibl Oct 31, 2014

Owner

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

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

Owner

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

@zhanglun

This comment has been minimized.

Show comment
Hide comment
@zhanglun

zhanglun Jan 24, 2015

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

zhanglun commented Jan 24, 2015

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

@yisibl

This comment has been minimized.

Show comment
Hide comment
@yisibl

yisibl Jan 29, 2015

Owner

@zhanglun 呜呜 (>_<) ,我要删帖了啊!

Owner

yisibl commented Jan 29, 2015

@zhanglun 呜呜 (>_<) ,我要删帖了啊!

@sjclijie

This comment has been minimized.

Show comment
Hide comment
@sjclijie

sjclijie Oct 5, 2015

@yisibl 居然跟我一个名字

sjclijie commented Oct 5, 2015

@yisibl 居然跟我一个名字

@yisibl

This comment has been minimized.

Show comment
Hide comment
@yisibl

yisibl Oct 8, 2015

Owner

@sjclijie 幸会,幸会。

Owner

yisibl commented Oct 8, 2015

@sjclijie 幸会,幸会。

@anchengjian

This comment has been minimized.

Show comment
Hide comment
@anchengjian

anchengjian Mar 24, 2016

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

anchengjian commented Mar 24, 2016

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

@meimei777

This comment has been minimized.

Show comment
Hide comment
@meimei777

meimei777 Jul 11, 2016

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

meimei777 commented Jul 11, 2016

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

@zoffyzhang

This comment has been minimized.

Show comment
Hide comment
@zoffyzhang

zoffyzhang Oct 19, 2017

男的?被大漠老师的文章骗了,可恶啊!!
image

zoffyzhang commented Oct 19, 2017

男的?被大漠老师的文章骗了,可恶啊!!
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment