CSS命名规范

【命名规范】

原则：结构清晰，简洁明了、突出语义化。

     意义：1，规范命名有助与----提升团队开发效率
               2，规范命名有助与----后期产品的维护
               3，规范命名有助与----后期的二次开发

【1】，文件夹、文件、选择器命名规范：

1， 使用【英文字母、数字、下划线】的组合形式，【首字符】不能是【数字】。不能包含【汉字、特殊字符、空格】。

                例如： images   、  img1  、 img_01

2， 统一使用【翻译英文】。尽量不要使用【拼音】或【拼音缩写】命名。-----注意：千万不要【英文和拼音】混合使用。

推荐使用：英文。

                例如：导航中的列表：  nav_lb

3，常用页面命名： 首页 index 新闻列表 news 发展历史 history

                联系我们 linkus   关于我们 aboutus   产品 product

【2】文档结构、ID命名与CLASS类命名规范

1，ID只能在一个文档页面中使用一次，是独一无二的元素

2，CLASS可以使用多次，多针对具有相同样式设定的一类元素。

3，当文档结构比较复杂，层次较深时，可以遵循：【区块名 + 模块名 + 功能名 + 元素或素材名 + 序列号名】命名原则，中间用【下划线】连接。

             例如：header_nav_list_img_01

4，多次重复使用的名称，在不同模块中一定要添加不同的前缀加以区分： 例如：header_list nav_list 、 aside_list

【注意】：当多人开发时，加上各自开发模块的名称前缀，即使内部使用了相同名称，也不会相互冲突。

                              例如： 1，通过模块标签来限定：   header .bg{   }

                                    2，通过设定类来限定：    .header_bg{ }

5，常用命名样例：

-----【页面结构】：

                    容器： container  /  wrap

                    页头：header       页面主体： main      侧边栏：sidebar    内容：content   
                       页尾：footer     栏目：column

------【导航】：

                    导航： nav      主导航   mainnav     子导航  subnav   
                    上下左右导航： topnav  、 bottomnav 、leftnav 、 rightnav

------【菜单】

                     菜单：menu          子菜单：submenu

------【标题】

                      标题：title

------【功能】

                       标志： logo    广告图：banner     登陆 : login    注册 ： reg     产品：products     博客 ： blog     

                       收索： search     收索框： search_input     状态：status     按钮  button/btn    滚动：scroll   滚动条：scrollbar

                       标签页： tab    文章列表：list     新闻 news    提示信息：msg/message   皮肤：skin

【3】图片命名规范

存放图片文件夹: img 或 image 或 images

【常用图片命名】 广告轮播图 banner 标志性图标 logo 普通图片 pic 背景图片 bg

图片列表 menu + 数字

         pic + 数字  

                   img + 数字

                          例如：pic1  或  pic_1  或 pic_01

                                 img1  或  img_1  或 img_01