前端开发CSS的命名、写法与分类

你移动端前端开发的理解
移动端前端开发视频教程
移动前端开发语言

css的命名、写法与分类,看似没有什么规则,但是实际上如果考虑到后期的维护,那么命名的意义、分类的清晰就显得尤其重要了。初期写代码的时候,只要求做到快速能够实现效果就好,随着熟练程度的 提高,我们还应该考虑更多的问题,以便于让自己写的代码不仅简洁,并且能够思路清晰,让别人也能轻松看懂,以便于去维护。
首先,当我们拿到一套完整的网页设计图时,并不要急于动手去做,而是应该认真的看一遍设计图,有无疏漏,每一步的页面是否都有设计图,对于网页元素应该注意的事项,设计师有无疏漏,这是一个及其重要的过程,如果你不想以后给自己添堵的话。因为好多设计师,不是合格的网页设计师,他们只对美感有一个很好的把握,对网页元素需要的内容会有所疏漏,例如,登陆注册页面,是否需要留出表单提示文字的位置,表单提示文字的颜色和图片是否统一等等。
当我们确认设计图已经完整并且完美之后,我们不要按照大多数的流程,先从首页开始切,切到哪,css文件就写到哪,我认为更好的做法是,把我们的样式表至少分为2类,或者是3类,其实第一类,用来放基本的样式,就是每个页面都需要用到的样式,例如样式置0,{margin:0;padding:0;}这种写法我个人不是太支持,因为可能许多标签我们用不上,并不需要全部置零,最底下会发一个我认为还算可以的默认样式表供大家参考一下的。
在这里,我们可以给通用的样式分类,并且写上注释,/
css reset/表示重置的样式,我们还可能用到定位的样式,文字的样式等等,把每一类样式分类排放,并且加上注释,等过几个月,你需要维护的时候,可以很快的找到。
通用的样式写完了,我们就需要写每个页面的样式了,每个页面都是不同但是又有一些内容是相同的,这个时候我们需要提取出来相同的部分,把页面模块化,最大的去细化并且提取相同的内容,写出有高重用性的样式,这样的样式表属于公共的的样式,可以叫public或者common,最后每个页面不同的部分,我们分成块状,写在一个样式表里面,注意把注释写好,例如首页的样式就写/
首页/,联系我们就写/联系我们/把每个页面的样式都写在一起,方便以后进行升级维护或者是改版。
通过样式拼合的方法,进行组合类,从而达到我们需要的效果,例如我需要div左边浮动,距离顶部10px,我的样式有2个,一个是.fl{float:left;} .mt10{margin-top:10px;}那么我可以这么使用<div .=”fl mt10″> 。另外对于我们类的命名,应该保证有意义,例如头部分可以命名head,脚部分可以命名为foot等等。
最后附上,我常用的通用样式表:
/
css reset/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockqupte,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
/
文字排版/
.f12{font-size:12px;}
.f13{font-size:13px;}
.f14{font-size:14px;}
.f16{font-size:16px;}
.f20{font-size:20px;}
.fb{font-weight:bold;}
.fn{font-weight:normal;}
.t2{text-indent:2em;}
/
定位*/
.tl{text-align:left;}
.tc{text-align:center;}
.tr{text-align:right;}
.bc{margin-left:auto;margin-right:auto;}
.fl{float:left;display:inline;}
.fr{float:left;display:inline;}
.cb{clear:both;}
.cl{clear:left;}
.cr{clear:right;}
.vm{vertical-align:middle;}
.pr{position:relative;}
.pa{position:absolute;}
.abs-right{position:absolute;right:0;}
.zoom{zoom:1;}
.hidden{visibility:hidden;}
.none{display:none;}

h5全栈和前端与移动开发
前端移动开发真机模拟
前端开发移动端调试工具
» 本文来自:前端开发者 » 《前端开发CSS的命名、写法与分类》
» 本文链接地址:https://www.rokub.com/7681.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!