drupal8-css-guide

  1. CSS格式
    1. 空白
    2. 注释
    3. 格式
    4. 杂项
  2. CSS架构
    1. 目标
    2. 最佳实践

CSS格式

空白

缩进

不要使用tab键进行缩进，采用2个空格进行缩进。

1
2
3
4
5
6
7
@media print {
  /* This line is indented with 2 spaces, 2 spaces x 1 level of indentation. */
  .example {
    /* This line is indented with 4 spaces, 2 spaces x 2 levels of indentation. */
    padding: 0;
  }
}

空白行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
/* A comment describing the ruleset. */
.selector-1,
.selector-2,
.selector-3[type="text"] {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  display: block;
  margin: 0;
  font-family: Times, "Times New Roman", sans-serif;
  color: #333;
  background: #fff;
  background: linear-gradient(#fff, rgba(0, 0, 0, 0.8));
}
/**
 * A longer comment describing this ruleset. Note
 * the blank line before the docblock.
 */
.selector-4,
.selector-5 {
  background-color: lime;
}
/* This logical grouping of rulesets has no interleaving blank lines. */
.profile {
  margin: 16px 0;
  margin: 1rem 0;
}
.profile__picture {
  float: right; /* LTR */
}

行尾

行尾绝不能有任何空白(空白或者tab)。所有的文件应该以单个空白行结尾。

文件应该以Unix行尾格式结尾(\n或者LF)，同时也是MAC OS X的默认方式，不要使用windows的行尾格式(\r\n或者CRLF)

小提示：文本编辑启用show invisibles。

注释

文件注释

每一个文件应该以注释开头，注释中写明文件的用途。例如：

1
2
3
4
5
6
7
/**
 * @file
 * Short description describing the file.
 *
 * The first sentence of the long description starts here and continues on this
 * line for a while finally concluding here at the end of this paragraph.
 */

多行注释

当用于描述一个或者一组规则集的时候，注释应该遵循Doxygen注释风格(也被称作”docblock”)

1
2
3
4
5
6
7
8
9
10
11
12
/**
 * Short description using Doxygen-style comment format.
 *
 * The first sentence of the long description starts here and continues on this
 * line for a while finally concluding here at the end of this paragraph.
 *
 * The long description is ideal for more detailed explanations and
 * documentation. It can include example HTML, URLs, or any other information
 * that is deemed necessary or useful.
 */
.example-rule {
}

单行注释

当用于描述一个属性或者一个规则集的时候，注释应该控制在80个字符并遵循简单CSS注释风格。

1
2
3
4
5
6
7
8
9
.example {
  /* Override the default margins. */
  margin: 0;
}
/* This is a variant of the .example component. */
.example--item {
  display: inline;
}

将注释直接放在属性或者它的规则集前面，并保持与它所属的属性或者规则集相同的缩进。

如果注释用于描述一个规则集，记得在规则集前面添加一空白行。

格式

CSS格式规范确保代码的可读性，注释的清晰性，最大化减少意外错误的情况。

规则集

1
2
3
4
5
.selector-alpha,
.selector-beta {
  counter-reset: section;
  text-transform: small-caps;
}

属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/*  Basic syntax */
display: block;
/* 
 * Use shorthand syntax for hexadecimal colors when possible
 * Always use lowercase
 */
color: #fff;
color: #df7dcf;
/* Use double quotes instead of single quotes */
font-family: "Frutiger Ultra";
/* Do not attach units to zero-values */
text-shadow: 0 0 2px #ddd;
/* 
 * Use rem units preceded by px units for a safe fallback,
 * unless it creates an undesired effect.
 */
font-size: 24px;
font-size: 1.5rem;
/* Spaces MUST follow commas in property or function values */
color: rgba(0, 136, 18, 0.8)

属性声明顺序

  1. Positioning：position, float, clear, top, right, bottom, left, direction, and z-index
  2. Box model：display, [(max|min)-]height, [(max|min)-]width, margin, padding, border 以及它们对应的可变样式规则(例如：margin-top等.)，以及box-sizing
  3. 其它
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.selector {
  /* Positioning declarations */
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  /* Box model declarations */
  display: inline-block;
  width: 100%;
  padding: 10px;
  padding: 0.625rem;
  border: 1px solid #333;
  /* Other declarations */
  background: #000;
  color: #fff;
  font-family: sans-serif;
  font-size: 18px;
  font-size: 1.125rem;
}

特例

单行样式规则块，起始大括号的后面以及结束大括号的后面包含一个空格。

1
2
3
.selector-1 { width: 10%; }
.selector-2 { width: 20%; }
.selector-3 { width: 30%; }

很长的，逗号相隔的属性值例如，gradients或者shadows，可能占据多行。

1
2
3
4
5
6
7
8
.selector {
  background-image:
    linear-gradient(#fff, #ccc),
    linear-gradient(#f3c, #4ec);
  box-shadow:
    1px 1px 1px #000,
    2px 2px 1px 1px #ccc inset;
}

Media Queries

Media queries的写法遵从规则集的写法。

1
2
3
4
5
6
7
8
@media screen and (min-width: 28.125rem) { /* 450px */
  #page {
    margin-left: 20px;
    margin-left: 1.25rem;
    margin-right: 20px;
    margin-right: 1.25rem;
  }
}

杂项

@charset语句

字符集语句(例如：@charset "UTF-8";)只在css文件最开头的时候才会生效。当Drupal的css合并器合并多个css文件到一个文件时，Drupal会忽略@charset语句。这就意味着，CSS文件不必要加@charset语句。CSS文件默认编码是UTF-8。任何CSS注释或者属性值必须以UTF-8编码。

综合例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
/**
 * @file
 * Layouts for this theme.
 */
/**
 * Column layout with horizontal scroll.
 *
 * This creates a single row of full-height, non-wrapping columns that can be
 * browsed horizontally within their parent.
 *
 * Example HTML:
 *
 * <div class="grid">
 *   <div class="cell cell-3"></div>
 *   <div class="cell cell-3"></div>
 *   <div class="cell cell-3"></div>
 * </div>
 */
/**
 * Grid container
 *
 * Must only contain '.cell' children.
 */
.grid {
  height: 100%;
  /* Remove inter-cell whitespace */
  font-size: 0;
  /* Prevent inline-block cells wrapping */
  white-space: nowrap;
}
/**
 * Grid cells
 *
 * No explicit width by default. Extend with '.cell-n' classes.
 */
.cell {
  position: relative;
  display: inline-block;
  overflow: hidden;
  box-sizing: border-box;
  height: 100%;
  /* Set the inter-cell spacing */
  padding: 0 10px;
  padding: 0.625rem;
  border: 2px solid #333;
  vertical-align: top;
  /* Reset white-space */
  white-space: normal;
  /* Reset font-size */
  font-size: 16px;
  font-size: 1rem;
}
/* Cell states */
.cell.is-animating {
  background-color: #fffdec;
}
/* Cell dimensions */
.cell-1 { width: 10%; }
.cell-2 { width: 20%; }
.cell-3 { width: 30%; }
.cell-4 { width: 40%; }
.cell-5 { width: 50%; }
/* Cell modifiers */
.cell--detail,
.cell--important {
  border-width: 4px;
}

CSS架构

目标

可预期性

CSS代码具有易读性，容易理解。修改时只修改你需要的而不会发生其它错误。

可重用

CSS规则足够简约和解耦，以便可以快速从已经存在的部分构建新的组件。

可维护

我们会一直添加新的组件和特性，我们需要保证添加的时候会很容易，不需要破坏原有的样式解构。

可扩展

最佳实践

避免依赖HTML结构

1
2
3
4
5
6
7
8
9
/**
  * Add a horizontal rule between adjacent list rows
  *
  * Could be part of an implementation of the Pears “slats” component:
  * http://pea.rs/content/slats-html5 
  */
.slat + .slat {
  border-top: 1px solid #cccccc;
}

然而，需要注意的是：

  1. 在multi-part选择器中尽量避免原生标记，例如：div, span
  2. 如果可能的话避免出现后代选择器(例如：.my-list li)，特别是一个组件包含另一个组件的时候
  3. 避免出现2个以上的组合。下面这个例子就很糟糕：.my-list > li > a
  4. 如果怀疑的话，直接给元素加一个class或者加上样式

使用组件自己的class命名组件元素

为了避免依赖html标签结构，更加明确地定义一个组件元素，可以给组件加上以_相连的组件名。

1
2
3
4
5
.component {}
/* Component elements */
.component__header {}
.component__body {}

使用修饰class扩展组件

例如：

CSS

1
2
3
4
5
6
7
8
9
/* 按钮组件 */
.button {
  /* styles */
}
/* 按钮修饰类 */
.button--primary {
  /* modifications and additions */
}

HTML

1
2
<!-- Button variant is created by applying both component and modifier classes -->
<button class="button button--primary">Save</button>

分离出相关的css

组件的职责不是为了站点的定位和布局。不要应用width和height，除非那个元素原生带有这些属性(例如：img)。

避免使用js改变内联样式。例如，状态的变化，这时候就该定义一个名为is-active的class用于描述状态的变化。

Drupal8使用SMACSS系统类归类css规则：

Base由只渲染html元素的样式规则组成，例如用于CSS reset或者Normalize.css。Base中不应该包含任何类选择器。

页面元素布局，例如grid系统

可重用、独立的UI元素。

处理组件显示变化的样式集。通常，是在用户与页面交互时触发的样式变化，例如：hover，打开一个模态框等。主要方式有：

纯粹的可见样式，例如：border，box-shadow，colors，backgrounds，font properties等

类名格式

类名应该使用全称而不是缩写。例如：class="button"而不是class="btn"

组件的类名应该使用-分隔两个单词，例如：class="button-group"，而不是class="buttongroup"

原文地址，请戳这里

script>