前端想拿万元月薪？那CSS开发中的10个易错点一定要先规避掉！

逃离我推掉我的手 2021-09-19 07:20 70阅读 0赞

我发现前端开发人员一直在努力征服CSS。理由也很充分，开发人员是用逻辑思考的生物。添加一个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、不要手动编码所有的CSS

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

> 10、不要让CSS过于“臃肿”

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

以上只是我作为一个开发人员在编写CSS时认为不应该做的事情。希望能帮助到各位前端同行！

如果你对编程感兴趣或者想往编程方向发展，可以关注微信公众号【筑梦编程】，大家一起交流讨论！小编也会每天定时更新既有趣又有用的编程知识！

发表评论取消回复

表情：

评论列表（有 0 条评论，70人围观）

还没有评论，来说两句吧...

相关阅读

相关 Java中BigDecimal类用法介绍及易错点规避

1 BigDecimal概述 Java在java.math包中提供的API类BigDecimal，用来对超过16位有效位的数进行精确的运算。双精度浮点型变量double可

古城微笑少年丶/ 2023年10月09日 20:14/ 0 赞/ 31 阅读

相关为什么一定要替换掉 SpringBoot 框架中的 Tomcat ？

一、前言在SpringBoot框架中，我们使用最多的是Tomcat，这是SpringBoot默认的容器技术，而且是内嵌式的Tomcat。同时，SpringBoot也

拼搏现实的明天。/ 2023年09月23日 21:59/ 0 赞/ 126 阅读

相关产品经理一定要懂的技术那点事儿（上）

一：产品思维与技术思维： 1：工程师是路径推理的技术思维，产品经理是用户场景的产品思维，技术思维表现为——实现方式、技术架构、技术价值、开发成本；而产品思维表现在——用户价值

叁歲伎倆/ 2023年03月01日 13:52/ 0 赞/ 17 阅读

相关从月薪3000到月薪过万：做什么工作才能过上想要的生活

如果问你：90后有多少存款正常？你会如何回答！ ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text

怼烎@/ 2023年02月21日 06:55/ 0 赞/ 117 阅读

相关要想学好前端开发，这五点你一定要知道！

前端开发是目前比较热门的岗位，薪资也是相当可观，因此很多人开始学习前端，都想为了以后从事前端开发行业，但是学习前端开发的门槛也是比较高的，常常有的朋友在学习前端开发的时候“

水深无声/ 2022年11月21日 04:16/ 0 赞/ 277 阅读

相关不同级别的前端都拿多少月薪？月薪2万属于低收入吗？

一、前端程序员公司会给什么待遇抛开个人技能能力和面试技巧不谈，公司给前端程序员什么待遇还取决于公司的业务，比如公司招个前端只是为了维护官网，那一般工资不会太高，但是如果

待我称王封你为后i/ 2022年09月03日 05:10/ 0 赞/ 270 阅读

相关想学好Python？那一定不要错过这份教程！

随着Python的发展，已成为程序员能力模型中，非常重要的一个技能。甚至BATZJ的工程师，都无可否认现在Python对于一个程序员职业发展的重要性。但很多小白在面对“

深碍√TFBOYSˉ_/ 2022年09月02日 14:45/ 0 赞/ 263 阅读

相关 css中易掉坑的知识点总结系列（一）

今天在写css代码的时候，忽然发现很多看起来挺简单的，但是却忽略了它们的小知识点，小细节，所以就准备把自己遇到的易忘和易忽略的css知识点整理到一起，方便自己以后查阅，也希望同

女爷i/ 2022年05月22日 00:48/ 0 赞/ 151 阅读

相关想用好eclipse，一定要做好这两点！

1.工作空间就是工程项目文件存放的位置，大多数程序员都会把所有项目放在同一个工作空间下面；放多了之后，启动eclipse会变慢；放多了之后，找某一个项目会比

末蓝、/ 2022年05月05日 10:28/ 0 赞/ 240 阅读

相关前端想拿万元月薪？那CSS开发中的10个易错点一定要先规避掉！

我发现前端开发人员一直在努力征服CSS。理由也很充分，开发人员是用逻辑思考的生物。添加一个DIV元素导致所有代码都不得不往下移一行，而另一个DIV“浮”到左侧，感觉没有任何意义

逃离我推掉我的手/ 2021年09月19日 07:20/ 0 赞/ 71 阅读