一直以来都有一个问题，rain css框架的类名过长，导致页面的class内容特别多，如：<input type=’button’ class=’heightM widthM css3_roundS css3_gradient_blue button blueButton’ value=’button’/>

现在个人将所有长类名增加了一个缩写，页面class内容长度可大大缩短:

<input type=’button’ class=’heightM rounds gb btn bluebtn’ value=’button’/>

不过还有个问题就是使用者不明白的短类名的由来，也就不会直接书写(需要查阅css文件)，不过现成的各个模块的示例可以在控制台直接查看代码并复制代码来使用。

框架的github地址: https://github.com/RainZhai/Rain-CSS-Framework

[caption id=”attachment_194” align=”alignnone” width=”697” caption=”rain css 框架首页”][/caption]

关于类名的设计的一点规律:

类名虽然简化了，但是还是很容易使用，如width-10(宽度100像素)简写成了w-10,而textAlignCenter(文本居中)则简写成了tac,很明显，类名简写成了每个单词的首字母，并且每个字母都为小写.部分示例代码如下:

.fn,.fontNormal{ font-style:normal;}
.fi,.fontItalic{ font-style:italic;}
.fo,.fontOblique{ font-style:oblique;}
.fv,.fontVariant{ font-variant:small-caps;}
.fwn,.fontWeightNormal{ font-weight:normal;}
.bord,.fontBord{ font-weight:bold;}
.strong{ font-weight:bold;}
.border,.fontBorder{ font-weight:bolder;}
.lighter,.fontLighter{ font-weight: lighter;}
.fsxxs,.fontsizeXxsmall{ font-size:xx-small;}
.fsxs,.fontsizeXsmall{ font-size: x-small;}
.fss,.fontsizeSmall{ font-size: small;}
.fsm,.fontsizeMedium{ font-size: medium;}
.fsl,.fontsizeLarge{ font-size: large;}
.fsxl,.fontsizeXlarge{ font-size: x-large;}
.fsxxl,.fontsizeXxlarge{ font-size: xx-large;}
.fs-1,.fontsize-1{ font-size: 1em;}