CSS命名规范重要性
1、为以后版本升级规范有一定好处,虽然达到兼容html5+css3.0浏览器还早,但是可以为div+css开发者来说可以先注意一下。
2、css命名规范可以节约团队开发时间。特别在团队合作开发网站项目中,大家规范的来制作一套共识的css命名,将节约开发时间及成本,如果开发项目中div+css开发者乱命名css,将给后来的程序员的解读带来不便。
3、css命名规范可为以后维护带来方便
样式文件命名:
主要的 master.css;
模块 module.css;
基本共用 base.css;
布局、版面 layout.css;
主题 themes.css
专栏 columns.css
文字 font.css
表单 forms.css
补丁 mend.css
打印 print.css
页面制作最重要的就是CSS,定义合理的CSS命名规范,可以大幅提高页面制作的效率和方便开发及相关人员修改编写。关于CSS的命名我们采用骆驼式命名法。
1.通用命名规则:
1) 所有ID或者class字母和数字之间用“_”连接,如: #col_1、#col_2
2) 所有ID或者class两个单词之间的链接采用骆驼式命名法,如: mianNav、footNav
3) 页面主体框架布局命名:Lay_1、Lay_2 、Lay_3
4) 栏目布局容器命名一律采用: col_1、col_2、col_3、col_4、col_N
5) 栏目标题块命名一律采用title。<div class="tit"><h4>标题</h4></div>
6) 页面所有图片区域全部采用:pic_1、pic_2、pic_3、pic_N
7) 页面文本列表区域全部采用: Lst_1、Lst_2、Lst_3、Lst_N
8) 页面上按钮采用:btn_1、btn_2、btn_3、btn_N
9) 广告区域:ad_1,ad_2,ad_3,ad_N
2. 主框架命名规则:
1) #header (页面头部) 2) #main (页面主体) 3) #footer (页面尾部)
3. 通用命名规则:
主 体:main
外 层:wrap
功能条:funcBar
主导航:mainNav
子导航:subNav
友情链接:friendLink
版 权:copyright
页 眉:header
页 脚:footer
标 题:title
主导航:mainNav
子菜单:subMenu
注 释:note
面包屑:breadcrumb
容 器:container
内 容:content
搜 索:search
登 陆:Login
当前状态:current
页头:header
标志:logo
侧栏:sidebar
广告:banner
导航:nav
子导航:subnav
菜单:menu
子菜单:submenu
搜索:search
滚动:scroll
页面主体:main
内容:content
标签页:tab
文章列表:list
信息:msg
提示技巧:tips
栏目标题:title
指南:guide
服务:service
热点:hot
新闻:news
下载:download
注册:reg(register)
状态:status
按钮:btn
投票:vote