命名原则： 原则1：前缀+后缀 应用名 + 标签功能 原则2：应用功能 > 布局功能 关于命名中的位置名：left,right,center,middle,top,bottom 如果该元素的主要用途就是定位，那么可以选择这几个词，非常明确。 如果该元素可以用功能名足够表达，则不使用定位名。 原则3：能给个id ，就给个id吧。 原则4：没有container概念 因为：html里都是一层套一层，大家都是container。 单词分隔符：减号 不采用任何驼峰命名法：原因：太长了，看不清。 不得采用任何下划线。原因：不对称，不好看。 大小写 全小写。原因：大写多了太吓人。 图片名的后缀命名
首先是用图片的视觉效果命名,然后再考虑下面的:
-icon.* 单个图标 -icons.* 多个图标 -button.* 单个button -buttons.* 多个button -logo.* LOGO -item.* 某一项 -page.* 整个页面的背景 -head.* 头部的背景 -tail.* 尾部的背景 -banner.* 条幅（多用于广告） -tab.* 标签盒的标签背景 -tabpanel.* 标签盒的标签主体背景 -l-t-corner 左上角 -r-t-corner 右上角 -l-b-corner 左下角 -r-b-corner 右下角 -l-border 左边框 -r-border 右边框 -t-border 上边框 -b-border 下边框 -text 图片型文字 -cover 封面图，一般用于新闻的图片，或首页的大中图 那hover的图呢？ hover的图一半与原图放在同一个图片文件中 用不用-bg 能用上述表达的，就不用bg,毕竟css里都是bg 常用css名 .button 普通button .text 普通正文 .link 普通链接 .portlet-box .portlet-head-box .portlet-body-box .portlet-title-box .portlet-icon-box 关于h1,h2,h3的使用 ???(还不确定） h1与h2尽量不使用 模块如果需要heading，用h3 常用ID名 #page-head-box #page-head-top-box #page-head-top-left-box #page-head-top-right-box #page-head-middle-box #page-head-middle-left-box #page-head-middle-center-box #page-head-middle-right-box #page-head-nav-box #page-head-nav-list #page-head-menu-box #page-head-menu-list #page-head-menu-home-item #page-head-menu-news-item #page-head-menu-about-item #page-menu-box #page-menu-home-item #page-menu-news-item #page-menu-about-item #page-body-box #page-body-left-box #page-body-center-box #page-body-right-box #news-portlet-box #faq-portlet-box #page-tail-box #article-box #arricle-title-box #article-info-box #article-body-box #last-articles-box #last-articles-list 一些混淆名词的约定，不使用缩写 pg page l left r right m middle mid middle c center btn button li list img image ico icon top head 当head已经被用过后用top center middle 水平用center,垂直用middle tail bottom 党tail已经被用过后用bottom 常用后缀规则 body -body div -box -head-box -body-box -tail-box -left-box -right-box -center-box -middle-box -portlet-box -image-box -icon-box -tools-box -buttons-box -sidebar-box -nav-box -search-box -content-box -msg-box -title-box -tip-box -status-box ul -menu -list li -item -menu-item -listitem h1,h2,h3,h4,h5 -heading span,label -label -title-label a -link -button image -image -icon -button button,input[type="button"] -button form -form input[type="text"] -textinput input[type=checkbox] -check input[type=radio] -radio select -select option -option
相关资源：css的常用命名规则