css编码规范

缩进

• 使用 4 个空格做为一个缩进层级，不允许使用 2 个空格 或 tab 字符。

.selector {
    margin: 0;
    padding: 0;
}

属性

• 属性定义必须另起一行。

/* good */
.selector {
    margin: 0;
    padding: 0;
}
/* bad */
.selector { margin: 0; padding: 0; }

• 属性选择器中的值必须用双引号包围。

/* good */
input[name="juliet"] {
    voice-family: "Vivien Leigh", victoria, female;
}
/* bad */
input[name='juliet'] {
    voice-family: "Vivien Leigh", victoria, female;
}

• 属性定义后必须以分号结尾。

/* good */
.selector {
    margin: 0;
}
/* bad */
.selector {
    margin: 0
}

选择器

• 为选择器分组时，将单独的选择器单独放在一行

/* good */
.post,
.page,
.comment {
    line-height: 1.5;
}
/* bad */
.post, .page, .comment {
    line-height: 1.5;
}

• 如无必要，不得为 id、class 选择器添加类型选择器进行限定,在性能和维护性上，都有一定的影响。

/* good */
#error,
.danger-message {
    font-color: #c00;
}
/* bad */
dialog#error,
p.danger-message {
    font-color: #c00;
}

• 尽量减少直接使用标签选择器

/* good */
.nav{ color:#ddd; }
/* bad*/
nav{ color:#ddd; }

• 选择器的嵌套层级应不大于 3 级

/* good */
#username .inp{}
.comment .avatar {}
/* bad */
.page .header .login #username input {}
.comment div * {}

属性缩写

• 在可以使用缩写的情况下，尽量使用属性缩写。
  使用 border / margin / padding 等缩写时，应注意隐含值对实际数值的影响

/* good */
.post {
    font: 12px/1.5 arial, sans-serif;
}
/* bad */
.post {
    font-family: arial, sans-serif;
    font-size: 12px;
    line-height: 1.5;
}

• 属性书写顺序
  同一 rule set 下的属性在书写时，应按功能进行分组，并以 Formatting Model（布局方式、位置） > Box Model（尺寸） > Typographic（文本相关） > Visual（视觉效果） 的顺序书写，以提高代码的可读性。
  1.Formatting Model 相关属性包括：position / top / right / bottom / left / float / display / overflow 等
  2.Box Model 相关属性包括：border / margin / padding / width / height 等
  3.Typographic 相关属性包括：font / line-height / text-align / word-wrap 等
  4.Visual 相关属性包括：background / color / transition / list-style 等

.sidebar {
    /* formatting model: positioning schemes / offsets / z-indexes / display / ...  */
    position: absolute;
    top: 50px;
    left: 0;
    overflow-x: hidden;

    /* box model: sizes / margins / paddings / borders / ...  */
    width: 200px;
    padding: 5px;
    border: 1px solid #ddd;

    /* typographic: font / aligns / text styles / ... */
    font-size: 14px;
    line-height: 20px;

    /* visual: colors / shadows / gradients / ... */
    background: #f5f5f5;
    color: #333;
    -webkit-transition: color 1s;
            transition: color 1s;
}

文本

• 中文网站默认字体微软雅黑，英文网站默认Arial,在进行多语言版本网站制作时注意修改body中的字体。

/*中文*/
body{ font-family:"Microsoft YaHei"; }
/*英文*/
body{ font-family:Arial; }

• 需要在 Windows 平台显示的中文内，无衬线字族不小于13px 衬线字族不小于12px。（企业站默认13px）
• 行高
  line-height 在定义文本段落时，应尽量使用em 相对单位。
  全局默认行高1.5

注释

代码是由人编写并维护的。请确保你的代码能够自描述、注释良好并且易于他人理解。

• 请在样式表头部添加注释，填写开发者姓名检索，方便后期调整对号入座

/*
 * author: gjx
 * date: 2017-02-16
 */

• 功能区块，页面添加注释

/*产品详情*/
/*产品列表*/
/*新闻详情*/
/*新闻列表*/

• 后期调整样式表添加修改日期 和修改人注释

/*fix on 2017-02-16 by gjx*/
.nav { width:200px; }

• 多人协作时，要加各自姓名注释，且注意class命名冲突问题。

class 命名

• 避免过度任意的简写。.btn 代表 button，但是 .s 不能表达任何意思。
• class 名称应当尽可能短，并且意义明确。形式以下划线链接单词，单词应 页面模块功能或位置 news_top ,news_left
• id 小驼峰 newTop

CSS样式适度分离----

.mb10{ margin-bottom:10px;}
.pb10{ padding-bottom:10px;}

企业站常见命名可参考

wrapper 页面外围控制整体布局宽度
container或#content  容器,用于最外层
layout  布局
head, #header   页头部分
foot, #footer   页脚部分
nav 主导航
sub_nav 二级导航
menu    菜单
sub_menu    子菜单
side_bar    侧栏
main    页面主体
tag 标签
msg message 提示信息
tips    小技巧
vote    投票
friendlink  友情连接
title   标题
summary 摘要
loginbar    登录条
search_input    搜索输入框
hot 热门热点
search  搜索
search_output   搜索输出和搜索结果相似
search_bar  搜索条
search_results  搜索结果
copyright   版权信息
branding    商标
logo    网站LOGO标志
siteinfo    网站信息
siteinfo_legal  法律声明
siteinfo_credits    信誉
joinus  加入我们
partner 合作伙伴
service 服务
regsiter    注册
arr/arrow   箭头
guild   指南
sitemap 网站地图
list    列表
home_page   首页
sub_page    二级页面子页面
tool, toolbar   工具条
drop    下拉
dorp_menu   下拉菜单
status  状态
scroll  滚动
tab 标签页
news    新闻
news_detail 新闻详情
download    下载
banner  首页banner
channel_ban  内页banner