CSS入门 0x6 css编码技巧

尽量减少代码重复

• 尽量减少改动时要编辑的地方（这样就不会因为遗漏改动产生问题）
• 当某些值相互依赖是应该将其关系用代码表示出来（如字体大小和行高，使用em或百分比而不是绝对值）

•  inherit（inherit 可以用在任何 CSS 属性中， 而且它总是绑定到父元素的计算值（对伪元素来说， 则会取生成该伪元素的宿主元素）。 举例来说， 要把表单元素的字体设定为与页面的其他部分相同， 你并不需要重复指定字体属性， 只需利用 inherit 的特性）

相信眼睛而不是数字

     人眼观察会有视差，在设计的时候应该按怎么看起来像想要的效果，而不是怎么算出来是想要的效果。

响应式网页设计

    常见的实践是用分辨率来测试，利用媒体查询设计规则，但是每个媒体查询都会增加成本。应该科学设置媒体查询的断点，它不是由具体设备决定，而是由设计自身决定。

    可以用下面技巧来减少媒体查询：

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

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

 合理使用简写

    合理使用简写是一种良好的防卫性编码方式， 可以抵御未来的风险。

是否应该使用预处理器

   像 Stylus（http://stylus-lang.com/）、 Sass（http://sasslang.com/） 或 LESS（http://lesscss.org/） 这样的 CSS 预处理器。 它们为 CSS的编写提供提供了一些便利， 比如变量、 mixin、 函数、 规则嵌套、 颜色处理等。

    如果使用得当， 它们在大型项目中可以让代码更加灵活， 而 CSS 自身在这方面确实有很大局限。

 预处理器的缺点：

• CSS文件体积和样式可能会失控
• 调试难度会增加
• 编译会带来延时
• 学习成本更高
• 存在bug