代码规范

提示

不断扩充更新，以期更好的可读性代码

# HTML

# DOCTYPE

<!DOCTYPE html>

# LANG

推荐使用属性值 cmn-Hans-CN（简体, 中国大陆），但是考虑浏览器和操作系统的兼容性，目前仍然使用 zh-CN 属性值

<html lang="zh-CN"></html>

# CSS

# 业务组件 CSS 的问题

相同功能在不同组件内部需要重新命名
类命名困难
重复的 CSS 文件
无意义的嵌套和使用&符号

# CSS 方案

# 原子化

Atomic CSS is the approach to CSS architecture that favors small, single-purpose classes with names based on visual function. 原子化 CSS 是一种 CSS 的架构方式，它倾向于小巧且用途单一的 class，并且会以视觉效果进行命名。

class 的命名按照功能
class 的功能单一

.bg-blue {
  background-color: #357edd;
}
.f1 {
  font-size: 3rem;
}
.m0 {
  margin: 0;
}

1
2
3
4
5
6
7
8
9

Let’s Define Exactly What Atomic CSS is (opens new window)

# OOCSS (Object-Oriented CSS 面向对象 CSS)

OOCSS (Object-Oriented CSS 面向对象 CSS ) 是组织 CSS 的领先的模块化或基于组件的系统。它是 Nicole Sullivan 在 2008 年在 Web Directions North 大会上首次提出的，核心就是编写可复用和可维护的样式。

分离结构（structure）和皮肤（skin）。您应该在基础对象中保留结构和位置，并在扩展类中保留视觉特征（如 background 或 border）。这样您就不必覆盖视觉属性。
分离容器（container）和内容（content）。永远不要在 CSS 中模仿 HTML 的结构。换句话说，不要在样式表中引用标签或 ID。相反，尝试创建和应用描述相关标签使用的类。并将嵌套类保持在最低限度。

Object-Oriented CSS (opens new window)

# SMACSS (Scalable and Modular Architecture for CSS)

SMACSS（Scalable and Modular Architecture for CSS）编写模块化、结构化和可扩展的 CSS。

Base 基础样式
Layout 布局样式
Module 模块样式
State 状态样式
Theme 主题样式

SMACSS (opens new window)

# BEM（ block, element, modifier）

首先 BEM 是一个分层系统，它把我们的网站分为三层，这三层正好对应着 BEM 三个英文单词的简写 block, element, modifier，分为为块层、元素层、修饰符层

使用__两个下划线将块名称与元素名称分开
使用--两个破折号分隔元素名称及其修饰符
一切样式都是一个类，不能嵌套

BEM (opens new window)

# ITCSS

理智、可扩展、可管理 CSS 架构

Settings – 与预处理器一起使用，包含颜色、字体等定义

Tools – 工具与方法，比如 mixins，Settings 与 Tools 都不会产生任何 CSS 代码，仅仅是辅助函数与变量

Generic – 通用层，比如 reset html、body 的样式

Elements – 对通用元素的样式重置，比如　 a p div 等元素的样式重置 Objects – 类似 OOCSS 中的对象，描述一些常用的基础状态
Components – 对组件样式的定义，一个 UI 元素基本由 Objects 与 Components 组成
Utilities – 工具类，比如 .hidden