一、不要滥用类
在有意义的地方使用ID而不要使用类。这是一个使得浏览器能够更快访问DOM元素的方法。
二、不要把一切都扔进一个CSS文件中
分区CSS使其更易于管理。每一个CSS文件都可以分解成例如header.css、footer.css等逻辑组件。
三、不要命名选择器为“.red-with-green-dashed-lines”(红绿虚线)
根据页面上的组件命名你的选择器。例如：“header-left”，“content-title”或“content-date”更具描述性。
四、不要忘记注释
注释在CSS中非常重要，可用来理解每个样式如何与其他样式关联以及什么颜色方案适用于哪些组件。
五、不要害怕开发工具
现在的每个浏览器都有自己的一套开发工具，通常是按F12。这些工具在“调试CSS”时至关重要。
六、不要害怕覆盖
当然，CSS框架，例如Bootstrap和Foundation都较为巨大，但每一个都需要根据你的需要做出一点调整。当你得到一个更新的框架时，它将覆盖你的改变。与其深入挖掘庞大的CSS文件，还不如创建一个bootstrap-overrides.css文件，按照你的意愿调整框架，只是
七、不要滥用!很重要
CSS的整体思路是，从一个到另一个地“层叠”样式。!重点是要记住排雷一样地踏遍所有早先的样式。:-)
八、不要使用大量网络字体
这也是显而易见的，但有些人就是喜欢自己排版。只在网站上使用一个或两个(最多三个)网络字体，然后回归到浏览器默认设置，以保持网站的优化。
九、不要手动编码所有的CSS
为了保持CSS的DRY，可以使用CSS预处理程序例如LESS或SASS。使用这些预处理器的最大好处是，你可以定义变量，例如在上面定义配色方案，然后重复使用到所有CSS，而不必当你需要修改的时候追踪每个颜色。
十、不要让CSS过于“臃肿”
空格会占用CSS文件的空间空间。由于我们都希望我们的CSS能够快速加载，因此在部署到网站之前最好使用CSS压缩工具来一次瘦身。
以上就是小编今天为大家分享的关于Web前端工程师应该注意的css开发中的易错点的文章，希望本篇文章能够对正在从事Web前端工作的小伙伴们有所帮助。想要了解更多Web前端知识记得关注北大青鸟Web培训官网。最后祝愿小伙伴们工作顺利哦!
*声明：内容与图片均来源于网络(部分内容有修改)，版权归原作者所有，如来源信息有误或侵犯权益，请联系我们删除或授权事宜。
CSS3 使用border-radius属性设置圆角效果该属性可以通过设置图片或块级元素四个角的圆角半径像素数来实现该效果。W3C规定该属性的可能取值为：
none，默认值，表示元素没有圆角效果
length，由浮点数字和单位标识组成的长度值
%，由百分比设置的圆角值
该属性可以分别设置元素的四个圆角效果，采用下列格式来实现。
格式：border-radius: 左上角 右上角 右下角 左下角
通常，四个方向的角半径均采用length取值来实现，该取值必须为浮点数字和单位标识共同组成。同时规定，该取值不得取负数。
例1：利用整数来实现圆角取值。
div{
width: 200pxheight: 150px
border: solid 1px #aaaaaa
border-radius: 10px 5px 10px 5px
background-color: #ff5857
}
上述实例设置了一个div块级元素，其宽度为200px，高度为150px。为了能够看到其圆角效果，增加了颜色为#ff5857的背景颜色，并且添加了1px大小的边框，其边框为实线，边框颜色为#aaaaaa。最后设置其圆角效果，左上角和右下角均为10px，右上角和左下角均为5px。
例2：查看下列CSS代码。
（1）border-radius: 10px 5px 15px 20px
（2）border-radius: 10px 5px 15px
（3）border-radius: 10px 5px
（4）border-radius: 10px
上述四组代码中，只有组（1）提供了完全符合格式的四个数据，其他三组均只提供了小于四个的数据。这种情况下，数据依然按照“左上角 右上角 右下角 左下角”的顺序进行排列，没有涉及到的角方向按照其对角的圆角数据进行设置。
因此，组（2）的数据表示：左上角为10px，右上角为5px，右下角为15像素，左下角为右上角的像素设置，即5px。请同学们根据这样的方法，理解一下组（3）的圆角含义。
组（4）就设置了一个数据，这表示四个方向的角半径均为10px。
二、独立设置元素的四个圆角效果：
若只想设置一个块级元素右上角的圆角效果，该如何实现呢？这里W3C为border-radius属性派生出了表示四个方向的独立圆角效果的子属性。
border-top-left-radius, 定义左上角的圆角效果
border-top-right-radius, 定义右上角的圆角效果
border-bottom-right-radius, 定义右下角的圆角效果
border-bottom-left-radius, 定义左下角的圆角效果
上述四个子属性的取值规则和border-radius属性的取值规则是完全相同的。
例3：设置p标记的圆角效果，其中左下角没有圆角效果，其他三个方向角的圆角效果均为25px。
方法1：利用border-radius属性统一设置。
p{border-radius: 25px 25px 25px 0}
方法2：利用border-radius属性的派生子属性设置。
p{
border-top-left-radius: 25px
border-top-right-radius: 25px
border-bottom-right-radius: 25px
}
方法3：利用border-radius属性设置所有角方向均为25px，再利用border-radius属性的派生子属性设置左下角没有圆角效果。
p{
border-radius: 25px
border-bottom-left-radius: none
}
1.HTML知识要点：web工作原理、HTML4及HTML5、常见标签、相对路径与绝对路径、HTML5标签
2.CSS+布局
知识要点：CSS基本语法、基本选择器、复合选择器、背景图片、盒子模型、精灵图、常见网页布局、浮动定位、Flex布局、响应式布局、移动端适配、网页动画、CSS3新特性、Less预处理器
3.ECMA基础
知识要点：ECMA基本语法、数据类型、运算符、分支结构、循环结构、函数、常见内置对象的属性和方法、Array、Math、Date、String
4.DOM
知识要点：DOM模型、节点类型、节点的基本操作、JS操作样式表、克隆节点、获取坐标位置、获取元素尺寸、节点的各种属性和方法。
5.BOM+jQuery
知识要点：History、Location、Navigate、定时器、线程、事件循环、web工作原理、性能优化、事件对象、正则表达式、jQuery框架
6.vue框架基本语法
知识要点：vue基本语法、双向绑定、组件传值、条件渲染、列表渲染、事件处理、表单绑定、自定义事件、插槽、过渡、动画、动态路由、嵌套路由、编程式导航、导航守卫、路由懒加载、脚手架、生命周期、vuex、axios、ts、vue3
7.vue案例
知识要点：将知识点融会贯通到案例中。
8.react基本语法
知识要点：react简介、jsx语法、元素渲染、组件和props、state、生命周期、表单、条件渲染、组合继承、hooks、性能优化、redux
9.react案例
知识要点：将知识点融会贯通到案例中
新增内容：微信小程序及uni-app框架
知识要点：
小程序框架（配置/程序与页面注册/路由），开发者工具
小程序框架组件学习（基础/视图/表单/地图/媒体/导航/开发能力）
小程序框架组件学习（地图/媒体/导航/开发能力）
小程序API（基础/路由/界面/网络/数据缓存/位置服务）
小程序API（设备/媒体/开放接口/授权/登录/支付）
10.Node服务器与数据库及框架
Node原生模块、跨域、安全校验、数据加密、数据库基本操作、express框架、koa框架
11.Node 项目周/WebPack
