CSS重构

1. 重构和架构

重构是指在不改变代码行为的前提下，重写代码，使其更加简洁、易于复用。

架构是指软件项目的各个不同部件之间的组合方式。

优秀的架构：

1. 可预测：可以对软件的工作方式和结构做出准确的假设
2. 可复用：在多处使用同一代码，无需重写
3. 可扩展：比较容易的增加新内容
4. 可维护：修改一处代码不用大规模的改动其他代码

2. CSS选择器的优先级

用（a, b, c, d）表示，优先级 a>>b>>c>>d，其中：

1. 有行内 style 属性时，a=1,否则 a=0
2. b 为 ID 选择器的数量
3. c 为类选择器、属性选择器、伪类的数量
4. d 为类型选择器、伪元素的数量

（ps：伪类和伪元素的区别）

!important 优先级最高，可覆盖行内样式。不可以添加到行内样式属性中。

3. 如何编写优质的 CSS

使用注释

注释记录的内容包括：

• 文件内容
• 选择器的依赖、用法
• 使用特定声明的原因（hack等）
• 不应继续使用的废弃样式

/*
* 导航链接样式
*
* @see templates/nav.html
*/
.nav-link {
  ...
}

.nav-link:hover {
  border-bottom: 4px solid #333;
  /* 防止增加了4px下边框导致元素移动 */
  padding-bottom: 0;
}

/* @deprecated */
.nav-link {
  ...
}

保持选择器的简单

/* 不推荐 */
div > nav > ul > li > a {
   }