[css 揭秘]：CSS编码技巧

CSS编码技巧

我的github地址：https://github.com/FannieGirl/ifannie

喜欢的给我一个星吧

尽量减少代码重复

1. 尽量减少改动时需要编辑的地方
2. 当某些值相互依赖时，应该把它们的相互关系用代码表示出来
3. 代码易维护 VS 代码量少
4. currentColor —— CSS有史以来第一个变量
5. inherit可以用在任何CSS属性中，而且它总是绑定到父元素的计算值

关于响应式网页设计

1. 每个媒体查询都会增加成本
2. 媒体查询的端点不应该由具体设备来决定

建议：

1. 使用百分比长度取代固定长度。如果实在做不到这一点，也应该尝试使用与视口相关的单位（vw、vh、vmin 和 vmax），他们的值解析为宽度或高度的百分比。

2. 当你需要在较大分辨率下得到固定宽度时，使用max-width而不是width，因为它可以适应较小的分辨率，而无需使用媒体查询。

3. 不要忘记为替换元素（比如img、object、video、iframe等）设置一个max-width，值为100%。
   加入北京图片需要完整地铺满一个容器，不管容器的尺寸如何变化，background-size:cover这个属性都可以做到。但是，我们也要时刻牢记——带宽并不是无限的，因此在移动网页中通过CSS把一张大图缩小显示是不太明智的。

4. 当图片（或其他元素）以行列式进行布局时，让视口的宽度来决定列的数量。弹性盒布局（即FlexBox）或者display:inline-block加上常规的文本折行行为，都可以实现这一点。

5. 在使用多列文本时，指定column-width（列宽）而不是指定column-count（列数），这样他就可以在较小的屏幕上自动显示为单列布局。

6. 总的来说，我们的思路是尽最大努力实现弹性可伸缩的布局，并在媒体查询的各个端点区间内指定响应的尺寸。

合理使用简写

1.在使用展开式属性的写法时，通常会遇到这样的问题：展开式写法并不会帮助你清空所有相关的其他属性，从而可能会干扰你想要达到的效果。

2. 当然，可以把所有的展开式户型全部设置一遍，但可能会漏掉几个；或者，CSS工作组在未来引入更多的展开式属性。

3. 合理使用简写是一种良好的防卫性编码方式，可以抵御未来的风险。当然，如果我们要明确地去覆盖某个具体的展开式属性并保留其他相关样式，那就需要用展开式属性。

我们应该使用预处理器吗？

如果使用得当，在大型项目中可以让代码更加灵活。但是预处理器也不是完美无缺的：

1. CSS的文件体积和复杂度可能会失控
   2.调试难度增加
2. 预处理器在开发或城中引入了一定程度地延时
3. 每次抽象都必然会带来更高的学习成本
   5.他们都有自己的bug
4. 很多受预处理器启发的特性都已经以各种方式融入到原生的CSS中了。

建议是，在每个项目开始时使用纯CSS，只有当代码变得开始无法保持DRY时，才切换到预处理器方案。为了避免可能发生的“依赖”或“滥用”，在引入预处理器的问题上需要冷静的决定，不应该在每个项目一开始时就不懂脑筋顺着惯性来。

css 揭秘的第一章 告诉你整体写css的一些技巧。大方向的指导，这些坑我是一个一个踩过来的。有一种相见恨晚的感觉，不过呢，自己不踩怎么印象深刻，吸取教训呢。后面的章节是细节的css技巧，我很是期待，向css更高级进发，每一个技巧，每一段代码都应该去实践，你能够深刻的去理解吧！

书已到手里，学到一个技巧，就应该记录下来。这些都是自己走过来的路。尽管写的很辣鸡，如果你看到了，非常感谢，尽管来吐槽我吧！跪求虐

 

我的github地址：https://github.com/FannieGirl/ifannie

喜欢的给我一个星吧 

感恩你