css 命名问题

最近看到了些关于css命名方面的文章，对于这方面我也有自己的看法。我接触css有很长一段时间了，对于css的命名我也是在逐步改进。 感觉工作中比较常碰见的问题： 

1.需要给层定义各种尺寸的宽度，高度基本是不用定义的 

2.层的padding和层之间的margin 

3.给文字高亮颜色 

4.各种样式的tab和button 

5.不同的背景色 

6.各种样式的border 

7.左浮动，右浮动 

8.粗体，斜体 

9.居左，居中，居右，垂直居顶，居中，居底对齐 1.需要给层定义各种尺寸的宽度，高度基本是不用定义的 以em为单位的是弹性布局,目前浏览器都支持页面整体缩放，不太可能会用到调整浏览器字体大小，所以层的宽度没有必要设置成em单位，“是时候不用考虑基于字体大小（em）的设计了” 以%为单位的是流体布局,这种布局比较难控制，用的较少 最常见的是以px为单位的固定布局，需要定义以px单位的页面通常是栅格布局 那么不了解栅格的朋友可以先看看，"网页的栅格系统设计" 首先保证页面的宽度一定是950px,分成24列，这个时候就要定义24种可能情况的宽度 我目前只用过blueprint框架，它采用的命名方式是： .span-1 {width:30px;} .span-2 {width:70px;} .span-3 {width:110px;} .span-4 {width:150px;} .span-5 {width:190px;} .span-6 {width:230px;} .span-7 {width:270px;} .span-8 {width:310px;} .span-9 {width:350px;} .span-10 {width:390px;} .span-11 {width:430px;} .span-12 {width:470px;} .span-13 {width:510px;} .span-14 {width:550px;} .span-15 {width:590px;} .span-16 {width:630px;} .span-17 {width:670px;} .span-18 {width:710px;} .span-19 {width:750px;} .span-20 {width:790px;} .span-21 {width:830px;} .span-22 {width:870px;} .span-23 {width:910px;} .span-24 {width:950px;} 我个人觉得span根据标签意思是内联元素，内联元素是不能定义宽度的，这里span不太合适。 采用grid-1,grid-2,...grid-24或者w-1,w-2,...w-24会更合适 2.层的padding和层之间的margin 栅格布局每列之间的间距是10px，所以层之间的margin的全局定义方式： .w-1,.w-2,...,.w-23{margin-right:10px;} 最大宽度w-24刚好是950px，不需要定义margin。 少数一些时候用到w-1,w-2,...,w-23时列之间可能不需要margin-right，这时需要定义 .last{margin-right:0;}去reset之间的 我们还需要定义些常用到的margin和padding，于是有： .ml-10{margin-left:10px} .mr-10{margin-right:10px} .mt-10{margin-top:10px} .mb-10{margin-bottom:10px} .pl-10{padding-left:10px} .pr-10{padding-right:10px} .pt-10{padding-top:10px} .pb-10{padding-bottom:10px} mg-10{margin:10px;} pd-10{padding:10px;} ... 以次类推 3.给文字高亮 项目中这个需求一直在变动，通常要定义几种全局的高亮颜色. 常见的命名方式是.red或者.hightlight-red...，class中含有颜色的名字这种方式其实不好。 项目中如果需要添加换色的功能，需要用其它颜色的样式表reset之间的样式表，那之前定义的高亮颜色在其它颜色中就不一定适合，而class却还要用原来的，这样就不语义化了。 就算不考虑换色功能，但希望做出来的页面能更加满足用户的感受，这个高亮的颜色也可能一直在变的。 所以建议用hightlight-1,hightlight-2...,通常高亮颜色在1到3种之间，不会太多,容易记住。 4.各种样式的tab和button .tab-1{...} ... .button-1{...} ... 5.不同的背景色 .bc-1{background-color:#;} ... 6.各种样式的border .b1s-1{border:1px solid #000;} .b1d-1{border:1px dashed #000;} ... 4,5,6中之所以class中用-1而不用-color，理由跟第三种“给文字高亮”类似 7.左浮动，有浮动， 居左，居右，居中 .f-l{float:left;} .f-r{float:right;} .f-n{float:none;} 还有清浮动的 .c-b{clear:both;} .c-l{clear:left;} .c-r{clear:right;} 8.粗体，斜体 与其定义class不如直接用相应的标签，反正粗体或斜体的内容总归需要放入一个标签中。 粗体就直接用,斜体直接用 9.居左 ，居中 ，居右，垂直居 顶，居中，居底对齐 .ta-l{text-align:left;} .ta-c{text-align:center;} .ta-r{text-align:right;} .va-t{vertical-align:top;} .va-m{vertical-align:middle;} .va-b{vertical-align:bottom;}