Back to Details

css

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

CSS Style Guide

CSS样式指南

This skill applies Google's CSS style guide conventions to ensure clean, maintainable, and efficient CSS code.
本技能应用Google的CSS样式指南规范，以确保CSS代码整洁、可维护且高效。

Core Principles

核心原则

Valid CSS

有效的CSS

Use valid CSS code tested with W3C CSS Validator:
  • Catches errors early
  • Ensures browser compatibility
  • Improves maintainability
  • Exception: vendor-specific prefixes and required proprietary syntax
使用经W3C CSS Validator测试的有效CSS代码：
  • 提前发现错误
  • 确保浏览器兼容性
  • 提升可维护性
  • 例外情况：厂商特定前缀和必需的专有语法

Meaningful Class Names

有意义的类名

Use functional or generic class names, not presentational:
css
/* Not recommended: presentational */
.button-green {}
.clear {}
.yee-1901 {} /* meaningless */

/* Recommended: functional */
.gallery {}
.login {}
.video {}
.aux {} /* generic helper */
.alt {} /* generic alternative */
使用功能性或通用类名，而非表现性类名：
css
/* 不推荐：表现性 */
.button-green {}
.clear {}
.yee-1901 {} /* 无意义 */

/* 推荐：功能性 */
.gallery {}
.login {}
.video {}
.aux {} /* 通用辅助类 */
.alt {} /* 通用替代类 */

Avoid ID Selectors

避免ID选择器

IDs have high specificity and reduce reusability:
css
/* Not recommended */
#example {}
#navigation {}

/* Recommended */
.example {}
.navigation {}
ID选择器的优先级过高，会降低代码复用性：
css
/* 不推荐 */
#example {}
#navigation {}

/* 推荐 */
.example {}
.navigation {}

CSS Style Rules

CSS样式规则

Class Naming Conventions

类命名规范

Use short but meaningful names:
css
/* Not recommended */
.navigation {}
.atr {}

/* Recommended */
.nav {}
.author {}
Use hyphens as delimiters:
css
/* Not recommended */
.demoimage {}
.error_status {}

/* Recommended */
.video-id {}
.ads-sample {}
Use prefixes for large projects (optional):
css
/* For namespacing in large projects */
.adw-help {} /* AdWords */
.maia-note {} /* Maia */
使用简短但有意义的名称：
css
/* 不推荐 */
.navigation {}
.atr {}

/* 推荐 */
.nav {}
.author {}
使用连字符作为分隔符：
css
/* 不推荐 */
.demoimage {}
.error_status {}

/* 推荐 */
.video-id {}
.ads-sample {}
大型项目中使用前缀（可选）：
css
/* 大型项目中的命名空间 */
.adw-help {} /* AdWords */
.maia-note {} /* Maia */

Avoid Type Selectors

避免类型选择器

Don't qualify class names with type selectors:
css
/* Not recommended */
ul.example {}
div.error {}

/* Recommended */
.example {}
.error {}
Reason: Performance and flexibility
不要为类名添加类型选择器限定：
css
/* 不推荐 */
ul.example {}
div.error {}

/* 推荐 */
.example {}
.error {}
原因： 提升性能和灵活性

Shorthand Properties

简写属性

Use shorthand when possible:
css
/* Not recommended */
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;

/* Recommended */
border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;
尽可能使用简写形式：
css
/* 不推荐 */
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;

Units

单位

Omit units after 0 values:
css
/* Not recommended */
margin: 0px;
padding: 0em;

/* Recommended */
margin: 0;
padding: 0;

/* Exception: required units */
flex: 0px; /* flex-basis requires unit */
flex: 1 1 0px; /* needed in IE11 */
Include leading 0s:
css
/* Not recommended */
font-size: .8em;

/* Recommended */
font-size: 0.8em;
0值后省略单位：
css
/* 不推荐 */
margin: 0px;
padding: 0em;

/* 推荐 */
margin: 0;
padding: 0;

/* 例外：必需单位的情况 */
flex: 0px; /* flex-basis需要单位 */
flex: 1 1 0px; /* IE11中需要 */
保留前导0：
css
/* 不推荐 */
font-size: .8em;

/* 推荐 */
font-size: 0.8em;

Color Values

颜色值

Use 3-character hex when possible:
css
/* Not recommended */
color: #eebbcc;

/* Recommended */
color: #ebc;
Use lowercase:
css
/* Not recommended */
color: #E5E5E5;

/* Recommended */
color: #e5e5e5;
尽可能使用3字符十六进制表示：
css
/* 不推荐 */
color: #eebbcc;

/* 推荐 */
color: #ebc;
使用小写：
css
/* 不推荐 */
color: #E5E5E5;

/* 推荐 */
color: #e5e5e5;

Important Declarations

!important声明

Avoid 
!important
- use specificity instead:
css
/* Not recommended */
.example {
  font-weight: bold !important;
}

/* Recommended */
.example {
  font-weight: bold;
}

/* If override needed, increase specificity */
.container .example {
  font-weight: bold;
}
避免使用
!important
- 改用优先级控制：
css
/* 不推荐 */
.example {
  font-weight: bold !important;
}

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

/* 如果需要覆盖，提高优先级 */
.container .example {
  font-weight: bold;
}

Browser Hacks

浏览器兼容技巧

Avoid CSS hacks and user agent detection - use progressive enhancement:
css
/* Not recommended */
.example {
  width: 100px\9; /* IE hack */
}

/* Recommended: Use feature queries */
@supports (display: grid) {
  .example {
    display: grid;
  }
}
避免CSS hack和用户代理检测 - 使用渐进增强：
css
/* 不推荐 */
.example {
  width: 100px\9; /* IE hack */
}

/* 推荐：使用特性查询 */
@supports (display: grid) {
  .example {
    display: grid;
  }
}

Formatting Rules

格式规则

Indentation

缩进

Indent by 2 spaces (no tabs):
css
.example {
  color: blue;
}

@media screen, projection {

  html {
    background: #fff;
    color: #444;
  }

}
使用2个空格缩进（不使用制表符）：
css
.example {
  color: blue;
}

@media screen, projection {

  html {
    background: #fff;
    color: #444;
  }

}

Declaration Order

声明顺序

Alphabetize declarations for consistency (optional):
css
/* Recommended */
background: fuchsia;
border: 1px solid;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: black;
text-align: center;
text-indent: 2em;
Note: Ignore vendor prefixes for sorting, but keep them grouped
为保持一致性，可按字母顺序排列声明（可选）：
css
/* 推荐 */
background: fuchsia;
border: 1px solid;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: black;
text-align: center;
text-indent: 2em;
注意： 排序时忽略厂商前缀，但需将其分组保留

Semicolons

分号

Always end declarations with semicolons:
css
/* Not recommended */
.test {
  display: block;
  height: 100px
}

/* Recommended */
.test {
  display: block;
  height: 100px;
}
始终为声明添加分号：
css
/* 不推荐 */
.test {
  display: block;
  height: 100px
}

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

Property-Value Spacing

属性-值间距

Single space after colon, no space before:
css
/* Not recommended */
h3 {
  font-weight:bold;
}

/* Recommended */
h3 {
  font-weight: bold;
}
冒号后保留一个空格，冒号前无空格：
css
/* 不推荐 */
h3 {
  font-weight:bold;
}

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

Declaration Block Spacing

声明块间距

Single space before opening brace, same line:
css
/* Not recommended: missing space */
.video{
  margin-top: 1em;
}

/* Not recommended: unnecessary line break */
.video
{
  margin-top: 1em;
}

/* Recommended */
.video {
  margin-top: 1em;
}
左大括号前保留一个空格，与选择器同行：
css
/* 不推荐：缺少空格 */
.video{
  margin-top: 1em;
}

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

/* 推荐 */
.video {
  margin-top: 1em;
}

Selector and Declaration Separation

选择器与声明的换行

New line for each selector and declaration:
css
/* Not recommended */
a:focus, a:active {
  position: relative; top: 1px;
}

/* Recommended */
h1,
h2,
h3 {
  font-weight: normal;
  line-height: 1.2;
}
每个选择器和声明单独占一行：
css
/* 不推荐 */
a:focus, a:active {
  position: relative; top: 1px;
}

/* 推荐 */
h1,
h2,
h3 {
  font-weight: normal;
  line-height: 1.2;
}

Rule Separation

规则间距

Blank line between rules:
css
html {
  background: #fff;
}

body {
  margin: auto;
  width: 50%;
}
规则之间保留空行：
css
html {
  background: #fff;
}

body {
  margin: auto;
  width: 50%;
}

Quotation Marks

引号

Use single quotes for attribute selectors and property values:
css
/* Not recommended */
@import url("https://www.google.com/css/maia.css");

html {
  font-family: "open sans", arial, sans-serif;
}

/* Recommended */
@import url(https://www.google.com/css/maia.css);

html {
  font-family: 'open sans', arial, sans-serif;
}

/* Exception: @charset requires double quotes */
@charset "utf-8";
Do not quote URLs:
css
/* Recommended */
background: url(images/bg.png);
属性选择器和属性值使用单引号：
css
/* 不推荐 */
@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;
}

/* 例外：@charset需要双引号 */
@charset "utf-8";
URL无需加引号：
css
/* 推荐 */
background: url(images/bg.png);

Organizing CSS

CSS组织

Section Comments

区块注释

Group related rules with comments (optional):
css
/* Header */

.adw-header {}

.adw-header-logo {}

/* Footer */

.adw-footer {}

/* Gallery */

.adw-gallery {}

.adw-gallery-item {}
使用注释对相关规则进行分组（可选）：
css
/* 头部 */

.adw-header {}

.adw-header-logo {}

/* 页脚 */

.adw-footer {}

/* 图片库 */

.adw-gallery {}

.adw-gallery-item {}

File Organization

文件组织

Organize CSS files logically:
css
/* Base styles */
html,
body {
  margin: 0;
  padding: 0;
}

/* Typography */
h1, h2, h3 {
  font-family: 'Arial', sans-serif;
}

/* Layout */
.container {
  max-width: 1200px;
  margin: 0 auto;
}

/* Components */
.button {
  padding: 10px 20px;
}

/* Utilities */
.hidden {
  display: none;
}
按逻辑组织CSS文件：
css
/* 基础样式 */
html,
body {
  margin: 0;
  padding: 0;
}

/* 排版 */
h1, h2, h3 {
  font-family: 'Arial', sans-serif;
}

/* 布局 */
.container {
  max-width: 1200px;
  margin: 0 auto;
}

/* 组件 */
.button {
  padding: 10px 20px;
}

/* 工具类 */
.hidden {
  display: none;
}

Best Practices

最佳实践

Specificity Management

优先级管理

Keep specificity low for easier overrides:
css
/* Not recommended: too specific */
html body div.container ul.nav li.item a.link {}

/* Recommended */
.nav-link {}
保持低优先级，以便于覆盖：
css
/* 不推荐：优先级过高 */
html body div.container ul.nav li.item a.link {}

/* 推荐 */
.nav-link {}

Avoid Over-nesting

避免过度嵌套

css
/* Not recommended */
.header .nav .menu .item .link {
  color: blue;
}

/* Recommended */
.nav-link {
  color: blue;
}
css
/* 不推荐 */
.header .nav .menu .item .link {
  color: blue;
}

/* 推荐 */
.nav-link {
  color: blue;
}

Mobile-First Media Queries

移动端优先的媒体查询

css
/* Base styles for mobile */
.container {
  width: 100%;
}

/* Progressively enhance for larger screens */
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}

@media (min-width: 1024px) {
  .container {
    width: 960px;
  }
}
css
/* 移动端基础样式 */
.container {
  width: 100%;
}

/* 逐步增强以适配更大屏幕 */
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}

@media (min-width: 1024px) {
  .container {
    width: 960px;
  }
}

Reusable Classes

可复用类

Create utility classes for common patterns:
css
/* Layout utilities */
.flex {
  display: flex;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Spacing utilities */
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
为常见模式创建工具类：
css
/* 布局工具类 */
.flex {
  display: flex;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 间距工具类 */
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }

Quick Reference

快速参考

RuleConvention
Indentation2 spaces
CaseLowercase
QuotesSingle (
'
) except 
@charset
SemicolonsRequired after every declaration
UnitsOmit after 
0
Leading zerosAlways include (
0.8em
)
Hex colors3-char when possible, lowercase
ID selectorsAvoid
Type selectorsDon't qualify classes
!important
Avoid
Property orderAlphabetical (optional)
Line breaksNew line per selector/declaration
Rule separationBlank line between rules
CommentsSection comments for organization
规则规范
缩进2个空格
大小写小写
引号单引号（
'
），
@charset
除外
分号每个声明后必须添加
单位0值后省略
前导0始终保留（如
0.8em
）
十六进制颜色尽可能使用3字符格式，小写
ID选择器避免使用
类型选择器不要限定类名
!important
避免使用
属性顺序按字母顺序（可选）
换行每个选择器/声明单独一行
规则间距规则之间保留空行
注释使用区块注释进行组织

Common Patterns

常见模式

Button Component

按钮组件

css
.button {
  background-color: #007bff;
  border: 0;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 1rem;
  padding: 0.5rem 1rem;
  text-align: center;
  text-decoration: none;
}

.button:hover {
  background-color: #0056b3;
}

.button-secondary {
  background-color: #6c757d;
}

.button-large {
  font-size: 1.25rem;
  padding: 0.75rem 1.5rem;
}
css
.button {
  background-color: #007bff;
  border: 0;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 1rem;
  padding: 0.5rem 1rem;
  text-align: center;
  text-decoration: none;
}

.button:hover {
  background-color: #0056b3;
}

.button-secondary {
  background-color: #6c757d;
}

.button-large {
  font-size: 1.25rem;
  padding: 0.75rem 1.5rem;
}

Card Component

卡片组件

css
.card {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1.5rem;
}

.card-header {
  border-bottom: 1px solid #ddd;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
}

.card-title {
  font-size: 1.5rem;
  margin: 0;
}

.card-body {
  line-height: 1.6;
}
css
.card {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1.5rem;
}

.card-header {
  border-bottom: 1px solid #ddd;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
}

.card-title {
  font-size: 1.5rem;
  margin: 0;
}

.card-body {
  line-height: 1.6;
}

Grid System

网格系统

css
.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(12, 1fr);
}

.col-4 {
  grid-column: span 4;
}

.col-6 {
  grid-column: span 6;
}

.col-12 {
  grid-column: span 12;
}
css
.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(12, 1fr);
}

.col-4 {
  grid-column: span 4;
}

.col-6 {
  grid-column: span 6;
}

.col-12 {
  grid-column: span 12;
}

Additional Resources

额外资源

Summary

总结

Write CSS that is:
  • Valid: Passes W3C validation
  • Semantic: Meaningful class names
  • Maintainable: Low specificity, avoid IDs
  • Consistent: Follow formatting rules
  • Efficient: Use shorthand, avoid repetition
  • Readable: Proper spacing and organization
  • Lowercase: All selectors and properties
  • Quoted: Single quotes (except 
    @charset
    )
编写的CSS应具备以下特点：
  • 有效：通过W3C验证
  • 语义化：类名有意义
  • 可维护：低优先级，避免使用ID
  • 一致：遵循格式规则
  • 高效：使用简写，避免重复
  • 可读：适当的间距和组织
  • 小写：所有选择器和属性均为小写
  • 引号：使用单引号（
    @charset
    除外）