            
                培训首页
             > 
            培训新闻
             > 
            web前端新闻
             > 
            web前端css中易出现的十大错误
        

web前端css中易出现的十大错误

来源：

科迅教育

发表于：2018-08-14 11:00:28

相关标签： web前端培训南通web前端培训

开发人员是用逻辑思考的生物。添加一个DIV元素导致所有代码都不得不往下移一行，而另一个DIV”浮”到左侧，感觉没有任何意义你也一定听到过开发人员的抱怨：“我们只需要向左边移动五个像素，但是…天哪！为什么整个都向下移动了一行。到底是哪里错了？？？”所以，我们今天就来聊一聊CSS中的十大错误的做法。

1.不要滥用类

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

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

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

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

根据页面上的组件命名你的选择器。例如：”header-left”，”content-title”或”content-date”更具描述性。

4.不要忘记注释

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

5.不要害怕开发工具

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

6.不要害怕覆盖

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

7.不要滥用

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

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

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

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

为了保持CSS的DRY，可以使用CSS预处理程序例如LESS或SASS。使用这些预处理器的大好处是，你可以定义变量，例如在上面定义配色方案，然后重复使用到所有CSS，而不必当你需要修改的时候追踪每个颜色。

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

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

想要系统学习web前端课程的可以到南通科迅。

科迅教育是专业的IT职业培训学校，500强企业定向培训企业！现开设的课程有JAVA培训，Web前端培训，.Net培训等，科迅教育以学员就业为目的，优质就业为宗旨，由老师授课，课程体系根据现在企业发展需求而制定，通过项目实战+课程学习的方式，让学生的编码数量度更高，文档编写能力更强，从而在实际工作中得到良好的应用。

独具特色的课程体系，零起点入学，分阶式教学模式，由浅入深，不仅学会，而且学精；