css规范札记

web前端规范-CSS

参考 Sass Guidelines(中文版)

编码

为了避免潜在的字符编码问题,强力建议在入口文件中通过 @charset 指令使用 UTF-8 编码格式。请确保该指令是文件的第一条语句,并排除其他字符编码声明。

1
@charset 'utf-8';

CSS的权重

  1. 通配选择符的权值 0,0,0,0
  2. 标签的权值为 0,0,0,1
  3. 类的权值为 0,0,1,0
  4. 属性选择的权值为 0,0,1,0
  5. 伪类选择的权值为 0,0,1,0
  6. 伪对象选择的权值为 0,0,0,1
  7. ID的权值为 0,1,0,0
  8. important的权值为最高 1,0,0,0

比较同一级别的个数,数量多的优先级高,如果相同即比较下一级别的个数。
important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 通配符 > 继承

  • 256个class类名选择器干掉一个id选择器实例 ~所有的类名(classes)都是以8字节字符串存储的,8字节所能hold的最大值就是255,超过势必会越过其边缘~
  • CSS选择器的 效率 从高到低
    1. id选择器(#myid)
    2. 类选择器(.myclassname)
    3. 标签选择器(div,h1,p)
    4. 相邻选择器(h1+p)
    5. 子选择器(ul < li)
    6. 后代选择器(li a)
    7. 通配符选择器(*)
    8. 属性选择器(a[rel=”external”])
    9. 伪类选择器(a:hover,li:nth-child)

命名

就变量、函数和混合宏的命名而言,我们坚持一些很 CSS-y 的风格:小写连字符分隔,有意义的命名。组件命名参考BEM原则

1
2
3
4
5
6
7
8
9
$vertical-rhythm-baseline: 1.5rem;
@mixin size($width, $height: $width) {
// ...
}
@function opposite-direction($direction) {
// ...
}

常量建议使用全大写方式书写

1
2
3
4
5
// Yep
$CSS_POSITIONS: (top, right, bottom, left, center);
// Nope
$css-positions: (top, right, bottom, left, center);

组件命名应该遵循BEM原则块(Block)元素(Element)修饰符(Modifier)

示例图片1

示例图片2

是一个独立的实体,既可以是简单的也可以是复合的(包含其他块)。块使用顶级类名(多个单词的长名称使用一个连字符(-)连接)

1
2
//组件块
.menu-tabs{}

元素 是块的一部分,具有某种功能。元素是依赖上下文的:它们只有处于他们应该属于的块的上下文中时才是有意义的。使用两个下划线(__)来分隔块名和元素名

1
2
//构成 .menu-tabs 的一个子元素
.menu-tabs__tab1{}

修饰符 作为一个块或是一个元素的一种属性,代表这个块或这个元素在外观或是行为上的改变。使用两个连字符(--)来分隔块名(或元素名)和修饰符名

1
2
//.menu-tabs__tab1 的某个不同状态或版本
.menu-tabs__tab1--active{}

CSS属性

  1. 使用(2/4)空格代表缩进,而不是使用tab键
  2. 理想上,每行保持为80个字符宽度
  3. 正确书写多行CSS规则
  4. 有意义的使用空格、换行
  5. 相关联的选择器写在同一行;不相关联选择器分行书写
  6. 最后一个选择器和左开大括号({)中间书写一个空格
  7. 每个声明单独一行
  8. 冒号(:)后添加空格
  9. 所有声明的尾部都添加一个分号 (;)
  10. 右闭大括号(})单独一行
  11. 右闭大括号(})后添加空行
    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
    // Yep
    .foo {
    display: block;
    overflow: hidden;
    padding: 0 1em;
    }
    // Nope
    .foo {
    display: block; overflow: hidden;
    padding: 0 1em;
    }
    // Yep
    .foo, .foo-bar,
    .baz {
    display: block;
    overflow: hidden;
    margin: 0 auto;
    }
    // Nope
    .foo,
    .foo-bar, .baz {
    display: block;
    overflow: hidden;
    margin: 0 auto }

添加与 CSS 相关的规范时,我们需要注意:

  • 本地变量在其他任何变量之前声明,并和其他声明用空行分隔开;
  • 不需 @content 的混合宏在放在其他声明之前;
  • 嵌套选择器在新行声明;
  • 需要 @content 的混合宏在嵌套选择器后声明;
  • 右闭大括号(})上一行无需空行;
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    .foo, .foo-bar,
    .baz {
    $length: 42em;
    @include ellipsis;
    @include size($length);
    display: block;
    overflow: hidden;
    margin: 0 auto;
    &:hover {
    color: red;
    }
    @include respond-to('small') {
    overflow: visible;
    }
    }

注释

在代码完成之时立即注释

  • 一个文件的结构或者作用;
  • 规则集的目标;
  • 使用幻数背后的目的;
  • CSS 声明的原因;
  • CSS 声明的顺序;
  • 方法执行背后的逻辑思维。
CSS文件开头或核心块,使用多行注释:
1
2
3
4
5
6
7
8
9
10
11
/**
* Helper class to truncate and add ellipsis to a string too long for it to fit
* on a single line.
* 1\. Prevent content from wrapping, forcing it on a single line.
* 2\. Add ellipsis at the end of the line.
*/
.ellipsis {
white-space: nowrap; /* 1 */
text-overflow: ellipsis; /* 2 */
overflow: hidden;
}
当注释 Sass 的一个特定部分时,使用单行注释:
1
2
3
// Add current module to the list of imported modules.
// `!global` flag is required so it actually updates the global variable.
$imported-modules: append($imported-modules, $module) !global;
每一个旨在代码库中复用的变量、函数、混合宏和占位符,都应该使用 SassDoc 记录下来作为全部 API 的一部分。
1
2
3
/// Vertical rhythm baseline used all over the code base.
/// @type Length
$vertical-rhythm-baseline: 1.5rem;

SassDoc 需要三个反斜杠(/),主要有两个作用:

  • 作为公有或私有 API 的一部分,在所有的地方使用一个注释系统强制标准化注释。
  • 通过使用任意的 SassDoc 终端(CLI tool, Grunt, Gulp, Broccoli, Node…),能够生成 API 文档的 HTML 版本。
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
/// Mixin helping defining both `width` and `height` simultaneously.
///
/// @author Hugo Giraudel
///
/// @access public
///
/// @param {Length} $width - Element’s `width`
/// @param {Length} $height ($width) - Element’s `height`
///
/// @example scss - Usage
/// .foo {
/// @include size(10em);
/// }
///
/// .bar {
/// @include size(100%, 10em);
/// }
///
/// @example css - CSS output
/// .foo {
/// width: 10em;
/// height: 10em;
/// }
///
/// .bar {
/// width: 100%;
/// height: 10em;
/// }
@mixin size($width, $height: $width) {
width: $width;
height: $height;
}

媒体查询

媒体查询紧贴选择器

1
2
3
4
5
6
7
.foo {
color: red;
@include respond-to('medium') {
color: blue;
}
}

生成结果:

1
2
3
4
5
6
7
8
9
.foo {
color: red;
}
@media (min-width: 800px) {
.foo {
color: blue;
}
}
坚持原创技术分享,您的支持将鼓励我继续创作!