css编码技巧【css揭秘读书笔记】

最近在看《css揭秘》，于是写了文章来作笔记，除此以外还会补充一些自己遇到的笔试题。希望大家都有所收获。

css编码技巧

尽量减少代码重复

在实践中，代码可维护性的最大要素是尽量减少改动时要编辑的地方。
举例说明

padding:6px 12px;
border: 1px solid #446d88;
background: #58a linear-gradient(#77a0bb, #58a);
border-radius: 4px;
box-shadow: 0 1px 5px gray;
color: white;
text-shadow:0 -1px 1px #335166;
font-size:20px;
line-height:30px;

以上的代码有什么问题呢？

1. 如果需要改变字号，那么同时需要调整行高。
   【当某些值相互依赖时，应该把它们的相互关系用代码表达出来】

2. 如果将父级的字号加大，则不得不修改每一处使用绝对值作为字体尺寸的样式。

3. 需要确定哪些效果是应该跟着变大变小，哪些效果是保持不变的

4. 产生主色调的亮色和暗色变体，其实可以使用将半透明的黑色或白色叠加在主色调上。
   background: #58a linear-gradient(hsla(0,0%,100%,.2),transparent);
   //作者建议使用HSLA而不是RGBA来产生半透明的白色。因为它的字符长度更短，重复率更低。

那么经过修改后的代码如下：

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

关于使用rem还是em还是百分比，需要根据具体情况来决定。

【插播笔试题】

Q：line-height:1.5 与line-height:150%的差别？

• line-height:1.5 是根据自身元素的font-size进行计算。

• line-height:150% 是根据父元素继承而来的font-size进行计算。

Q：rem,em,px的差别

• rem css3新增单位。rem为元素设定字体大小时，相对的只是HTML根元素。【IE8以下不支持】

• em 相对于父元素的字体大小。

• px 像素px是相对于显示器屏幕分辨率而言的
  px，em，rem的转换工具

继续回到css编码技巧。

1. 有时候，代码易维护和代码量少不可兼得。

   例如，为元素添加一个10px宽的边框，但左侧不加边框
   border-width: 10px 10px 10px 0;
   但若以后需要改动边框的宽度，需要同时改3个地方。那么以下这种方式可能更好。
   border-width: 10px;
   border-left: 0;

2. currentColor【IE9+支持】

   例如，我们想让所有的水平分割线元素自动与文本颜色保持一致，只需要这样写。
   hr { background: currentColor;}
   border和box-shadow默认的颜色就是当前的文字颜色，也就是类似currentColor。currentColor本身就是很多颜色属性的初始值，例如border-color、outline-color、text-shadow和box-shadow的颜色。【iOS Safari浏览器下(iOS8)下，currentColor有一些bug，例如伪元素hover时候，background:currentColor的背景色不会跟着变化。关于currentColor其他信息可查看张鑫旭博客，currentColor-CSS3超高校级好用CSS关键字。

3. 继承 inherit

   例如，在创建提示框时，可能希望小箭头能自动继承背景和边框的样式。就可以这样做。
   .callout:before {

      //其他代码
      background: inherit;
      border: inherit;

   }

相信你的眼睛，而不是数字

视觉上的错觉在任何形式的视觉设计中都普遍存在。如果希望四边的内边距看起来基本一致，需要减少顶部和底部的内边距。

关于响应式网页设计

作者提出了一些建议，可能可以避免不必要的媒体查询

1. 使用百分比长度来取代固定长度，如果做不到，尝试使用与视口相关的单位(vw,vh,vmin,vmax)，它们的值解析为视口宽度与高度的百分比。

2. 当需要在较大分辨率得到固定宽度时，使用max-width

3. 不要忘记为替换元素（例如img,object,video,iframe等）设置一个max-width，值为100%

4. 假设背景图片需要完整的铺满一个容器，可以使用background-size:cover。【在移动网页中通过css把一张大图缩小显示往往不太明智】

5. 当图片或其他元素以行列式进行布局，让视口的宽度来决定列的数量。可以使用弹性盒布局(Flexbox)或者display:inline-box加上文本折行行为。

6. 在使用多列文本时，指定column-width而不是column-count，这样可以在较小的屏幕上自动显示为单列布局。
   【尽量实现弹性可伸缩的布局，并在媒体查询的各个断点区间内制定相应尺寸】

合理使用缩写

如果要明确地去覆盖某个具体展开式属性并保留其他相关样式，则需要用展开式属性。

background: url(tr.png) no-repeat top right / 2em 2em,
            url(br.png) no-repeat bottom right / 2em 2em,
            url(bl.png) no-repeat bottom left / 2em 2em;
            
//如果只为某个属性提供一个值，那么它会扩散并应用到列表中的每一项。
//在简写时，使用一个斜杠（/）作为分隔，是为了消除歧义。

background: url(tr.png) top right,
            url(br.png) bottom right,
            url(bl.png) bottom left;
background-size: 2em 2em;
background-repeat: no-repeat;

//此时，只需要在一处修改，就可以改变所有的background-size和background-repeat