前端CSS编码规范

这是我参与更文挑战的第18天，活动详情查看：更文挑战

CSS编码规范

语法

• 使用4个空格的 soft tabs — 这是保证代码在各种环境下显示一致的唯一方式。
• 使用组合选择器时，保持每个独立的选择器占用一行。
• 为了代码的易读性，在每个声明的左括号前增加一个空格。
• 声明块的右括号应该另起一行。
• 每条声明 : 后应该插入一个空格。每条声明应该只占用一行来保证错误报告更加准确。
• 所有声明应该以分号结尾。虽然最后一条声明后的分号是可选的，但是如果没有，你的代码会更容易出错。
• 逗号分隔的取值，都应该在逗号之后增加一个空格。比如说box-shadow
• 不要在颜色值 rgb() rgba() hsl() hsla() 和 rect() 中增加空格，并且不要带有取值前面不必要的 0 (比如，使用 .5 替代 0.5)
• 所有的十六进制值都应该使用小写字母，例如 #fff 。因为小写字母有更多样的外形，在浏览文档时，他们能够更轻松的被区分开来。
• 尽可能使用短的十六进制数值，例如使用 #fff 替代 #ffffff 。
• 为选择器中的属性取值添加引号，例如 input[type=”text”] 。 他们只在某些情况下可有可无，所以都使用引号可以增加一致性。
• 不要为 0 指明单位，比如使用 margin: 0; 而不是 margin: 0px;

/* Bad CSS */ 
.selector, .selector-secondary, .selector[type=text] { 
    margin: 0px 0px 15px; 
    padding: 15px; 
    background-color: rgba(0, 0, 0, 0.5); 
    box-shadow: 0 1px 2px #CCC, inset 0 1px 0 #FFFFFF 
}
/* Good CSS */ 
.selector, 
.selector-secondary, // 保持每个独立的选择器占用一行
.selector[type="text"] {  // 在每个声明的左括号前增加一个空格
    margin-bottom: 15px; 
    padding: 15px; 
    background-color: rgba(0,0,0,.5); // 不要在颜色值中增加空格
    box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;  // 十六进制值都应该使用小写字母，尽可能使用短的十六进制数值
} // 声明块的右括号应该另起一行
复制代码

明顺序 （建议）不强制

1. Positioning
2. Box model 盒模型
3. Typographic 排版
4. Visual 外观

Positioning 处在第一位，因为他可以使一个元素脱离正常文本流，并且覆盖盒模型相关的样式。盒模型紧跟其后，因为他决定了一个组件的大小和位置。
其他属性只在组件内部起作用或者不会对前面两种情况的结果产生影响，所以他们排在后 面。
示例：

declaration-order { 
    /* Positioning */ 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    z-index: 100; 
    /* Box-model */ 
    display: block; 
    float: right; 
    width: 100px; 
    height: 100px; 
    /* Typography */ 
    font: normal 13px "Helvetica Neue", sans-serif; 
    line-height: 1.5; 
    color: #333; 
    text-align: center; 
    /* Visual */ 
    background-color: #f5f5f5; 
    border: 1px solid #e5e5e5; 
    border-radius: 3px; 
    /* Misc */ 
    opacity: 1; 
}
复制代码

谋体查询位置

尽量将媒体查询的位置靠近他们相关的规则。不要将他们一起放到一个独立的样式文件中，
或者丢在文档的最底部。

.element { ... } 
.element-avatar { ... } 
.element-selected { ... } 
@media (min-width: 480px) { 
    .element { ...} 
    .element-avatar { ... } 
    .element-selected { ... } 
}
复制代码

选择器

• 使用 class 而不是通用元素标签来优化渲染性能。
• 避免在经常出现的组件中使用一些属性选择器 (例如， [class^=”…”] )。浏览器性能会受到这些情况的影响。
• 减少选择器的长度，每个组合选择器选择器的条目应该尽量控制在 3 个以内。
• 只在必要的情况下使用后代选择器 (例如，没有使用带前缀 class 的情况).

示例：

/* Bad example */ 
span { ... } 
.page-container #stream .stream-item .tweet .tweet-header .username { ... } 
.avatar { ... }

/* Good example */ 
.avatar { ... } 
.tweet-header .username { ... } 
.tweet .avatar { ... }
复制代码