CSS Secret——Coding Tips

编写灵活的CSS

灵活性

我们先来看一段代码：

.noReusableButton{
  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;
}

这个按钮看上去挺正常的，但是要是想改一下字的大小怎么办，那这些绝对的值就都要改了。这样并不是灵活的css哈。
下面的代码就灵活多了：

.reusableButton{
  padding: .3em .8em;
  border: 1px solid #446d88;
  background: #58a linear-gradient(#77a0bb, #58a);
  border-radius: .2em;
  box-shadow: 0 .05em .25em gray;
  color: white;
  text-shadow: 0 -.05em .05em #335166;
  font-size: 125%;
  line-height: 1.5;
}
.small{
  font-size: 100%;
}
.large{
  font-size: 175%;
}

这里主要有两大块作为修改：

• font-size本身：这里使用百分数来替代绝对值，使用相对父元素的相对大小，这样页面的字要整体修改就可以只改很少的地方。
• 行高，以及部分原来使用绝对长度的规则改为使用em相对字号，这样要是想改变按钮的大小只需要改变字号就行。

除了大小，另一个我们需要关心的就是颜色了。在现在的状态下，要改变颜色那就要改很多值。如果我们这样改一下，修改按钮颜色就改个背景就好了。

.reusableButton{
  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;

}
.small{
  font-size: 100%;
  background-color: #c00;
}
.large{
  font-size: 175%;
  background-color: #6b0;
}

可维护性与简洁性

这俩一般是矛盾的

border-width: 10px 10px 10px 0;

这个简洁，但是要改的话要改3个地方。

border-width: 10px; 
border-left-width: 0;

这个维护性好，不简洁。

当前颜色

新的颜色关键字currentColor，永远指向color的值。

继承

关键字inherit，这个关键字总是被遗忘，这个关键字可以应用在所有规则上，永远是父元素同属性的计算值对于伪元素，就是生成这个伪元素的元素。
来个例子：想在做一个有角的对话框的样子

#inherit{
  height:200px;
  width:200px;
  position: relative;
  color:#fff;
  background-color: #6b0;
  border: 1px solid #c00;
  padding:10px;
}
#inherit:before {
  content: "";
  position: absolute;
  top: -.4em;
  left: 1em;
  padding: .35em;
  background: inherit;
  border: inherit;
  border-right: 0;
  border-bottom: 0;
  transform: rotate(45deg);
}

这样这个小角的背景和边框就都不用操心了，直接改本元素就好。这里有个小问题，绝对定位假装自己是个角的其实是个方块，因为绝对定位，如果主元素的内容太靠边会被方块盖住内容。

与其相信数字，不如相信你的眼睛

• 垂直居中的问题，如果完全垂直居中，人眼会觉得有点偏上；而相对几何中心偏下一点会让人觉得图形位于正中。
• 同样高宽的圆和矩形，圆形看起来较小。
• 对于一段英文文字来说，上下左右的内边距相同看起来四周的空间并不相同，上下内边距小一点，这样四周才看起来一样。

响应式设计

现在大多数响应式设计都是通过media query来实现的。事实上所有的media query都增加了以后维护的开销，而且media query并不是一个连续式的解决方案，而是阶段式的，每个阶段间有断点。如果大部分样式代码并不是以弹性的方式来编写的，那么媒体查询能做的只是修补某个特定分辨率下的特定问题——这本质上只是把灰尘扫到地毯下面而已。
所以，media query应该作为最后一种手段来应用。
还有媒体查询的断点不应该由具体的设备来决定，而应该根据设计自身来决定。这不仅是因为我们的网站需要面向的设备太多了，还因为一个网站在桌面端可能会以任意尺寸的窗口来显示。
下面还有一些建议,可能会帮你避免不必要的媒体查询。
„

• 使用百分比长度来取代固定长度。如果实在做不到这一点，也应该尝试使用与视口相关的单位(vw、vh、vmin 和vmax)，它们的值解析为视口宽度或高度的百分比。
• 当你需要在较大分辨率下得到固定宽度时，使用 max-width而不是width，因为它可以适应较小的分辨率，而无需使用媒体查询。
• 不要忘记为替换元素(比如 img、object、video、iframe等)设置一个max-width，值为 100%。
• 假如背景图片需要完整地铺满一个容器，不管容器的尺寸如何变化，background-size: cover 这个属性都可以做到。但是，我们也要时刻牢记——带宽并不是无限的，因此在移动网页中通过CSS 把一张大图缩小显示往往是不太明智的。
• 当图片(或其他元素)以行列式进行布局时，让视口的宽度来决定列的数量。弹性盒布局(即 Flexbox)或者display: inline-block 加上常规的文本折行行为，都可以实现这一点。
• 在使用多列文本时，指定column-width(列宽)而不是指定column-count(列数)，这样它就可以在较小的屏幕上自动显示为单列布局。

合理使用简写

background: rebeccapurple; 
background-color: rebeccapurple;

这两种写法并不等价，有时它们表现相同，有时不同。
在使用展开式属性的写法时，通常会遇到这样的问题：展开式写法并不会帮助你清空所有相关的其他属性，从而可能会干扰你想要达到的效果。
当然，你可以把所有的展开式属性全都设置一遍，但你可能会漏掉几个；又或者未来引入更多的展开式属性，那时你的代码就无法完全覆盖它们了。
不要害怕使用简写属性。合理使用简写 是一种良好的防卫性编码方式，可以抵御未来的风险。
当然，如果我们要明确地去覆盖某个具体的展开式属性并保留其他相关样式，那就需要用展开式属性。

展开式属性与简写属性的配合使用也是非常有用的，可以让代码更加 DRY。对于那些接受一个用逗号分隔的列表的属性(比如 background)，尤其如此。

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-size 和 background-repeat 的值被 重复了三遍，尽管每层背景的这两个值确实是相同的。
其实我们可以从CSS的“列表扩 散规则”那里得到好处。它的意思是说，如果只为某个属性提供一个值，那它就会扩散并应用到列表中的每一项。因此，我们可以把这些重复的值从简写属性中抽出来写成一个展开式属性：

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