web前端规范-CSS的命名.doc

原则：整个项目的命名风格要统一，id说明特殊性，class说明普遍性。从模块重用和节约文件体积的角度看，建议id类应尽量减少使用。class类的命名向模块化发展。
命名风格：
常见的命名风格有：1.分隔线css-style(不推荐)；2.下划线css_style(次推荐)；3.驼峰式cssStyle(主推荐)。
没有强制一定用哪种风格，不过同个项目中最好只使用一种风格，除非想表达特殊作用的再用多种风格，但要写好注释说明。好的命名规范也能体现出语义化。
id和class：
什么时候用id，什么时候用class没有一个绝对的说法。这里只是提供一个参考。
对于页面的各个结构外层或者特殊部分（比如页面的布局，各个栏目），用id来说明这个区域是什么内容。对于页面中可重用的结构或者一些常用的从属结构（比如栏目中的标题，文章，列表等），用class来说明这个小块是什么，表现怎么样。
约定：搜索search不加bar修饰,比如左边搜索区域,命名为:searchL。以此类推,L(左边),R(右边),T(上方),B(下方)。不管任何模块,为避开css过多的命名名称,比如选项卡tab的标题区域,用hd命名,写法为：".tab.hd"所有模块,全部采用hd和bd模式。另外,用"Tb"代表表格的缩写，比如表单表格:formTb。所有css命名采用Java的命名规范,既是驼峰式的命名方式,比如"newsList"。大量模块使用雅虎的hd和bd命名思想（见‘CSS书写’部分），将内层的css类命名简化，减少起名字的次数。最好不要用id类定义html的模块外观，id类的唯一性比特殊。比如在两个div中，用了相同的id，js拿id交互便会出现问题。

常用的CSS命名主体模块布局命名解释css命名命名解释css命名页头header页尾footer标题区域hd主体区域bd容器container页面外围大包含块wrap栏目column或col侧栏sideBar左left右right中middle包裹上warpT右上rightT右下rightB中上midT中下midB其他模块布局商标logo导航nav搜索左边searchL搜索右边searchR公告notice内部导航innerNav路径导航pathNav工具栏toolBar日期栏dateBar收缩栏flexBar左容器containL右容器containR页脚信息footInfo分页page数据展现表格displayTb表单填写表格formTb表格无数据noDataTb导航分割线lineNav选项卡外容器tab选项卡标题hd(具体根据项目嵌套标签即可)选项卡内容bd(具体按照项目用bd嵌套)无边线表格noBorderTb左容器electL右容器electR列表项list图表graph时间文本框iptTime个人文本框iptPerson群组文本框iptGroup单选框iradio复选框iChkbox下拉列表/菜单iselect多行文本itxtArea文件域ifile页面主体mian子导航subNav下载download菜单menu广告banner热点新闻hot更多more图标ico子菜单subMenu搜索search友情链接fdlink版权copyRight滚动scroll标签页tab文章列表list提示信息msg技巧tips栏目标题title加入join指南guild服务service注册reg投票vote合作伙伴partner顶部搜索区域searchTop底部搜索区域searchBom左边搜索区域searchL右边搜索区域searchR字体大小(font-size:12px;)font12保存按钮btnSave返回按钮btnBack重置btnReset取消按钮btnCancel删除按钮btnDel前进按钮btnFord登录login打印按钮btnPrint刷新按钮btnFlush无效按钮btnInvalid导出按钮btnExport查询按钮btnSearchGo按钮btnGo导入按钮btnImport计算按钮btnCount边距padding10边缘margin10左边距(padding-left:10px)pl10右边距pr10左边缘(margin-left:10px)ml10右边缘mr10!
当我们采用下划线_方式命名的时候在Dreamweaver等工具中双击，即可全选命名。而采用分割线-命名时双击选取只能选中分割的一部分。

本文档来自宝来网按照行业从业经验编写，转载请注明：HYPERLINK"http://www.baolive.com"\t"_blank"宝来网