鸦杀's Blog

css揭秘读书笔记

2016-06-19

昨天看完第一章引言,它讲到了标准的制定过程:(1)编辑草案(ED),(2)首个公开工作草案(FPWD),(3)工作草案(WD),(4)候选推荐规范(CR),(5)提名推荐规范(PR),(6)正式推荐规范(REC),浏览器的支持一般是从工作草案开始的,而到了候选推荐规范这一阶段,就相对稳定了。

关于浏览器前缀,浏览器对于一些私有的、非标准属性的支持,通常会加浏览器前缀。这会造成私有前缀的滥用,因为有些特性只有部分浏览器需要加前缀,而很多人没查过支持情况,先一股脑全加上了。后期的维护也是一个很大的成本,当一些非常老旧版本的浏览器被淘汰的时候。书中作者提到了她的插件prefixfree,不过需要在页面中引入该插件。而autoprefixer是目前比较流行的方案,它使用can i use中的数据库来判断需要加哪些浏览器前缀。这是种预处理的方式。

话说,css开始流行后处理的方案了,比如我听过postCss,cssNext,有空再去看看。

css编码技巧,DRY和WET。如何保持代码的DRY原则和可维护性一直是我们需要关注的话题,如文中所言,我们需要做的,就是尽量减少改动时需要编辑的地方。对我而言,css一直都没有好好去遵循这一规范。文中举的几个例子,深受启发。

1)当某些值相互依赖时,应该把它们的相互关系用代码表达出来,而不是写死。

1
2
font-size:20px;  
line-height:30px;

可以改成

1
2
font-size:20px;  
line-height:1.5;

font-size也可以改成百分比或者em,因为它们都是相对于父级的font-size,不过我觉得这个可以根据具体场景判断是否需要这么改。如果UI就是希望父级的字号和子元素不相互影响呢?

关于设置不同色调的按钮,文中的方案是background设置一个半透明的背景(liner-gradient),然后不同的按钮设置不同的background-color。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
button{  
padding: .3em .8em;
border:1px solid rgba(0,0,0,.1);
background:#58a linear-gradient(hsla(0,0%,100%,.2),transparent);
border-radius:.2em;
box-shadow:0 .05em .25em rgba(0,0,0,.5);
color:white;
text-shadow:0 -.05em .05em rgba(0,0,0,.5);
font-size:125%;
line-height:1.5;
}

button.cancel{
background-color:#c00;
}
button.ok{
background-color#6b0;
}

2)代码易维护性与代码量少的取舍

其实我觉得还有一点就是尽量减少css重复渲染的原则,很多时候它也与这两个是互斥的。

就拿文中的例子来举例:border-width:10px 10px 10px 0border-width:10px;border-left-width:0。我的想法就是遵循公司规范啦。

3)善用继承

其实一直都知道inherit这一属性值,曾经看过一篇文章说它有兼容性问题,然后就没有去使用了。或许,我不应该去畏惧这种bug,毕竟已经连在哪个浏览器有bug都不记得了,或许是IE678呢,233。

inherit取的总是父元素的计算值,如果是伪元素就是取其宿主元素的计算值,使用它可以省去很多重复的代码,可维护性更好。
比如文中的例子,气泡框的小箭头。它继承了宿主元素的border与background。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.callout{  
position:relative;
}
.callout::before{
content:'';
position:absolute;
top:-.4em;
left:1em;
padding:.35em;
background:inherit;
border:inherit;
border-right:0;
border-bottom:0;
transform:rotate(45deg);
}

关于媒体查询,它应该用在较大或者较小的视口下完全改变网站设计形态,比如把侧栏改成水平布局。而不是用来修补网站在一些分辨率上出现的问题,媒体查询不能以一种连续的方式来修复问题,它的工作原理是基于某几个特定的阶梯(断点)。而它的断点不应该由具体的设备来决定,而是应该根据设计自身来决定。而且,每个媒体查询都会增加成本,添加太多的话,css代码会很重的。
所以,我们使用的思路就是尽量实现弹性可伸缩的布局,并在媒体查询的各个断点区间内指定相应的尺寸。

2016-06-09

扫描二维码,分享此文章