css教程:可读性可维护性良好的CSS文件

针对“css教程:可读性可维护性良好的CSS文件”的完整攻略，我将分别从以下几个方面进行讲解：

命名规范
样式结构
注释

1. 命名规范

命名规范是保证CSS文件可读性、可维护性的第一步。在命名规范上，可以根据约定俗成的方式去制定，比如以下各种情况：

使用“BEM”（块、元素、修饰符）命名法：.block__element--modifier
使用“OOCSS”（面向对象CSS）命名法：.module-name .submodule-name .element-name
使用“SMACSS”（可扩展和模块化的CSS）命名法：.l-header .mod-is-primary

在命名规范限制下，CSS文件的结构就变得明确、易于管理。

2. 样式结构

在保证命名规范的基础上，样式结构也是非常重要的。通常情况下，可以遵循以下原则：

按照页面布局进行分组。比如将header部分、nav部分、main部分依次排布
一般情况下，从上到下按照选择器中的的字母顺序排列。比如@media、:hover这些伪类排列在样式最后
用类来覆盖样式，避免使用!important样式

3. 注释

为了让CSS文件的可维护性变得更好，注释是必不可少的。在注释上，可以根据以下方式进行：

类上方加注释，注释该类所描述的内容。如果该类有不同的交互方式，应加以分割以帮助识别
描述一些意图或布局时使用，用 // 注释，保证和代码之间的偏移最大
用注释说明更改，即描述新更新的元素

下面我将给出两条示例说明：

示例1：样式结构

以下是一个例子：

/* 头部
   ========================================================================== */

.site-header {
  background-color: #333;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px;
}

.site-title,
.site-logo {
  margin: 0;
  font-size: 24px;
  color: #fff;
}

.site-logo img {
  height: 30px;
}

.site-nav {
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
}

.site-nav__item {
  margin-left: 20px;
}

.site-nav__item a {
  color: #fff;
}

/* 正文
   ========================================================================== */

.content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.content {
  margin-top: 40px;
  width: 80%;
  max-width: 800px;
}

.content__title {
  font-size: 36px;
  margin-bottom: 20px;
  text-align: center;
}

.content__subtitle {
  font-size: 20px;
  margin-bottom: 30px;
}

.banner-image {
  margin-bottom: 40px;
}

/* 脚部
   ========================================================================== */

.site-footer {
  background-color: #333;
  color: #fff;
  font-size: 14px;
  text-align: center;
  padding: 20px;
}

此例中，CSS样式按照页面结构进行分组，并使用注释加以标注。在样式的具体组合上，选择器按字母表顺序排列。

示例2：注释