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

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

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

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

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

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

可重用、独立的UI元素。

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

纯粹的可见样式,例如:borderbox-shadowcolors,backgrounds,font properties等

类名格式

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

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

原文地址,请戳这里

script>