阅读CSS Secrets（一）

2015-11-26 本文已影响1619人 _陈慧敏

CSS编码提示

减少重复的代码
一个重要的组成部分就是尽可能减少必要的修改
看下面一个例子

button{
      padding:6px 16px;
      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;
}

当属性相互依赖的时候，尽量去思考他们代码中的关系，尽量减少绝对值的使用，对于button的大小而言，我们可以更改px属性，相对父节点的font-size可以用em，相对根节点的font-size可以用rem。对于color，比如border-color，background，box-shadow，text-shadow属性，如果当需求需要我们重写这几个属性时候，我们需要去重新计算主色的深\浅值，我们可以通过半透明的白色和黑色去简单的处理这些麻烦。

padding: .3em .8em;//parent font size
border:1px solid rgba(0,0,0,.1);
background:#58a linear-gradient(hsla(0,0%,100%,.2),transparent);
border-radius:.2em; //parent font size
box-shadow:0 .05em ,25em rgba(0,0,0,.5);
border:white;
text-shadow:0 -.05em .05em rgba(0,0,0,.5);
font-size:125%;   //parent font size
line-height:1.5;   //font-size

下面的例子可以更清晰的告诉我们怎么去简化代码，写出更优质可维护的CSS

Maintainability versus brevity

border-width:10px 10px 10px 0;//这里会用到3步修改，改右中上

border-width:10px;//这里只用到2步修改  全改，然后调整左
border-left-width:0;

这样本来3步的操作就简化成了2步的操作效率快了33.3%

currentColor

使用currentColor代替绝对值颜色的使用，比如在border-color,the text-shadow and box-shadow colors ,outline-color,and others.
这里书中没有直接的例子，，我就自己创了个栗子，大家看看效果-----
我们有一个a标签文本为通知前面会有个箭头，平常状态下字体和箭头为黑色，移入时字体和箭头为红色。
如果平常来写我a:hover的时候还需要对箭头进行额外的处理，而这里箭头的border-color用了currentColor之后就直接随着a的color进行改变，否则还要对a:hover:before进行处理，

<a href="javascirpt:void;">通知</a>a{
  color:black;
  text-decoration:none;  
}
a:before{
  display:inline-block;
  height:0;
  width:0;
  content:"";
  border-width:7px;
  border-style:solid;
  border-color:transparent transparent transparent currentColor;
}
a:hover{
  color:red;
}

1.png

2.png

Inheritance

这个属性值可以在所有的CSS属性中使用，他会计算出对应的父标签的该属性的值
用一个直观的栗子来说明下我们这里的内层div的背景用inherit

<div class="d1">
   <div class="d2"></div>
</div>
.d1{
  width:100px;
  height:100px;
  background:red;
  position:relative;
}
.d2{
  width:50px;
  height:50px;
  position:absolute;
  top:110%;
  background:inherit;
}