缩进
- 使用 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
