CSS模块化设计——从空格谈起

CSS模块化设计是指将CSS代码划分为独立的模块，每个模块只负责一部分样式，极大地提升了CSS代码的可维护性、可读性。本文将从空格入手，讲解CSS模块化设计的完整攻略。

第一步：空格命名法

CSS模块化设计中，空格命名法是基础。首先，我们将整个页面划分为不同的块，然后为每个块定义唯一的类名。例如，我们有一个页面包含了一个头部、一个内容块和一个侧边栏，则可以这样定义类名：

.header { /*头部样式*/ }
.content { /*内容样式*/ }
.sidebar { /*侧边栏样式*/ }

这样，每个元素所带的类名都代表了该元素所在的模块，大大提升了代码的可读性。

第二步：样式分离

接下来，我们需要将样式从HTML中分离出来。通常，我们使用单独的CSS文件，或者使用SCSS或LESS这类CSS预处理器来实现。例如，我们可以将上面的样式写入一个单独的CSS文件中：

/* header.css */
.header { /*头部样式*/ }

/* content.css */
.content { /*内容样式*/ }

/* sidebar.css */
.sidebar { /*侧边栏样式*/ }

第三步：文件的拆分

将所有样式放在一个文件中的做法看起来十分直观和简单，但随着代码量的增长，CSS文件会越来越臃肿。因此，我们需要将一些通用的样式提取出来，放在单独的文件中。

例如，我们有一个按钮的样式：

/* button.css */
.button {
  display: inline-block;
  border-radius: 5px;
  padding: 10px;
  color: #fff;
  background-color: #007bff;
  text-decoration: none;
  font-size: 16px;
}

在这个按钮样式中，display、border-radius、padding、font-size等属性是可以复用的，因此我们可以将这些属性提取到一个base.css中：

/* base.css */
.inline-block {
  display: inline-block;
}
.border-radius--5 {
  border-radius: 5px;
}
.padding--10 {
  padding: 10px;
}
.color--white {
  color: #fff;
}
.bg--blue {
  background-color: #007bff;
}
.text-decoration--none {
  text-decoration: none;
}
.font-size--16 {
  font-size: 16px;
}

这样，我们就可以通过组合这些class来快速实现按钮样式：

/* button.css */
.button {
  @extend .inline-block;
  @extend .border-radius--5;
  @extend .padding--10;
  @extend .color--white;
  @extend .bg--blue;
  @extend .text-decoration--none;
  @extend .font-size--16;
}

如此一来，我们只需要关注button.css中具体的样式实现，而不需要重复定义已经存在于base.css中的样式了。

两条示例说明

示例一：画廊

假设我们要实现一个画廊的效果，其中每个图片有一个标题和描述。我们可以将这个画廊分为三个模块：.gallery（画廊整体）、.gallery__photo（图片）、.gallery__caption（标题和描述）：

<div class="gallery">
  <div class="gallery__photo">
    <img src="photo1.jpg" alt="photo1">
    <div class="gallery__caption">
      <h3 class="gallery__title">Title 1</h3>
      <p class="gallery__desc">Description 1</p>
    </div>
  </div>
  <div class="gallery__photo">
    <img src="photo2.jpg" alt="photo2">
    <div class="gallery__caption">
      <h3 class="gallery__title">Title 2</h3>
      <p class="gallery__desc">Description 2</p>
    </div>
  </div>
  <div class="gallery__photo">
    <img src="photo3.jpg" alt="photo3">
    <div class="gallery__caption">
      <h3 class="gallery__title">Title 3</h3>
      <p class="gallery__desc">Description 3</p>
    </div>
  </div>
</div>

然后，我们为每个模块定义样式：

.gallery {
  display: flex;
  flex-wrap: wrap;
}

.gallery__photo {
  flex-basis: calc(33.33333% - 20px);
  margin: 10px;
  position: relative;
}

.gallery__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, .8);
  padding: 10px;
  color: #fff;
}

.gallery__title {
  margin-top: 0;
}

.gallery__desc {
  margin-bottom: 0;
}

这样就完成了画廊的实现。

示例二：响应式导航栏

假设我们要实现一个响应式导航栏，其中有一个logo、一个搜索框和一个菜单按钮。我们可以将这个导航栏分为三个模块：.nav（导航栏整体）、.nav__logo（logo）、.nav__search（搜索框）、.nav__menu（菜单按钮）：

<nav class="nav">
  <div class="nav__logo">Logo</div>
  <div class="nav__search">
    <input type="text" placeholder="Search">
    <button>Go</button>
  </div>
  <div class="nav__menu">Menu</div>
</nav>

然后，我们为每个模块定义样式：

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav__logo {
  font-size: 24px;
}

.nav__search {
  display: none;
}

.nav__search input[type="text"] {
  width: 200px;
}

.nav__search button {
  margin-left: 10px;
}

@media (min-width: 768px) {
  .nav__search {
    display: flex;
  }

  .nav__menu {
    display: none;
  }
}

这样就完成了响应式导航栏的实现。在移动端下，搜索框默认是隐藏的，菜单按钮显示；而在PC端下，则相反。就算样式比较简单，但如果你能为每个模块定义唯一的类名，你的代码一定不会被人骂难维护了。