Web开发

首页 » 常识 » 常识 » 一个没有经验的前端工程师,写CSS的时候
TUhjnbcbe - 2023/5/26 21:18:00

1.CSS简单说明

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

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

2.初学者常见通病:

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

针对一些常见的版块,设置思路不正确,导致制作出的效果一致,但是CSS样式及HTML代码标签比较繁琐,如:本来可以使用10行代码,搞定的事,初学者可能会使用30行代码才能实现同样的效果.

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

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

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

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

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

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

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

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

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

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

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

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

3.解决方案

3.1.学会使用API开发手册

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

1
查看完整版本: 一个没有经验的前端工程师,写CSS的时候