想着最近做的微信公众号,维护起来那class,简直惨不忍睹,应该很难找到吧,今天准备花心血进行一番大改动 不知道会持续多久,哎,想想就头疼。在领导的推荐下,准备参照网易云的规范,好好对命名进行规范一下,参照的具体地址http://nec.netease.com/standard/css-sort.html;
一,大的类别区分
公共型样式(通用布局,通用组件和扩展);
特殊型样式(与整体差异性较大的时候,设置的单独样式);
皮肤型样式(这里感觉用处不大,也没那个必要再去引入一个文件);
因此我选择上述2个区分样式作为自己的css库来分类;一会还得找找最新的消除浏览器差异的样式文件o(╥﹏╥)o;
二,命名规范
在上述公共型样式中 选择以html文件名字开头大写字母(区分不同的名字差异)并使用连字符连接,在参考了他们的命名规则以后,我自己选择以以下方式命名(大小写无区别)
.si-headder-nav-div.class-xxx
采取的是定位的方式 例如在single.html和segment.html 选择定位sihtml文件,然后选择header部位然后定位到header里面 calss为nav的元素下面 继续定位到nav下面的div元素 class为xxx的元素
#常用命名规则
头:header
内容:content/container
尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体佈局宽度:wrapper
左右中:left right center
登录条:loginbar
标志:logo
广告:banner
页面主体:main
热点:hot
新闻:news
下载:download
子导航:subnav
菜单:menu
子菜单:submenu
搜索:search
友情链接:friendlink
页脚:footer
版权:copyright
滚动:scroll
内容:content
标签:tags
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
加入:joinus
指南:guide
服务:service
注册:regsiter
状态:status
投票:vote
合作伙伴:partner
三,书写顺序
1,位置属性(position, top, right, z-index, display, float等)
2,大小(width, height, padding, margin)
3,文字系列(font, line-height, letter-spacing, color- text-align等)
4,背景(background, border等)
5,其他(animation, transition等)
一会儿要开始痛苦的挣扎了,心好痛。不知道会不会