一个没有经验的前端工程师，写CSS的时候有什么常见通病？

不符合编码规范是新人最大的通病

建议阅读一下腾讯前端团队AlloyTeam的编码规范，里面规定了一些写前端的规范，这个非常适合一个团队来执行这套规范，保证代码的可读性、可维护等。这些规范就可以有效避免很多新手的常见通病。

一、胡乱命名

类名使用小写字母，以中划线分隔，id采用驼峰式命名，这是规范里面的要求，很多新手由于开发项目写的少，培训视频看得多，很多前端学习视频质量比较低，div、id都是随便写，class=“div1”,id="test1"等等之类的，不是不可以，但是不专业，如果是做大项目非常吃亏。

二、很少写注释以及css结构混乱

很多新手用的编辑器都很有问题，不知道如何快速注释，也没有写注释的习惯，CSS也是看到哪里和设计稿不同或者网页呈现的样式不好，就改到哪里，没有对CSS整个文件结构有一个完整的规划，没有规划没有章法，当然不会觉得有写注释的必要性了。甚至还出现一个css文件里，样式重复覆盖严重等情况。

三、属性没有章法

存在空规则，属性冲突，没有用Tab排版难看，属性顺序紊乱可读性差

不了解CSS的模块化以及可复用

核心在于不知道如何组织CSS，由于之前没有做过大型项目的经验，所以不会感觉到CSS模块化的必要性，对OOCSS,SMACSS等CSS设计模式所知甚少，比如没有做过类似于以下CSS的模块化过：Base (基本)、Layout（布局）、Module (模块)、State (状态)、Theme (皮肤)，当你没有模块化的经验，就不会深刻理解CSS的编程的必要性。

不了解CSS的性能优化

比如前面所说的属性紊乱，样式重复只是其中之一，还有过渡使用子选择器、id选择器和类选择器限制性混乱等等，尤其是布局和定位的问题。

知识点缺失

由于很多人学CSS学的都是w3cshool里面的知识（w3cschool里面的知识过于简单），好像他们也能把网页做得比较漂亮，但是由于不了解响应式设计、media、栅格化等诸多知识，对CSS的研究还停留在表面，写的网页问题也比较多。甚至很多人对CSS3的知识都没有掌握。

要想避免出现这些问题，一是去阅读规范，二是去了解CSS设计模式，三是去研究CSS性能，四是去研究Bootstrap等UI框架，五是应该去学一套前端框架Vue或者React，这样大致就可以提升CSS的层次了。

在前端领域混了这几年，总结了一套前端学习的精讲视频和学习路线，如果有对前端开发感兴趣的伙伴，不管你是想转行，或是大学生，还有工作中想提升自己能力的web前端党，欢迎大家的加入我的前端开发交流群：603985993 希望大家诚心交流！，与企业需求同步。好友都在里面学习交流，每天都会有大牛定时讲解前端技术!也可以关注我的微信公众号：【前端留学生】每天更新最新技术文章干货。

————————～～～～

综合提高CSS能力的方法：

一、找几个商业级别的设计稿自己拆解重构，比如去一些知名的设计网站去下载ps文档或sketch原稿，把它们用代码复现，而且适配多终端；

二、去Github看几个有代表性的项目，可以从one single page开始；

三、解读经典UI框架源代码，了解背后的设计理念；

四、使用开发者工具“抄袭”分解知名网站的前端网页，多去了解商业级别作品的代码经验；

五、学习Webpack打包，至少了解Vue，有些网页是用三大框架写的，掌握打包器非常有必要；

六、阅读前端规范了解团队协作背景下的工程化；

七、了解CSS预处理器；

八、去MDN把css的属性整理一下，比如伪类、伪元素，很多人只看了一些书籍、视频教程、或者w3cschool，完全是不够用的，技术文档远比教程教材重要，学任何编程都要把技术文档放在第一位。

一个没有经验的前端工程师，写CSS的时候有什么常见通病？相关推荐

一个合格的中级前端工程师需要掌握的技能笔记（上）
Github来源:一个合格的中级前端工程师需要掌握的技能 | 求星星 ✨ | 给个❤️关注,❤️点赞,❤️鼓励一下作者大家好,我是魔王哪吒,很高兴认识你~~ 哪吒人生信条:如果你所学的东西处于喜欢 ...
一个合格的初级前端工程师需要掌握的模块笔记
一个合格的初级前端工程师需要掌握的模块笔记文章目录一个合格的初级前端工程师需要掌握的模块笔记前言 Web模块 html基本结构标签属性事件属性文本标签多媒体标签列表表格表单标签其 ...
一个合格的Web前端工程师要掌握的知识点汇总
Web前端开发人员使用的技术CSS和HTML.JavaScript,根据设计师设计的雏形来编写代码.布局,框架,浏览器涉及到不同的领域知识广度,把网站界面更好地呈现给用户.那么问题来了,初学Web前端 ...
一个合格的中级前端工程师需要掌握的技能笔记（中）
Github来源:一个合格的中级前端工程师需要掌握的技能 | 求星星 ✨ | 给个❤️关注,❤️点赞,❤️鼓励一下作者大家好,我是魔王哪吒,很高兴认识你~~ 哪吒人生信条:如果你所学的东西处于喜欢 ...
【Java分享客栈】我有一个朋友，和前端工程师联调接口被狠狠鄙视了一番。
前言我有一个朋友,昨天和前端工程师联调一个接口,然后被狠狠鄙视了一番. 大家知道,自从前后端分离以后,像我一样一直以Java工程师为傲而自居的码圣们就砍掉了一半脊梁,从此被贴上了"Java ...
一个合格的中级前端工程师需要掌握的技能笔记（下）
Github来源:一个合格的中级前端工程师需要掌握的技能 | 求星星 ✨ | 给个❤️关注,❤️点赞,❤️鼓励一下作者大家好,我是魔王哪吒,很高兴认识你~~ 哪吒人生信条:如果你所学的东西处于喜欢 ...
一个有经验的网络工程师的所谈
<一个有经验的网络工程师的所谈> 一个有经验的网络工程师的所谈[工资.认证.就业等问题] 网工之路难,也容易(为自己将来的时间做个规划吧).下面是我自己在网页上找到的一些资料,你也看一下 ...
辞退了一名 2 年工作经验的前端工程师
来源 | 码海(ID:seaofcode) 这周比较遗憾,辞退了一名尚在试用期的前端同学. 一般情况下我们会在试用期结束后再评估是留还是不留,但这名同学确实问题很大,所以试用了两个月后(我们试用期三个 ...
web开发学习过程，一个合格的初级前端工程师需要掌握的模块笔记
为什么要写这篇文章从一开始手指冒汗被怼的说不出话,到最后和面试官侃侃而谈游刃有余,我发现:同样的能力水平,在不同的面试表现下,反馈到面试官眼中的结果可以有着天壤之别. 因此,如果你希望把自己的真实水 ...

一个没有经验的前端工程师，写CSS的时候有什么常见通病？

一个没有经验的前端工程师，写CSS的时候有什么常见通病？相关推荐

最新文章

热门文章