css命名规范

下面是css的命名规范:

1.全部使用小写,不缩写,多单词用一横杆隔开,例如“team-culture-title”;

2.使用设计文档提供的功能列表+页面结构来给idclass命名;

3.准确使用idclass,一个页面中id只有唯一的一个,而class是可以重复出现的,也是是说id是控制唯一对应的一个节点的性质,class控制有相同性质的节点。

4.creator项目的页面结构(注意idclass的命名):

css命名规范_第1张图片

5.写css选择器的时候,要写完整筛选,不要就“.img”,要把父节点写上,防止个部分相互影响。例如:

css命名规范_第2张图片

6.常用的部分命名:

总体:

头: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 
标签页:tab 
文章列表:list 
提示信息:msg 
小技巧:tips 
栏目标题:title 
加入:joinus 
指南:guild 
服务:service 
注册:regsiter 
状态态:status 
投票:vote 
合作伙伴:partner 

页面结构:

容器: container 
页头:header 
内容:content/container 
页面主体:main 
页尾:footer 
导航:nav 
侧栏:sidebar 
栏目:column 
页面外围控制整体布局宽度:wrapper 
左右中:left right center 

导航 :

导航:nav 
主导航:mainbav 
子导航:subnav 
顶导航:topnav 
边导航:sidebar 
左导航:leftsidebar 
右导航:rightsidebar 
菜单:menu 
子菜单:submenu 
标题: title 
摘要: summary 

功能: 


标志:logo 
广告:banner 
登陆:login 
登录条:loginbar 
注册:regsiter 
搜索:search 
功能区:shop 
标题:title 
加入:joinus 
状态:status 
按钮:btn 
滚动:scroll 
标签页:tab 
文章列表:list 
提示信息:msg 
当前的: current 
小技巧:tips 
图标: icon 
注释:note 
指南:guild 
服务:service 
热点:hot 
新闻:news 
下载:download 
投票:vote 
合作伙伴:partner 
友情链接:link 
版权:copyright 

你可能感兴趣的:(css命名规范)