### 编码 在 css 首行设置文件编码为 UTF-8。 ```css @charset "UTF-8"; ``` ### class 命名 * class 名称应当尽可能短，并且意义明确。使用有意义的名称，使用有组织的或目的明确的名称，不要使用表现形式的名称。 * 使用中划线`（-）`分隔 `class `中的单词。虽然它很不方便的让你双击选择，但是它可以增强理解性。另外属性选择器`[attribute|=value]` 也能识别中划线`（-）`，所以最好坚持使用中划线作为分隔符。 * 基于最近的父 `class` 或基本 `class` 作为新 `class` 的前缀。 * 使用 `.js-*` 的 `class` 来标识行为（与样式相对），并且不要将这些 `class` 写有任何的样式。 #### 不推荐 ```css .red {color:red;} /*无明确含义*/ .slide_hd {} .header .logo {} ``` #### 推荐 ```css .important {color:red;} .slide-hd {} .header-logo {} ``` ### 减少选择器的嵌套 #### 不推荐 ```css .main ul li a span {} ``` #### 推荐 ```css .main span {} ``` ### 优化选择器 当构建选择器时应该使用清晰，准确和有语义的 `class` 名。尽量减少使用标签选择器。如果你只关心你的 `class `名，而不是你的代码元素，这样会更容易维护。 #### 不推荐 ```css div.content > header.content-header > h2.title { font-size: 2em; } ``` #### 推荐 ```css .content > .content-header > .title { font-size: 2em; } ``` ### 省略 0 后面的单位 ### 使用 16 进制表示颜色值 css 中的颜色值可以使用 16 进制来表示，在可能的情况下，可以进行缩写，比如：#fff、#000。 ### 媒体查询的位置 将媒体查询放在尽可能相关规则的附近。不要将他们打包放在一个单一样式文件中或者放在文档底部。如果你把他们分开了，将来只会被大家遗忘。 ### 带前缀的属性 当使用特定厂商的带有前缀的属性时，通过缩进的方式，让每个属性的值在垂直方向对齐，这样便于多行编辑。 ```css .selector { -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15); box-shadow: 0 1px 2px rgba(0,0,0,.15); } ``` ### 声明结束 为了保证一致性和可扩展性，每个声明应该用分号结束。 ### 多行规则声明 为了易读性和便于快速编辑，统一将语句分为多行，即使该样式只包含一条声明 ### 中文字体引用 css 中文字体可以用 unicode 格式来表示，比如`“宋体”`可以用 `\5B8B\4F53` 来表示。 ### 对于 sass 的嵌套 在 sass 中你可以嵌套选择器，这可以使代码变得更清洁和可读。嵌套所有的选择器，但尽量避免嵌套没有任何内容的选择器。 如果你需要指定一些子元素的样式属性，而父元素将不什么样式属性，可以使用常规的 css 选择器链，这将防止您的脚本看起来过于复杂。 当使用 sass 的嵌套功能的时候，重要的是有一个明确的嵌套顺序。 * 当前选择器的 @extend 和 @include * 当前选择器的样式属性 * 父级选择器的伪类选择器（:first-letter，:hover，:active 等等） * 伪类元素（:before 和 :after） * 父级选择器的声明样式（.selected，.active 等等） * 用 sass 的上下文媒体查询 * 子选择器作为最后的部分 #### 推荐 ```css .test { @extend %clearfix; color:#ccc; &:hover { color:#000; } &:before { border:1px solid #eee; content:""; } &.active { color:#f00; &:hover { color:#ff0; } } @media screen and (max-width: 640px) { display:block; font-size:2em; } > .title { font-size:1.2em; } } ``` <p class="over">Over!</p>