[分享]CSS命名规范,CSS常用命名规则

2014-09-21PHP1910

CSS命名规范,CSS常用命名规则


一、CSS书写顺序

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等)


css-written-order


二、CSS书写规范 

1.使用CSS缩写属性 

CSS有些属性是可以缩写的,比如padding,margin,font等等,这样精简代码同时又能提高用户的阅读体验。

abbreviation


2.去掉小数点前的“0”

del-zero


3.简写命名

很多用户都喜欢简写类名,但前提是要让人看懂你的命名才能简写哦!


name


4.16进制颜色代码缩写

有些颜色代码是可以缩写的,我们就尽量缩写吧,提高用户体验为主。


color-abb


5连字符CSS选择器命名规范

1).长名称或词组可以使用中横线来为选择器命名。


2).不建议使用“_”下划线来命名CSS选择器,为什么呢?


输入的时候少按一个shift键; 浏览器兼容问题 (比如使用_tips的选择器命名,在IE6是无效的) 能良好区分JavaScript变量命名(JS变量命名是用“_”)

underline


6.不要随意使用id

id在JS是唯一的,不能多次使用,而使用class类选择器却可以重复使用,另外id的优先级优先与class,所以id应该按需使用,而不能滥用。


css-id


7.为选择器添加状态前缀

有时候可以给选择器添加一个表示状态的前缀,让语义更明了,比如下图是添加了“.is-”前缀。


status-select


三、CSS命名规范(规则)

常用的CSS命名规则

头: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


注释的写法:

/* Header */ 

内容区 

/* End Header */


id的命名:

1)页面结构


容器: container 

页头:header 

内容:content/container 

页面主体:main 

页尾:footer 

导航:nav 

侧栏:sidebar 

栏目:column 

页面外围控制整体佈局宽度:wrapper 

左右中:left right center


(2)导航


导航:nav 

主导航:mainnav 

子导航:subnav 

顶导航:topnav 

边导航:sidebar 

左导航:leftsidebar 

右导航:rightsidebar 

菜单:menu 

子菜单:submenu 

标题: title 

摘要: summary


(3)功能


标志:logo 

广告:banner 

登陆:login 

登录条:loginbar 

注册:register 

搜索:search 

功能区:shop 

标题:title 

加入:joinus 

状态:status 

按钮:btn 

滚动:scroll 

标籤页:tab 

文章列表:list 

提示信息:msg 

当前的: current 

小技巧:tips 

图标: icon 

注释:note 

指南:guild 

服务:service 

热点:hot 

新闻:news 

下载:download 

投票:vote 

合作伙伴:partner 

友情链接:link 

版权:copyright


四、注意事项::

1.一律小写; 

2.尽量用英文; 

3.尽量不加中横线和下划线; 

4.尽量不缩写,除非一看就明白的单词。


五、CSS样式表文件命名

主要的 master.css 

模块 module.css 

基本共用 base.css 

布局、版面 layout.css 

主题 themes.css 

专栏 columns.css 

文字 font.css 

表单 forms.css 

补丁 mend.css 

打印 print.css

  • 相关文章
  • 查看评论:(0)
【已经有0位大神发现了看法】

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

分享:

支付宝

微信