《CSS揭秘》 |CSS编码技巧

本章例子：https://codepen.io/sanhuamao1/pen/eYgLvYm

减少重复代码

更改大小

font-size: 20px;
line-height: 30px;
padding: 6px 16px;

改进：（1）将需要同步改变大小的属性值单位用相对属性代替，如em。这时大小就会更具font-size的变化而变化。（2）line-height根据倍数随着字体大小改变

font-size: 2em;
line-height: 1.5;
padding: .3em .8em;

改变颜色

如果想改变颜色，可能要覆盖border、color、background、box-shadow和text-shadow的属性值。对于阴影和边框，只需把半透明的黑色或白色叠加在主色调上，即可产生主色调的亮色和暗色变体：

text-shadow: 0 -.05em .05em rgba(0,0,0,.5);
border: 1px solid rgba(0,0,0,.1);
background: #58a linear-gradient(hsla(0,0%,100%,.2),transparent);
box-shadow: 0 .05em .25em rgba(0,0,0,.5);

现在只要覆盖 background-color 属性，就可以得到不同颜色版本的按钮：

.cancel{
    background-color:sienna;
}
.ok{
    background-color:yellowgreen;
}

继承

比如在写提示框的箭头时，可以用inherit来继承父元素的样式：

.textTip{
    position: relative;
    margin-top: .5em;
    padding: .4em;
    background:wheat;
    border: 1px solid tan;
    color:white;
    border-radius: .4em;
}
.textTip::before{
    content: "";
    position: absolute;
    top: -.4em; left: 1em;
    padding: .35em;
    background: inherit;
    border: inherit;
    border-right: 0;
    border-bottom: 0;
    transform: rotate(45deg);
}

代码易维护与代码量少

border- 10px 10px 10px 0;

如果要更改多个位置，上面的写法会比较麻烦；而下面的写法易于维护，并容易看懂：

border- 10px;
border-left- 0;

响应式页面

我们的思路是尽最大努力实现弹性可伸缩的布局，并在媒体
查询的各个断点区间内指定相应的尺寸。当网页本身的设计足够灵活时，让 它变成响应式应该只需要用到一些简短的媒体查询代码：

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

预处理器

Stylus（http://stylus-lang.com/）、Sass（http://sasslang.com/）或 LESS（http://lesscss.org/）这样的 CSS 预处理器可以为 CSS的编写提供便利，比如变量、mixin、函数、规则嵌套、颜色处理等。不过，预处理器也不是完美无
缺的：

• CSS 的文件体积和复杂度可能会失控。即使是简洁明了的源代码，在经过编译之后也可能会变成一头从天而降的巨兽。
• 调试难度会增加，因为你在开发工具中看到的 CSS 代码并不是你写的源代码。（SourceMap会告诉浏览器哪些编译生成的CSS 代码对应哪些预处理器 CSS 代码，精确到行号。）
• 预处理器在开发过程中引入了一定程度的延时。
• 带来更高的学习成本。
• 预处理器有它们自己的 bug。这些 bug 可能会潜伏很久，因为我们很少会怀疑预处理器的某个 bug 才是我们CSS 出错的幕后元凶。

---

其实现在很多受预处理器启发的特性都已经以各种方式融入到原生 CSS 中了：

• 有一份关于（跟变量类似的）自定义属性的草案，叫作 CSS 自定义属性暨层叠式变量（http://w3.org/TR/css-variables-1）。
• CSS 值与单位（第三版）中的 calc() 函数，不仅在处理运算时非常强大，而且已经得到了广泛的支持，当下可用。
• CSS 颜色（第四版）（http://dev.w3.org/csswg/css-color）引入的 color()函数会提供颜色运算方法。
• 关于嵌套，CSS 工作组内部正在进行一些正式的讨论，甚至以前还有过一份相关的草案（ED）。

这些原生特性通常比预处理器提供的版本要强大得多，因为它
们是动态的 1。举个例子，预处理器完全不知道如何完成 100% - 50px 这样的计算，因为在页面真正被渲染之前，百分比值是无法解析的。但是，原生CSS 的 calc() 在计算这样的表达式时没有任何压力。

上面提到的原生 CSS 特性绝大多数在目前还没有得到很好的支持。建议：在每个项目开始时使用纯 CSS，只有当代码开始变得无法保持 DRY 时，才切换到预处理器的方案。