发表于 | 更新于 | 分类于 | 评论数： 0 | 阅读次数：

CSS 声明顺序以类型（position, display, colors, font, miscellaneous…）顺序排列，依赖盒模型定义顺序：由外而内。

  1. 位置属性(position, top, right, z-index, display, float 等)
  2. 大小(width, height, padding, margin)
  3. 文字系列(font, line-height, letter-spacing, color- text-align 等)
  4. 背景(background, border 等)
  5. 其他(animation, transition 等)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.foo {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100px;
  height: 100px;
  margin: 0;
  padding: 0;
  font-weight: bold;
  font-size: 1.5em;
  color: white;
  background: black;
  overflow: hidden;
}

css-written-order

发表于 | 更新于 | 分类于 | 评论数： 0 | 阅读次数：

Maps

从 Sass3.3 开始，样式表作者可以使用 map 这种数据结构—— Sass 团队使 map 可以映射关联数组、哈希表甚至是 Javascript 对象。map 是一种映射任何类型键值对（可以是任何类型，包括内嵌 maps，不过不推荐这种内嵌方式）的数据结构。

map 的使用应该遵循下述规范：

  • 冒号(:)之后添加空格；
  • 左开括号(()要和冒号(:)写在同一行；
  • 如果键是字符串（99% 都是字符串），则使用引号包裹起来。
  • 每一个键值对单独一行；
  • 每一个键值对以逗号(,)结尾；
  • 为最后一个键值对添加尾部逗号 (,)，方便添加新键值对、删除和重排已有键值对；
  • 单独一行书写右闭括号 ())；
  • 右闭括号 ())和分号(;)之间不使用空格和换行。
1
2
3
4
5
6
7
8
9
10
11
12
13
// Yep
$breakpoints: (
  'small': 767px,
  'medium': 992px,
  'large': 1200px,
);

// Nope
$breakpoints: (
  small: 767px,
  medium: 992px,
  large: 1200px,
);

调试 SASS MAP

如果你感到困惑并想了解 Sass 的 map 到底有怎样的魔力，请不要担心，Sass 中始终存在一个自动保存运行过程的机制。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@mixin debug-map($map) {
  @at-root {
    @debug-map {
      __tostring__: inspect($map);
      __length__: length($map);
      __depth__: if(function-exists('map-depth'), map-depth($map), null);
      __keys__: map-keys($map);
      __properties__ {
        @each $key, $value in $map {
          #{'(' + type-of($value) + ') ' + $key}: inspect($value);
        }
      }
    }
  }
}

如果你想深入了解 map 的实现机制，可以添加下述函数。该混合宏可以自动显示 map 的运行机制。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/// Compute the maximum depth of a map
/// @param {Map} $map
/// @return {Number} max depth of `$map`
@function map-depth($map) {
  $level: 1;

  @each $key, $value in $map {
    @if type-of($value) == 'map' {
      $level: max(map-depth($value) + 1, $level);
    }
  }

  @return $level;
}

发表于 | 更新于 | 分类于 | 评论数： 0 | 阅读次数：

列表需要遵守以下规范：

  • 除非列表太长不能写在 80 字符宽度的单行中，否则应该始终单行显示；
  • 除非适用于 CSS，否则应该始终使用逗号作为分隔符；
  • 要么使用内联形式，要么使用多行形式；
  • 始终使用括号包裹；
  • 始终不要添加尾部的逗号。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// Yep
$font-stack: ('Helvetica', 'Arial', sans-serif);

// Yep
$font-stack: ('Helvetica', 'Arial', sans-serif);

// Nope
$font-stack: 'Helvetica' 'Arial' sans-serif;

// Nope
$font-stack: 'Helvetica', 'Arial', sans-serif;

// Nope
$font-stack: ('Helvetica', 'Arial', sans-serif);

当需要给列表添加一个新列表项时，请遵守其提供的 API，不要试图手动给列表添加列表项。

1
2
3
4
5
6
7
$shadows: (0 42px 13.37px hotpink);

// Yep
$shadows: append($shadows, $shadow, comma);

// Nope
$shadows: $shadows, $shadow;

发表于 | 更新于 | 分类于 | 评论数： 0 | 阅读次数：

颜色

当涉及到操纵色彩时，Sass 通过提供少数的 函数功能，最终成为了极具价值的助手。

颜色格式

为了尽可能简单地使用颜色，我建议颜色格式要按照以下顺序排列：

  1. CSS 颜色关键字
  2. HSL 值
  3. RGB 值
  4. 十六进制。小写并尽可能简写
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// Yep
.foo {
  color: red;
}

// Nope
.foo {
  color: #ff0000;
}

// Yep
.foo {
  color: #ebc;
}

// Nope
.foo {
  color: #eebbcc;
}

使用 HSL 值或者 RGB 值，通常在逗号 (,)后面追加一个空格，而不在前后括号 ((, )) 和值之间添加空格。

1
2
3
4
5
6
7
8
9
10
11
// Yep
.foo {
  color: rgba(0, 0, 0, 0.1);
  background: hsl(300, 100%, 100%);
}

// Nope
.foo {
  color: rgba(0, 0, 0, 0.1);
  background: hsl(300, 100%, 100%);
}

颜色和变量

当一个颜色被多次调用时，最好用一个有意义的变量名来保存它。

1
2
$sass-pink: #c69;
color: $sass-pink;

不过，如果你是在一个主题中使用，我不建议固定的使用这个变量。相反，可以使用另一个标识方式的变量来保存它。

1
$main-theme-color: $sass-pink;

变亮和变暗颜色

lighten 和 darken 函数都是通过增加或者减小 HSL 中颜色的亮度来实现调节的。基本上，它们就是 adjust-color 函数添加了 $lightness 参数的别名。
另一方面，通过混合 白色 或 黑色 实现变量或变暗的 mix 函数，是一个不错的方法。

使用 mix 的好处是，当你降低颜色的比例时，它会渐进的接近黑色（或者白色），而 darken 和 lighten 立即变换颜色到黑色或白色。具体差异可以查看 KatieK。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/// Slightly lighten a color
/// @access public
/// @param {Color} $color - color to tint
/// @param {Number} $percentage - percentage of `$color` in returned color
/// @return {Color}
@function tint($color, $percentage) {
  @return mix(white, $color, $percentage);
}

/// Slightly darken a color
/// @access public
/// @param {Color} $color - color to shade
/// @param {Number} $percentage - percentage of `$color` in returned color
/// @return {Color}
@function shade($color, $percentage) {
  @return mix(black, $color, $percentage);
}

发表于 | 更新于 | 分类于 | 评论数： 0 | 阅读次数：

  1. 当数字小于 1 时，省略小数的 0

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    // Yep
    .foo {
      padding: 2em;
      opacity: 0.5;
    }

    // Nope
    .foo {
      padding: 2em;
      opacity: 0.5;
    }

  2. 当定义长度时，0 后面不需要加单位

    1
    2
    3
    4
    5
    // Yep
    $length: 0;

    // Nope
    $length: 0em;

  3. 给数字添加单位，可以让该数值乘以 1 个单位，也可以加上一个 0unit

    1
    2
    3
    4
    5
    6
    7
    $value: 42;

    // Yep
    $length: $value * 1px;

    // Nope
    $length: $value + px;
    1
    2
    3
    4
    5
    6
    7
    8
    $value: 42 + 0px;
    // -> 42px

    $value: 1in + 0px;
    // -> 1in

    $value: 0px + 1in;
    // -> 96px

  4. 删除一个值的单位，可以除以相同类型的 1 单位。

    1
    2
    3
    4
    5
    6
    7
    $length: 42px;

    // Yep
    $value: $length / 1px;

    // Nope
    $value: str-slice($length + unquote(''), 1, 2);

运算

最高级运算应该始终被包裹在括号中。这么做不仅是为了提高可读性，也是为了防止一些 Sass 强制要求对括号内内容计算的极端情况。

1
2
3
4
5
6
7
8
9
// Yep
.foo {
  width: (100% / 3);
}

// Nope
.foo {
  width: 100% / 3;
}

幻数（MAGIC NUMBERS）

“幻数”，是https://en.wikipedia.org/wiki/Magic_number_(programming)#Unnamed_numerical_constants">古老的学校编程给未命名数值常数的命名。基本上，它们只是能工作™但没有任何逻辑思维的随机数。

相信不用多说你也会理解，幻数是一场瘟疫，应不惜一切代价以避免。当你对数值的解析方式无法找到一个合理解释时，你可以对此提交一个内容宽泛的评论，包括你是怎样遇见这个问题以及你认为它应该怎样工作。承认自己不清楚一些机制的解析方式，远比让以后的开发者从零开始弄清它们更有帮助。

1
2
3
4
5
6
7
/**
 * 1\. Magic number. This value is the lowest I could find to align the top of
 * `.foo` with its parent. Ideally, we should fix it properly.
 */
.foo {
  top: 0.327em; /* 1 */
}

发表于 | 更新于 | 分类于 | 评论数： 0 | 阅读次数：

字符串、URL 应该始终被单引号(‘)所包裹，initial 或 sans-serif 的专用名词无须引用起来

1
2
3
4
5
// Yep
$direction: 'left';

// Nope
$direction: left;
1
2
3
4
5
6
7
8
9
// Yep
.foo {
  background-image: url('/images/kittens.jpg');
}

// Nope
.foo {
  background-image: url(/images/kittens.jpg);
}
1
2
3
4
5
6
7
8
// Yep
$font-type: sans-serif;

// Nope
$font-type: 'sans-serif';

// Okay I guess
$font-type: unquote('sans-serif');
1
2
3
4
5
// Okay
@warn 'You can\'t do that.';

// Okay
@warn "You can't do that.";

发表于 | 更新于 | 分类于 | 评论数： 0 | 阅读次数：

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
3
//构成 .menu-tabs 的一个子元素
.menu-tabs__tab1 {
}

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

1
2
3
//.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
29
30
31
32
// 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
19
.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;
  }
}

发表于 | 更新于 | 分类于 | 评论数： 0 | 阅读次数：

web 前端命名规范

web 语义化：

  1. 标签语义化，如在合适的地方用合适的语义化标签，如头部可用<header>、尾部可用<footer>；
  2. 命名语义化，包括 html 的 id 和 class 的命名，javascript 相关命名；如#header{}、.footer{}、等。

下面是常见的命名参考规范：

主体

  • 头部：header
  • 内容：content/container
  • 尾部：footer
  • 导航：nav
  • 侧栏：sidebar
  • 栏目：column
  • 整体布局：wrapper
  • 左右中：left / right / center
  • 登录条：loginbar
  • 标志：logo
  • 广告：banner
  • 页面主体：main
  • 热点：hot
  • 新闻：news
  • 下载：download
  • 子导航：subnav
  • 菜单：menu
  • 子菜单：submenu
  • 搜索：search
  • 友情链接：friendlink
  • 页脚：footer
  • 版权：copyright
  • 滚动：scroll
  • 标签页：tab
  • 文章列表：list
  • 提示信息：msg
  • 小技巧：tips
  • 栏目标题：title
  • 加入：join
  • 指南：guild
  • 服务：service
  • 注册：regsiter
  • 状态：status
  • 投票：vote
  • 合作伙伴：partner

css 注释的写法

如内容区，Html 注释的写法 ：<!--header头部-- >

id 的命名规范

  1. 页面结构
    • 容器: container
    • 页头：header
    • 内容：content/container
    • 页面主体：main
    • 页尾：footer
    • 导航：nav
    • 侧栏：sidebar
    • 栏目：column
    • 页面外围控制整体布局宽度：wrapper
    • 左右中：left right center
  2. 导航
    • 导航：nav
    • 主导航：mainnav
    • 子导航：subnav
    • 顶导航：topnav
    • 边导航：sidebar
    • 左导航：leftsidebar
    • 右导航：rightsidebar
    • 菜单：menu
    • 子菜单：submenu
    • 标题：title
    • 摘要：summary
  3. 功能
    • 标志：logo
    • 广告：banner
    • 登陆：login
    • 登录条：loginbar
    • 注册：regsiter
    • 搜索：search
    • 功能区：shop
    • 标题：title
    • 加入：joinus
    • 状态：status
    • 按钮：btn
    • 滚动：scroll
    • 标签页：tab
    • 文章列表：list
    • 提示信息：msg
    • 当前的：current
    • 小技巧：tips
    • 图标：icon
    • 注释：note
    • 指南：guild
    • 服务：service
    • 热点：hot
    • 新闻：news
    • 下载：download
    • 投票：vote
    • 合作伙伴：partner
    • 友情链接：link
    • 版权：copyright
  4. class 的命名:
    • 颜色：使用颜色的名称或者 16 进制代码，如：

      .red { color: red; }
      .f60 { color: #f60; }
      .ff8600 { color: #ff8600; }

    • 字体大小，直接使用“font+字体大小”作为名称，如：

      .font12px { font-size: 12px; }
      .font9pt {font-size: 9pt; }

    • 对齐样式，使用对齐目标的英文名称，如：

      .left { float:left; }
      .bottom { float:bottom; }

    • 标题栏样式，使用“类别+功能”的方式命名，如：

      .barnews { }
      .barproduct { }

注意事项：

  1. 一律小写；
  2. 尽量用英文；
  3. 尽量不加中杠和下划线；
  4. 尽量不缩写，除非一看就明白的单词，如：wrapper 可以写成 wrap。
  5. css 文件命名规范：
    • 主要的 master.css
    • 模块 module.css
    • 基本共用 base.css
    • 布局，版面 layout.css
    • 主题 themes.css
    • 专栏 columns.css
    • 文字 font.css
    • 表单 forms.css
    • 补丁 mend.css
    • 打印 print.css