我的css架构理念—因人而异 没有最优 只有适合

我的css架构理念

因人而异，没有最优，只有适合

在我看来，css架构并没有一种统一的最优解，因为它实际上是一种根据项目需求、技术水平、团队构成等因素而定制的个性化解决方案。不同的团队或项目，其css架构都应该因人而异，在保持代码可维护性、可扩展性、可重用性等基础上，尽可能地根据实际情况作出最合适的选择。

为了实现这个理念，我总结了以下几点经验：

1. 将css文件拆分为不同的模块

将css文件按照功能或者页面拆分成不同的模块是保证css可维护性的基础。

以模块化的方式组织css，除了更方便快速地定位和修改所需样式，还可以减少文件的大小，加快页面的加载速度。

2. 遵循“命名惯例”

在编写css时，使用良好的命名规范对代码的可维护性起着非常重要的作用。开发人员应该尽量遵循统一的、易于理解的命名规范，这样会使代码阅读更加容易，以便于自己和团队成员之间相互分享。

例如：

• BEM（块元素模型）规范，
• SMACSS（可扩展的和模块化的CSS），
• OOCSS（面向对象的CSS）等等。

3. 不同的CSS预处理器

CSS预处理器可以帮助我们更高效地编写CSS，并且可以实现更好的代码复用，减少重复代码和减少层叠错误。选择一种合适的预处理器可以极大地提高开发效率。

常见的CSS预处理器有LESS、SASS、Stylus等等。

示例1

一个Web应用程序的团队开发了一个由数千行CSS组成的庞大代码库，让其他团队作为其软件部分的一部分使用。

这个团队为了实现最大程度的可维护性，采用了BEM规范，并通过使用CSS预处理器SASS和模块化方法来封装代码实现逻辑。

为了保持一致性，每个模块都被分发到git仓库中。然后，代码库生成器根据导航网站的yaml配置文件从模块的仓库中选择所需的模块，下载所有代码，将它们与其他库结合编码，压缩和优化它们以供生产使用。

示例2

开发人员可以采用jQuery插件开发时使用SASS，使用“@extend”实现元素的继承和扩展。

例如下列样式表：

.wrapper {
  max-width: 1000px;
  margin: 0 auto;
}

.text {
  font-size: 16px;
  line-height: 24px;
}

.button {
  display: inline-block;
  padding: 10px;
  background-color: #333;
  color: #fff;
}

.button:hover {
  background-color: #555;
}

使用SASS语言，重写上述样式表，实现重利用CSS代码的方法：

.wrapper {
  max-width: 1000px;
  margin: 0 auto;

  .text {
    font-size: 16px;
    line-height: 24px;
  }

  .button {
    @extend .text;
    display: inline-block;
    padding: 10px;
    background-color: #333;
    color: #fff;

    &:hover {
      background-color: #555;
    }
  }
}

这种方法可以避免在多个样式表中重复书写样式代码。在可扩展和维护的CSS方法中实现真正的可重复使用性，这种现实方法可以为任何CSS代码库构建可扩展和适应性强的体系结构。