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

124 阅读3分钟

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

建议阅读一下腾讯前端团队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的层次了。

综合提高CSS能力的方法:

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

2.去Github看几个有代表性的项目,可以从one single page开始;

3.解读经典UI框架源代码,了解背后的设计理念;

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

5.学习Webpack打包,至少了解Vue,有些网页是用三大框架写的,掌握打包器非常有必要;

6.阅读前端规范了解团队协作背景下的工程化;

7.了解CSS预处理器;

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

四.写在最后:

不忘初心,永不放弃,你必将开出属于自己的一朵花来,加油。