参考网易云的命名规范

想着最近做的微信公众号,维护起来那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等)

一会儿要开始痛苦的挣扎了,心好痛。不知道会不会

你可能感兴趣的