无标题文章

# CSS 编码规范

此为前端开发团队遵循和约定的 CSS 编码规范,意在提高代码的规范性和可维护性。

## 代码风格

*代码应该符合 CSS 语法有效性,可以使用[W3C CSS validator](http://jigsaw.w3.org/css-validator/validator.html.zh-cn) 工具来验证。

*ID 和 Class 应该按照元素功能命名,不应该按照元素表现命名,命名应该含义清晰。

```css

/* bad: 含义不清 */

#yee-1901 {}

/* bad: 表现化 */

.button-green {}

.clear {}

/* good: 功能化 */

#gallery {}

#login {}

.video {}

```

*ID 和 Class 命名应该在保持含义清晰的前提下尽可能简短。

```css

/* bad */

#navigation {}

.atr {}

/* good */

#nav {}

.author {}

```

*ID 和 Class 命名中单词应该全部小写,单词之间使用`-`作为分隔符。

```css

/* bad */

#videoId {}

.demoimage {}

.error_status {}

/* good */

#video-id {}

.ads-sample {}

```

*不能「MUST NOT」把 ID 和 Class 选择符作为类型选择符的限定符,这样做没必要,反而还影响性能。

```css

/* bad */

ul#example {}

div.error {}

/* good */

#example {}

.error {}

```

*CSS 属性应该尽可能使用简化方式书写,需注意简写时默认值的副作用,详细参考[Shorthand properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties)。

```css

/* bad */

border-top-style: none;

font-family: palatino, georgia, serif;

font-size: 100%;

line-height: 1.6;

padding-bottom: 2em;

padding-left: 1em;

padding-right: 1em;

padding-top: 0;

/* good */

border-top: 0;

font: 100%/1.6palatino, georgia, serif;

padding: 0 1em 2em;

```

*CSS 属性中的`0`值不应该带单位。

```css

/* bad */

margin: 0px;

padding: 0px;

/* good */

margin: 0;

padding: 0;

```

*CSS 属性中数值介于-1到1之间的小数应该忽略开头的`0`。

```css

/* bad */

font-size: 0.8em;

/* good */

font-size:.8em;

```

*CSS 的色值应该尽可能使用简化写法。

```css

/* bad */

color:#eebbcc;

/* good */

color:#ebc;

```

## 组织格式

*必须采用 4 个空格为一次缩进。

*CSS 属性声明应该按字母升序排列。

```css

/* good */

background: fuchsia;

border: 1px solid;

-moz-border-radius: 4px;

-webkit-border-radius: 4px;

border-radius: 4px;

color: black;

text-align: center;

text-indent: 2em;

```

*CSS 每个代码块相对于父代码库必须有缩进。

```css

/*good*/

@mediascreen,projection{

html{

background:#fff;

color:#444;

}

}

```

*CSS 属性声明必须以分号结尾。

*CSS 属性名冒号后必须有一个空格。

```css

/* bad */

color:#eebbcc;

/* good */

color:#ebc;

```

*CSS 中的属性名建议按照字母顺序排列,可以使用 Sublime Text 的 F5 命令来自动格式化。

*最后的选择符与`{`之间必须有一个空格。

```css

/* bad */

#video{

margin-top:1em;

}

.author

{

margin-top:1em;

}

/* good */

#video {

margin-top:1em;

}

```

*多个并列的选择符必须换行。

```css

/* bad */

a:focus, a:active{

position:relative;top:1px;

}

/* good */

h1,

h2,

h3{

font-weight:normal;

line-height:1.2;

}

```

*CSS 规则之间必须以空白行分隔。

```css

/* good */

html{

background:#fff;

}

body{

margin:auto;

width:50%;

}

```

*CSS 属性值中所有使用到引号的位置必须使用单引号。

```css

/* bad */

@importurl("//www.google.com/css/maia.css");

html{

font-family:"open sans",arial,sans-serif;

}

/* good */

@importurl('//www.google.com/css/maia.css');

html{

font-family:'open sans',arial,sans-serif;

}

```

## 代码注释

*CSS规则段落之前应该添加注释说明。

```css

/* good */

/* Header */

#adw-header {}

/* Footer */

#adw-footer {}

/* Gallery */

.adw-gallery {}

```

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,...
    kiddings阅读 3,195评论 0 11
  • vue插件介绍 2. 插件分类 主要注册与绑定机制如下: export default{install(Vue...
    Osmond_wang阅读 339评论 0 1
  • 给你们介绍一个我的朋友,她是个平凡的不能再平凡的姑娘,名字也是那么平凡——小凡。 她真的非常普通非常平凡啊,普通到...
    心源66阅读 458评论 2 6
  • 天堂向左,悬疑向右 我是一个为写作而生的人。 记忆中的第一天,是八十年代的某个下午,上海市闸北区天潼路799弄59...
    蔡骏阅读 5,950评论 125 301
  • 作者担任大学教职及企管顾问多年,敢说现时认为风水是迷信的人,都是没有研究过风水的人,没有资格谈风水理论。 ...
    北石桥阅读 586评论 0 0