前端规范文档

一、样式分类
按照CSS的性质和用途，将CSS文件分成“公共型样式”、“特殊型样式”、“皮肤型样式”，并以此顺序引用。
公共型样式：
包括了以下几个部分：“标签的重置和设置默认值”、“统一调用背景图和清除浮动或其他需统一处理的长样式”、“网站通用布局”、“通用模块和其扩展”、“元件和其扩展”、“功能类样式”、“皮肤类样式”。——reset.css(neat.css) 和 global.css
特殊型样式：
首页——index.css
内页——subpage.css
当某个栏目或页面的样式与网站整体差异较大或者维护率较高时，可以独立引用一个样式：“特殊的布局、模块和元件及扩展”、“特殊的功能、颜色和背景”，也可以是某个大型控件或模块的独立样式。
皮肤型样式：
如果产品需要换肤功能，那么我们需要将颜色、背景等抽离出来放在这里。——skin.css

二、命名规范
1.代码
1）subpage.css中包含每个单独页面样式名称
2）页面新增样式内容时，增加到对应页面样式之后，标注清楚时间、功能等备注信息
3) 组合命名规则:[页面名称]- [元素类型]-[元素作用/内容]。 如：
新闻页中的搜索: news-btn-search
登录页中的表单: login-form-login
新闻列表的标题: newsList-list-title
示例：
. news-title
. news-newlist{ list-style:none;}
. news-newlist li{height: 160px;}
. news-newlist li img{width: 167px; height: 122px; margin:20px 25px 20px 10px; float: left;}
. news-newlist li div{float: left;}
4)类名以减号进行分隔，例：news-title。如果某相功能需两个以上单词则以驼峰命名法进行命名，例：新闻列表页中的新闻标题 .newsList-new-title