标签：CSS开发注意事项

爱整理前端为您整理了一些CSS开发注意事项供大家参考学习，本文分享CSS开发注意事项编码技术经验，适合所有正在使用CSS样式编程的开发人员阅读。推荐收藏一下，以后备用，记得关注一下。

25个CSS开发注意事项

★25个CSS开发注意事项

1.不要滥用类

在有意义的地方使用ID而不要使用类。这是一个使得浏览器能够更快访问DOM元素的方法。

2.不要把一切都扔进一个CSS文件中

分区CSS使其更易于管理。每一个CSS文件都可以分解成例如header.css、footer.css等逻辑组件。

3.不要命名选择器为“.red-with-green-dashed-lines”(红绿虚线)

根据页面上的组件命名你的选择器。

4.不要忘记注释

注释在CSS中非常重要，可用来理解每个样式如何与其他样式关联以及什么颜色方案适用于哪些组件。

5.不要害怕开发工具

现在的每个浏览器都有自己的一套开发工具，通常是按F12。这些工具在“调试CSS”时至关重要。

6.不要害怕覆盖

当然，CSS框架，例如Bootstrap和Foundation都较为巨大，但每一个都需要根据你的需要做出一点调整。当你得到一个更新的框架时，它将覆盖你的改变。与其深入挖掘庞大的CSS文件，还不如创建一个bootstrap-overrides.css文件，按照你的意愿调整框架，只是…

7.不要滥用 !很重要

CSS的整体思路是，从一个到另一个地“层叠”样式。 !重点是要记住排雷一样地踏遍所有早先的样式。

8.不要使用大量网络字体

这也是显而易见的，但有些人就是喜欢自己排版。只在网站上使用一个或两个(最多三个)网络字体，然后回归到浏览器默认设置，以保持网站的优化。

9.不要手动编码所有的CSS

为了保持CSS的DRY，可以使用CSS预处理程序例如LESS或SASS。使用这些预处理器的最大好处是，你可以定义变量。

10.不要让CSS过于“臃肿”

空格会占用CSS文件的空间空间。由于我们都希望我们的CSS能够快速加载，因此在部署到网站之前最好使用CSS压缩工具来一次瘦身。

11、不要使用过小的图片做背景平铺

这就是为何很多人都不用 1px 的原因，这才知晓。宽高 1px 的图片平铺出一个宽高 200px 的区域，需要 200*200=40, 000 次，占用资源。

12、无边框

推荐的写法是 border:none;，哈哈，我一直在用这个。 border:0; 只是定义边框宽度为零，但边框样式、颜色还是会被浏览器解析，占用资源。

13、慎用 * 通配符

所谓通配符，就是将 CSS 中的所有标签均初始化，不管用的不用的，过时的先进的，一视同仁，这样，大大的占用资源。要有选择的初始化标签。

14、CSS 的十六进制颜色代码缩写

习惯了缩写及小写，这才知道，原来不是推荐的写法，为的是减少解析所占用的资源。但同时会增加文件体积。孰优孰劣，有待仔细考证。

15、样式放头上，脚本放脚下。不内嵌，只外链。

16、坚决不用 CSS 表达式。

17、使用 引用样式表，而不是通过 @import 导入。

18、一般来说，PNG 比 GIF 要小，小得多。再者，GIF 中有多少颜色是被浪费的，很值得优化。

19、千万不要在 HTML 中缩放图片，一者不好看，二者占资源。

20、正文字体最好用偶数，12px、14px、16px，效果非常好。特例，15px。

21、block、ul、ol 等上下留出至少一倍行距，左侧至少两倍行距，右侧随意。

22、段落之间，至少要有一倍行距。

23、强行指定某些元素的 line-height，正文 1.6 倍于文字大小，标题 1.3 倍。

24、中文标点用全角。英文夹杂在中文中，左右空格，半角。

25、中文字体的粗体和斜体，远离较好，利民利己。

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/jiqiao/j50866.shtml