狠狠撸

写更好的颁厂厂
写在重构规范4.0之际
概览篇
smallniding 2014.08

代码精简
易读性佳
解析正确
易于维护
性能优异

爽
个人用户
公司
KPI、个?人效率
个?人影响?力
?页?面快
?用起来爽
团队效率
公司声誉
公司成本

发起请求
加载?文件
解析渲染
请求数量
?文件?大?小
代码性能

CSS引入方式？
外链?方式
内联?方式

多?页专题、官??网单?页专题
使?用外链?方式使?用内联?方式

文件大小/代码量/效率
selectors{property:value;}
选择器属性属性值

选择器深度=3
提升性能
降低耦合度
降低优先级?风险
法则1
举个栗?子：
…….em class=“count”/em…….
body header div nav ul li div p span span em {color: red}
.count {color: blue}
HTML
CSS

选择器的优先级梯度
A,B,C,D
style
:after
class
[]
:first-letter
element
ID

少?用ID选择器预留给开发GG
降级耦合度
降低优先级?风险
#sidebar{XXX}
#sidebar span{XXX}
.sidebar{XXX}
.sidebar span{XXX}
法则2

慎?用通配符提升性能
法则3 降级未知?风险
* = all
HTML div class=“item”spanhello/span/div
.item *{position:absolute}
CSS

善?用组合选择器精简代码
法则4 维护成本
.selector1{background:url(/slideshow/css-40145117/40145117/img/spr.png) no-repeat 0 0;}
.selector2{background:url(/slideshow/css-40145117/40145117/img/spr.png) no-repeat 0 -20px;}
.selector3{background:url(/slideshow/css-40145117/40145117/img/spr.png) no-repeat 0 -40px;}
.selector1,.selector2,.selector3{background:url(/slideshow/css-40145117/40145117/img/spr.png) no-repeat;}
.selector1{background-position:0 0;}
.selector2{background-position:0 -20px;}
.selector3{background-position:0 -40px;}

遇0值单位不要写精简代码
法则5 维护成本
http://www.w3.org/TR/CSS2/syndata.html#length-units
body{margin:0px;padding:0px;}
selector{font-size:0px;}
body{margin:0;padding:0;}
selector{font-size:0;}

法则6 留空样式要去除精简代码
.selector{ }

善?用属性值缩写精简代码
法则7 提升性能
.item{
color:#dddddd;
background-color:#336699
padding:0 0 0 20px;
margin:20px;
border:1px solid #333;
font:12px simsun;
background-image:url(/slideshow/css-40145117/40145117/img.png);
background-repeat:no-repeat;
background-position:0 0;
list-style:square inside;
}
.item{
color:#ddd;
background-color:#369
padding-left:20px;
margin:20px;
border:1px solid #333;
font:12px simsun;
background:#369 url(/slideshow/css-40145117/40145117/img.png)
no-repeat 0 0;
list-style:square inside;
}

慎?用！important 后期维护成本
法则8 降低优先级?风险
selector{margin:0 !important}
selector{margin:0}

慎?用AlphaImageLoader 精简代码
background:url(/slideshow/css-40145117/40145117/img.png);
_background:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(s
rc='/slideshow/css-40145117/40145117/img.png', sizingMethod='crop');
background:url(/slideshow/css-40145117/40145117/img.png);

法则10 禁?用expression 提升性能
background-color: expression((new Date()).getHours()
%2?#FFFFFF: #000000 );

属性误区需了解精简代码
selector{float:left;display:block;}
selector{position:absolute;display:block;}
selector{display:inline;width:100px;}

法则12 CSS HACK勿滥?用维护成本
selector{_width:30px; width:32px;}

慎?用通?用原?子类后期维护成本
法则13 降低耦合度
HTML div class=“mod fl w200”/div
.fl{ float:left}
.w200{ width:200px;}
CSS
HTML div class=“mod”/div
.mod{ float:left;width:200px;}
CSS
周期短
维护少

为代码增加注释后期维护成本
法则14 可读性
赠人注释
手有余香

40K 30K-35K
每天节省流量：10,000B*1,000,000 =1G

?工具推荐
? CSSGAGA
? GruntJS
? YUI compressor
? CSS lint
? https://unused-css.com/

Before Coding CSS？
Coding CSS…
After Coding CSS？

狠狠撸

写更好的颁厂厂

More Related Content

写更好的颁厂厂