WEB标准化当前位置 / 首页  /  文章中心  /  WEB标准化

css样式名规范命名建议

上一篇下一篇artery2009-12-0810271

在写CSS的时候,经常为一些名字而发愁,比如说菜单后面的背景要用什么词来表示呢?大家都知道,菜单一般用menu来表示,那么菜单后面的背景我会用menubg,CSS里就写#menubg{…}。

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

(二)注释的写法:

 /*Footer*/
内容区
/*EndFooter*/

(三)id的命名:

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

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

(3)功能
标志: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

(四)class的命名:

(1)颜色:使用颜色的名称或者16进制代码。如
.red{color:red;}
.f60{color:#f60;}
.ff8600{color:#ff8600;}

(2)字体大小,直接使用"font+字体大小"作为名称。如
.font12px{font-size:12px;}
.font9pt{font-size:9pt;}

(3)对齐样式,使用对齐目标的英文名称。如
.left{float:left;}
.bottom{float:bottom;}

(4)标题栏样式,使用"类别+功能"的方式命名。如
.barnews{}
.barproduct{}

注意事项:
1.一律小写;
2.尽量用英文;
3.不加中杠和下划线;
4.尽量不缩写,除非一看就明白的单词。

主要的master.css
模块module.css
基本共用base.css
布局,版面layout.css
主题themes.css
专栏columns.css
文字font.css
表单forms.css
补丁mend.css
打印print.css

上一篇下一篇
发表评论 共有 条评论
用户名(游客选填): 密码: 匿名发表   验证码:
 

[ ARTERY.cn 随机图赏 ]

男子裸身破冰救爱犬
喵星人玩滑板,超帅!!
iPhone6分辨率与适配
移动设计,交互性为王
设计趋势:网页设计中的幽灵按钮
解决汉堡图标问题