前端开发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;}