Skip to Content
HTML/CSSCSS

CSS

CSS 风格规则

CSS 有效性(CSS Validity)

尽可能使用有效的 CSS。

除非处理 CSS 验证器的 bug 或需要专有语法，否则使用有效的 CSS 代码。

使用诸如 W3C CSS 验证器  之类的工具进行测试。

使用有效的 CSS 是一个可衡量的基线质量指标，它可以帮助发现可能无效且可以移除的 CSS 代码，并确保正确使用 CSS。

类命名(Class Naming)

使用有意义或通用的类名。

不要使用表现性的或晦涩的名称，始终使用能反映相关元素用途的类名，或者使用通用名称。

应优先使用具体且能反映元素用途的名称，因为它们最易理解且最不容易变化。

通用名称只是对那些没有特殊含义或与同级元素没有区别的元素的备选方案。它们通常用作”辅助工具(helpers)”。

使用功能性或通用名称可以降低不必要的文档或模板更改的概率。

/* 不推荐：无意义 */
.yee-1901 {}
 
/* 不推荐：表现性的 */
.button-green {}
.clear {}
/* 推荐：具体的 */
.gallery {}
.login {}
.video {}
 
/* 推荐：通用的 */
.aux {}
.alt {}

类名风格(Class Name Style)

类名应尽可能短，但应足够长以表达含义。

尝试在尽可能简洁的同时传达类的含义。

这样使用类名有助于保持可接受的可理解性和代码效率。

/* 不推荐 */
.navigation {}
.atr {}
/* 推荐 */
.nav {}
.author {}

类名分隔符(Class Name Delimiters)

类名中的单词使用连字符分隔。

选择器中的单词和缩写之间不要使用连字符以外的任何字符（包括不使用任何字符）进行连接，以提高可理解性和可扫描性。

/* 不推荐：没有分隔 "demo" 和 "image" */
.demoimage {}
 
/* 不推荐：使用了下划线而非连字符 */
.error_status {}
/* 推荐 */
.video-id {}
.ads-sample {}

前缀(Prefixes)

为选择器添加应用特定的前缀（可选）。

在大型项目中，以及用于嵌入其他项目或外部网站的代码中，为类名使用前缀（作为命名空间）。使用简短、唯一的标识符，后跟连字符。

使用命名空间有助于防止命名冲突，并可以使维护更加容易，例如在搜索和替换操作中。

.adw-help {} /* AdWords */
.maia-note {} /* Maia */

类型选择器(Type Selectors)

避免使用类型选择器限定类名。

除非必要（例如辅助类），否则不要将元素名称与类名一起使用。

避免不必要的祖先选择器对性能 有益。

/* 不推荐 */
ul.example {}
div.error {}
/* 推荐 */
.example {}
.error {}

ID 选择器(ID Selectors)

避免使用 ID 选择器。

ID 属性在整个页面中应该是唯一的，但当页面包含由许多不同工程师开发的众多组件时，很难保证这一点。在所有情况下都应优先使用类选择器。

/* 不推荐 */
#example {}
/* 推荐 */
.example {}

简写属性(Shorthand Properties)

尽可能使用简写属性。

CSS 提供了多种 简写  属性（如 font），应尽可能使用，即使只需要显式设置一个值。

使用简写属性有利于代码效率和可理解性。

/* 不推荐 */
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;
/* 推荐 */
border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;

0 和单位

值为”0”时省略单位，除非有要求。

除非必须，否则不要在 0 值后面使用单位。

flex: 0px; /* 此 flex-basis 分量需要单位。 */
flex: 1 1 0px; /* 没有单位不会产生歧义，但在 IE11 中需要。 */
margin: 0;
padding: 0;

前导 0

始终在值中包含前导”0”。

在 -1 和 1 之间的值或长度前加上 0。

font-size: 0.8em;

十六进制表示法(Hexadecimal Notation)

尽可能使用 3 个字符的十六进制表示法。

对于允许使用的颜色值，3 个字符的十六进制表示法更短、更简洁。

/* 不推荐 */
color: #eebbcc;
/* 推荐 */
color: #ebc;

!important 声明

避免使用 !important 声明。

这些声明会破坏 CSS 的自然层叠机制，使样式的推理和组合变得困难。请使用选择器优先级(Specificity) 来覆盖属性。

/* 不推荐 */
.example {
  font-weight: bold !important;
}
/* 推荐 */
.example {
  font-weight: bold;
}

Hacks

避免使用用户代理检测以及 CSS “hack”——首先尝试其他方法。

通过用户代理检测或特殊的 CSS 过滤器、变通方法和 hack 来解决样式差异是很诱人的。但这两种方法都应作为最后手段，以保持高效且可管理的代码库。换句话说，放任检测和 hack 将在长期损害项目，因为项目往往会走阻力最小的路。也就是说，允许并且使检测和 hack 变得容易意味着会更频繁地使用它们——而过于频繁就是太频繁了。

CSS 格式规则

声明顺序(Declaration Order)

按字母顺序排列声明（可选）。

在项目内保持一致的声明排序。在缺乏工具来自动化和强制执行一致排序的情况下，考虑按字母顺序排列声明，以便以一种易于学习、记忆和手动维护的方式实现一致的代码。

排序时忽略浏览器厂商前缀。但是，同一 CSS 属性的多个厂商前缀之间应保持排序（例如 -moz 前缀在 -webkit 之前）。

background: fuchsia;
border: 1px solid;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: black;
text-align: center;
text-indent: 2em;

块内容缩进(Block Content Indentation)

缩进所有块内容。

缩进所有块内容 ，即规则中的规则以及声明，以体现层次结构并提高可理解性。

@media screen, projection {
 
  html {
    background: #fff;
    color: #444;
  }
 
}

声明结束(Declaration Stops)

每个声明后都使用分号。

出于一致性和可扩展性的考虑，每个声明都以分号结束。

/* 不推荐 */
.test {
  display: block;
  height: 100px
}
/* 推荐 */
.test {
  display: block;
  height: 100px;
}

属性名结束(Property Name Stops)

在属性名的冒号后使用一个空格。

出于一致性的考虑，始终在属性和值之间使用一个空格（但属性和冒号之间没有空格）。

/* 不推荐 */
h3 {
  font-weight:bold;
}
/* 推荐 */
h3 {
  font-weight: bold;
}

声明块分隔(Declaration Block Separation)

在最后一个选择器和声明块之间使用一个空格。

始终在最后一个选择器和开始声明块 的左花括号之间使用一个空格。

左花括号应与给定规则的最后一个选择器在同一行。

/* 不推荐：缺少空格 */
.video{
  margin-top: 1em;
}
 
/* 不推荐：不必要的换行 */
.video
{
  margin-top: 1em;
}
/* 推荐 */
.video {
  margin-top: 1em;
}

选择器和声明分隔(Selector and Declaration Separation)

选择器和声明之间用新行分隔。

每个选择器和声明都另起一行。

/* 不推荐 */
a:focus, a:active {
  position: relative; top: 1px;
}
/* 推荐 */
h1,
h2,
h3 {
  font-weight: normal;
  line-height: 1.2;
}

规则分隔(Rule Separation)

规则之间用新行分隔。

始终在规则之间放置一个空行（两个换行符）。

html {
  background: #fff;
}
 
body {
  margin: auto;
  width: 50%;
}

CSS 引号

属性选择器和属性值使用单引号（''）而非双引号（""）。

不要在 URI 值（url()）中使用引号。

例外：如果你确实需要使用 @charset 规则，请使用双引号——不允许使用单引号 。

/* 不推荐 */
@import url("https://www.google.com/css/maia.css");
 
html {
  font-family: "open sans", arial, sans-serif;
}
/* 推荐 */
@import url(https://www.google.com/css/maia.css);
 
html {
  font-family: 'open sans', arial, sans-serif;
}

CSS 元数据规则

章节注释(Section Comments)

使用章节注释对各部分进行分组（可选）。

如果可能，使用注释将样式表各部分组合在一起。各部分之间用新行分隔。

/* 头部 */
 
.adw-header {}
 
/* 页脚 */
 
.adw-footer {}
 
/* 图库 */
 
.adw-gallery {}
Last updated on
HTML结语