领导，我不想写CSS代码.key

领导我不想写 CSS 张鑫旭 25MIN 2018-03-31 YUEWEN USER EXPERIENCE DESIGN 01 1

YUEWEN USER EXPERIENCE DESIGN 砖家 02 CSS - 艺术家

YUEWEN USER EXPERIENCE DESIGN 03 CSS - 砖家艺术家

YUEWEN USER EXPERIENCE DESIGN 04 领导, 我不想写 CSS了!

YUEWEN USER EXPERIENCE DESIGN 05 1. 设计稿 -> 页 2. 模块组装模板编辑 3. 让少难受点

反复出现的 CSS 赋予类名 06.ell { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } <div class="cl-a ell"> </div> <div class="cl-b ell"> +1</div>

YUEWEN USER EXPERIENCE DESIGN 07

YUEWEN USER EXPERIENCE DESIGN 08 请问 : <div> 标签的语义是什么? <div class="cl-a ell"> </div>

CSS 与定义标签 09 ell { display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } <ell class="cl-a"> </ell> <ell class="cl-b"> +1</ell>

YUEWEN USER EXPERIENCE DESIGN 10

YUEWEN USER EXPERIENCE DESIGN 11 <ell> HTMLUnknownElement <x-ell> HTMLElement

CSS 与定义标签 12 db-ell { display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } <db-ell class="cl-a"> </db-ell>

YUEWEN USER EXPERIENCE DESIGN 13

YUEWEN USER EXPERIENCE DESIGN 14 仅适在页长尾区域

Sass Less 简化书写 -Sass 15 @mixin ell() { white-space: nowrap; text-overflow: ellipsis; @mixin w($width: 0) { } width: $width; overflow: hidden; }.class-a { } @include ell;.class-b { } @include w(100px); 复合单独

Sass Less 简化书写 -Sass 16 @mixin ell() { white-space: nowrap; @mixin w($width: 0) { width: $width; } text-overflow: ellipsis; } overflow: hidden;.class-a { } @include ell;.class-b { } @include w(100px); 复合单独

Less 简化书写 17.ell { white-space: nowrap; text-overflow: ellipsis;.w(@width: 0) { } width: @width; overflow: hidden; }.class-a { }.ell;.class-b { }.w(100px); 复合单独

YUEWEN USER EXPERIENCE DESIGN 18

YUEWEN USER EXPERIENCE DESIGN.w(100px) 19 shift.

Sublime Emmet 插件带缩写 20

Sublime 还持 CSS 段定义 21

22 /24

YUEWEN USER EXPERIENCE DESIGN 23

YUEWEN USER EXPERIENCE DESIGN 24 1. 可不可以不要 Tab/Enter 键? 2. 可不可以不写 px 单位 ;

造简化书写 -Qcss 25.class-a {.class-a { w100; ell; } width: 100px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } 没有括号, 没有点, 也没有回车键, 兼容标准写法

26 /24

Qcss So easy! 27 var keymap = { '<': '<', '>': '>', '&': '&' }; xxx.replace(/< & >/g, function(matchs) { }); return keymap[matchs];

28 keymap = { dn: 'display: none', db: 'display: block', m: 'margin: ', ml: 'margin-left: ', Part1: 键值映射对象 ell: 'text-overflow: ellipsis; white-space: nowrap; overflow: hidden' Part2: 键值匹配替换法 }

29 var qcss=function(b){var c={};b.replace(/\/\*([\w\w]*?)\*\//,function(g,f) {f.split(";").foreach(function(j){var i=j.split("$")[1];if(i&&i.split(/ = :/).length==2){var h=i.split(/= :/);if(h[1].trim()&&h[0].trim()) {c[h[0].trim()]=h[1].trim()}}})});b=b.replace(/;base64,/g,"%%%%% %");b=b.replace(/:\/\//g,"#@#@#");var a=b.replace(/\{([\w\w]*?)\}/ g,function(j,f){f=f.replace(/\/\*([\w\w]*?)\*\//g,"");var h=" ";var g="{\n"+h,i="\n}";if(/\{/.test(f)){i="\n"+h+"}";h=h+h;g="{"+f.split("{") [0]+"{\n"+h;f=f.split("{")[1]}return g+f.split(";").map(function(k) {k=k.trim();if(!k){return""}if(k.indexof(":")!=-1){return k}return k.replace(/ ^([a-z]+)(.*)$/g,function(n,l,m){m=(m "").split(",").map(function(o) {return(o "").split(" ").map(function(p){p=p.trim();if(!p){return""} if(l=="l"){l="left: "}else{if(l=="t"){l="top: "}else{if(l=="r"){l="right: "} else{if(l=="b"){l="bottom: "}}}}if(!isnan(p)){if(l=="lh"&&p<5){return p} else{if(/^(?:zx op z fw)$/.test(l)==false&&p!="0"&&/ ^calc/.test(o.trim())==false){p=p+"px"}}}else{if(l=="tsl"){p=(e[p] p).replace(":","").trim()}else{if(l!="a"){p=c[p] d[p] p}}}return p}).join(" ")}).join(", ");if(/:/.test(l)==false){l=e[l] l+": "}m=m.trim();if(!m) {l=l.split(";").map(function(o){return o.trim().replace(/:\s+/,": ")}).join("; \n"+h)}return l+m})}).join(";\n"+h).trim()+i}).replace(/\w\{/g,function(f) {return f.replace("{"," {")}).replace(/\}(\. # \: \[ \w)/g,function(f){return f.replace("}","}\n")}).replace(/^\s{8}/gm," ").replace(/^\s{4}\}/ gm,"}");a=a.replace(/%%%%%%/g,";base64,").replace(/#@#@#/g,"://");return a}; Part1: 键值映射对象 Part2: 键值匹配替换法所有代码 ( 含美化定义变量 ) 就这么多 ~

31 DEMO 不扫

YUEWEN USER EXPERIENCE DESIGN 32

QCSS 压缩对 33 传统压缩 : taobao-min.css taobao-min.qcss 17 KB 42.65% 9.75 KB 加类名压缩 : taobao-min-cl.css taobao-min-cl.qcss 14.5 KB 50.13% 7.23 KB.product_list.t_mall {} ->.AE.AF {}

Service Worker 与 qcss 直连 34 self.addeventlistener('fetch', function(event) { event.respondwith(async function () { if (/\.qcss/.test(event.request.url)) { let res = await fetch(event.request); let text = await res.text(); return new Response(qcss(text), { qcss 编译成 css headers: { 'content-type': 'text/css; charset=utf-8' } }); } }()); });

35 test.qcss https://zhangxinxu.github.io/https-demo/online-compile/

YUEWEN USER EXPERIENCE DESIGN 36 相过去,CSS 资源请求体积可以 30%~50%!

YUEWEN USER EXPERIENCE DESIGN 37

逆向输出 CSS 压缩具 38 CSS -> Qcss.class-a { width: 100px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;.class- a{w100;nowrap;text- overflow:ellipsis;ovh} }

CSS 压缩具 -css2qcss 39 extra.css extra.qcss 110 KB 76.2 KB 30.97% < 20ms http://gulp.qcss.tech/css2qcss.js

YUEWEN USER EXPERIENCE DESIGN 40

YUEWEN USER EXPERIENCE DESIGN 41 The end~

42 类名独定义标签长尾, 局部项推荐 Emmet 和 snippet 速写不受任何限制 Less 简化受团队技术选型限制 Qcss 简写项, 短命项其它场合不推荐

类名独长尾, 局部项推荐 43 定义标签 Emmet 和不受任何限制 snippet 速写 Less 简化受团队技术选型限制 Qcss 简写项, 短命项其它场合不推荐 Qcss 客户端盒低成本适范围编译加压缩

YUEWEN USER EXPERIENCE DESIGN 44 Thanks Q&A

YUEWEN USER EXPERIENCE DESIGN 45 Thanks Q&A 签售敬请期待