[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

喜欢的给我一个星吧 

感恩你