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

Posted 2020-12-19

1. CSS简单说明

对于web初学者来讲,网站不外乎是html和CSS,js三大板块组合而成,HTML负责网页的结构,CSS负责网站外观样式,JS负责网站交互效果,今天主要是给大家讲一下CSS相关的内容,本身CSS学习起来也比较简单,但一般简单的东西都不是那么容易,也就是针对初学者,想要精通,还是需要花很多时间及做很多项目的。

一个没有经验的前端工程师，写CSS的时候有什么常见通病？
从概念上来讲,CSS就是层叠样式表,主要用于网页排版设计及装饰效果,让网页看起来更漂亮,但对于一些刚入行不久的小伙伴来讲,会使用是一回事儿,如何把CSS使用到极致,那又是另外一回事儿了.下面以我8年多的工作经验给刚入行的小伙伴来聊一聊,哪些曾走过的坑和初学者常见的通病,并给出自己多见解!

2. 初学者常见通病:

2.1网页布局不太清楚:制作结构混乱,HTML和CSS样式较多

一个没有经验的前端工程师，写CSS的时候有什么常见通病？
针对一些常见的版块,设置思路不正确,导致制作出的效果一致,但是CSS样式及HTML代码标签比较繁琐,如:本来可以使用10行代码,搞定的事,初学者可能会使用30行代码才能实现同样的效果.

2.2代码规范问题:命名问题,代码风格,不写注释

对于初学者最容易出现的问题,就是自己的代码只有自己看得明白,别人看代码,感觉是在煎熬,只能看懂一些及更少,写代码其实也是一门艺术,写得好是大神,写不好就成了野鸡代码了.

作为一个合格的IT猿,代码应该同出一门,写出来的东西应该所有的同行尽可能都看懂,对于那些可读性极差的代码,后期也不方便维护,给大家带来困扰!

常见的问题: 命名问题,代码风格(缩进及标签属性写法)和不写注释问题

命名问题最大,一般小伙伴们都喜欢各种英文+数字的方式: 如:div1 div2 div3 ....div1000,当然,还有很多奇葩的辣眼睛写法,不是不可以,只是更显示不专业.

还有就是代码风格不统一,自己写的代码都会找个半天,简直就是想一行放一个世界的心理,写注释这个问题,还真没有养成一个优秀程序猿的品质,自己写的代码过几天再回首,也会弱弱的咒骂几句....你们应该懂的.

2.3选择器使用不当:选择器使用繁琐

选择器这个问题就有些花式操作了,各种的样式只有想不到,没有新手大佬写不出来的,恨不得自己个选择器,能把所有的标签都串起来,来一个绕地球5圈,层级之深,样式之复杂,果真看了后,直接掐人中

2.4属性认识不深:设计时使用样式不够简单明了

接下来就是比较麻烦的问题了,初学者由于对真实项目制作得比较少,对一些常见属性,使用起来也并不是那么完美,对于一些CSS属性有些认识盲区,只会简单的皮毛,写出来的效果,总会欠缺一些什么,写得样式,即多,又重复,而且可用性极低下,大大增加的样式表的体量,导致一些性能问题

2.5不理解CSS组件开发:CSS样式重复利用率低下

最后一个点,还是重点讲一下制作效果不能重复使用的问题,一般对于经验少的同志来讲,只看到当前需要的直观样式,并不太清楚,一个网站整体结构,做出来的效果,样式复写率非常高,没有一个整体的结构及样式认知,花了大量时间来复写样式,以此来满足当前版块的效果诉求,导致每写一个效果,就又得把所有需要的样式,再从头来过,这样非常影响网页性能.

3. 解决方案

3.1. 学会使用API开发手册

如果对于一些属性认识不深,建议有空时多查一下 前端开发宝典 如果英文比较好的同学,建议参考 官网

3.2. 多解读一些前端的经典UI框架源码

可以多看一下,如bootstrap layUI MUI....等等的UI框架,多看一下样式写法,代码风格,命名格式

3.3. 多参与商业级网站实战或仿站

当然,其主要目的是让初学者,多参与一些同类型或不同风格的设计,其实多写一些效果,再参考一些写法及制作思路,会大大加快从新手到老鸟的转化进程哦!

3.4. Github开源项目

最后给大家推荐一下github这个平台,当然类似平台也非常多,如:国内的码云 开源中国...等这个代码仓库也是一个不错的学习平台哦,多关注一些关注及星级高的开源项目,下载到本地,也可以进行相关内容的学习及进阶,对一个新手成长也是有很大帮助的哦!

【编辑推荐

1. 妙用CSS变量，让你的CSS变得更心动
2. 20个CSS快速提升技巧
3. 一个有意思的方案：不借助后台和 JS ，只用 CSS 让一个列表编号倒序，你会怎么做？
4. CSS中的两个特殊值，用于控制层叠的inherit和initial
5. 一文学会使用 CSS 中的 min(), max(), clamp() 以及它们的使用场景

【责任编辑：未丽燕 TEL：[phone]】