CSS架构和可维护CSS的三个支柱

关键要点

• 可维护的CSS架构对于避免难以维护的样式表至关重要，因为难以维护的样式表会产生意想不到的副作用，并需要对应用程序的CSS进行彻底重写。
• 三个基本概念或支柱构成了CSS架构设计的基石：构建块（例如Sass、高效的CSS选择器、BEM语法等）、将这些构建块编排成可靠、可维护的层次化CSS，以及软件工程原则的应用。
• 软件工程原则（例如关注点分离和SOLID原则）可以应用于CSS，以确保代码以可维护的方式建模现实。这包括应用DRY（不要重复自己）和WET（我们喜欢打字）等原则来提高代码的可维护性。
• 尝试在CSS中进行组合，例如使用mixin和继承，可以提供更强大的结构并减少为每种组合定义类的需要，从而实现更易于维护的CSS。

CSS架构的要素

如果您曾经继承了糟糕的CSS并有义务维护它，您可能会对那些将来会维护您的代码的其他人产生一些同情。在极端情况下，开发人员别无选择，只能完全重写应用程序的CSS。当每个补丁都引入多个意外副作用时，就会出现这些极端情况。一旦到了这一点，您的样式表就变得难以维护了。

您现在只能通过做出架构上可靠的决策来避免给未来的自己带来困境。这就是为什么学习在实践中构建可维护的CSS架构的来龙去脉非常重要的原因。

如果您不想成为传递不良代码的人，您可能会想知道如何从头开始创建可维护的CSS。你会从哪里开始呢？让我们看看在构建完美的项目时值得考虑的CSS架构要素。

可维护CSS的三大支柱

观看《成为办公室的CSS英雄：CSS架构》课程，学习创建结构化、可维护和可扩展的CSS！ 视频播放图标 观看本课程 观看本课程

在设计软件系统的CSS架构时，值得考虑三个概念。这些概念非常基础，我们可以将它们视为支撑建筑物结构的支柱。我们需要这三个支柱才能使我们的CSS经受时间的考验，并且不会崩溃成难以维护的混乱。

第一个支柱定义了CSS架构的构建块。这些构建块包含各种各样的解决方案和工具，例如使用Sass、编写高效的CSS选择器、块-元素-修饰符(BEM)语法、使用类而不是ID属性以及在适当的情况下使用相对单位。

虽然这种观点可以使您的CSS代码质量得到显着提高，但我们需要更高层次的组织才能使我们的工作系统化。因此，我们需要第二个支柱，它侧重于构建块的编排，以建立可靠、可维护的层次化CSS。将此层视为CSS架构的骨架。如果您对两种现成的CSS架构感兴趣，可以进一步研究ITCSS和SMACSS。

不幸的是，构建块和框架或CSS架构的有条理的使用都不能让您编写出坚如磐石、易于维护的CSS。通过应用软件工程原则，我们的代码变得可靠。这是编写可维护CSS的第三个支柱。

将软件工程原则应用于CSS

有很多不同的原则用于设计持久的软件。

这些原则通过确保您的CSS代码以可维护的方式对现实进行建模，从而为使用您选择的CSS工具和解决方案提供了一个目的。如果没有这些原则，使用任何CSS架构大多只是一个仪式。如果不遵守软件工程原则来编写CSS，一旦代码的大小变得难以维护，它往往会不堪重负而崩溃。

如果您是一位在某些编程语言方面经验丰富的软件工程师，您可能会发现将这些原则应用于像CSS这样的声明性语言非常令人惊讶。然而，在实践中，CSS已经成为一门成熟的语言，与其他语言类似，结构是对所需代码的深思熟虑。让我们检查一些主要原则的实际应用。

关注点分离

关注点分离是一种软件设计原则，负责在软件解决方案中定义清晰分离的职责。对CSS最明显的应用是用于样式的类和用于功能的类之间的分离。样式类不应出现在JavaScript代码中，而与功能相关的类不应出现在样式表中。

SOLID原则

Robert C. Martin定义了五个SOLID原则。其中一些原则同样适用于CSS和其它编程语言。

在我的CSS架构课程中，您会发现许多不同的应用程序详细介绍了如何在CSS代码的上下文中使用这些SOLID原则，包括单一职责原则和开闭原则。

在样式表层次结构中，我们应用单一职责原则。例如，ITCSS架构中的一层包含重置或规范化程序。标签样式建立在规范化程序之上，组件样式建立在标签样式之上。每一层都有一个单一、明确定义的职责。

将软件工程原则应用于CSS代码的可能是最著名的例子是DRY和WET CSS之间的对比。 DRY代表“不要重复自己”，而WET代表“我们喜欢打字”。

使代码DRY可以提高可维护性，因为每当您更改DRY代码时，您只需在一个地方执行该更改，并且可以高度确定您不必搜索其余的CSS代码库以查找相同代码的其他出现情况。

当您的CSS是WET时，您可以通过识别代码的公共部分并将此公共功能抽象到基类（或如果使用预处理器则为mixin）中来将其DRY化。

在代码中使用基类和子类称为继承，它在Sass中使用@extend执行。当我们使用mixin或使用Sass术语的@mixin指令时，我们使用组合。继承、组合和Sass常量的使用是执行抽象的强大工具。

尝试在CSS中进行组合

让我们来看一个实际的例子。假设我们的代码库中有四种类型的矩形。一个通用的矩形、一个圆角矩形、一个绿色矩形和一个圆角绿色矩形。

我们可以使用BEM命名约定如下标记每个矩形组件：

<code><div class="rectangle"></div>
<div class="rectangle--rounded"></div>
<div class="rectangle--green"></div>
<div class="rectangle--rounded--green"></div></code>

让我们使用继承在Sass中定义这四个类。我们从.rectangle的基类开始，然后创建修饰符类，这些类使用Sass @extend继承基类的样式：

<code>.rectangle {    
  width: 200px;  
  height: 100px;  
  margin: 20px;  
  padding: 20px;  
  display: inline-block;  
  border: 1px solid black;
}
.rectangle--rounded {  
  @extend .rectangle;
  border-radius: 20px;
}

.rectangle--green {  
@extend .rectangle; 
  background-color: green;
}

.rectangle--rounded--green {  
  @extend .rectangle--rounded;  
  @extend .rectangle--green;
}</code>

结构清晰，我们在修改后的类中没有重复自己。但是，创建五个修饰符的层次结构将产生31个类定义，其中大多数定义的内容只不过是@extend指令的集合。

组合为我们提供了更强大的结构。为了创建一个完全灵活的结构，我们只需要通用的矩形类和两个mixin：

<code>@mixin rounded {  
  border-radius: 20px;  
}

@mixin green { 
  background-color: green;
}</code>

假设我们有一个特殊的特性框。

<code><div class="feature-box"></div></code>

如果特性框是圆角的，但不是绿色的，我们只需要扩展矩形类，并包含使矩形变为圆角的mixin：

<code>.my-rectangle {  
  @extend .rectangle;  
  @include rounded;  
}</code>

结构保持灵活，无需为每种组合定义类。

迈向更好的CSS架构

我们可以得出结论，软件工程原则适用于CSS以及任何其他编程语言。这些原则介于两个层次之间：CSS构建块的微观层次和这些构建块的宏观层次结构。因此，在创建可维护的CSS时，学习如何在实践中应用这些原则是有益的。

为了帮助解释和演示这些原则的实际应用，我创建了一个关于坚如磐石的CSS架构的课程；CSS架构原则

在本课程中，我们将探讨CSS架构的三个支柱，并特别强调软件工程原则。您不仅将在理论上学习这些原则，而且还将有机会在许多实际示例中使用它们。

例如，我们将收集大量博客文章，并找出提供的CSS代码为何难以维护。我们将逐步完成重构CSS的过程，应用本文中简要介绍并在课程视频中深入介绍的原则。

我已经专门开辟了一个部分，通过使用ITCSS架构和Sass创建一个小型组件库来将CSS架构的三个支柱付诸实践。如果您有兴趣了解更多关于CSS架构的信息，请注册参加课程，并在课程中与我们见面！

关于CSS架构和可维护CSS的常见问题

CSS架构在Web开发中的重要性是什么？

CSS架构在Web开发中起着至关重要的作用。它提供了一种结构化的CSS代码编写方式，使代码更易于理解、维护和扩展。使用定义良好的CSS架构，开发人员可以避免诸如特异性冲突、命名冲突和代码重复等问题。它还促进了代码重用，减少了构建网页所需的时间和精力。

OOCSS方法如何促进可维护的CSS？

面向对象CSS(OOCSS)是一种促进代码重用以及更快、更高效的样式表的方法。它鼓励开发人员将CSS视为一个对象系统，每个对象都有其自身的属性和行为。通过将结构与外观以及容器与内容分离，OOCSS使创建可扩展和可维护的CSS变得更容易。

BEM方法在CSS架构中的作用是什么？

块、元素、修饰符(BEM)是一种用于HTML和CSS中类的命名约定。它提供了一个清晰、严格的结构，使代码更易于阅读和理解。BEM方法通过减少命名冲突和特异性冲突的机会，帮助创建健壮且可扩展的CSS架构。

SMACSS方法如何帮助创建可维护的CSS？

用于CSS的可扩展和模块化架构(SMACSS)是一种鼓励模块化和可扩展性的样式指南。它将CSS规则分为五种类型：基础、布局、模块、状态和主题，每种类型都有其特定的用途。这种分类有助于组织CSS代码，使其更易于维护和扩展。

ITCSS方法在CSS架构中的意义是什么？

倒三角CSS(ITCSS)是一种帮助管理大规模CSS的方法。它将CSS组织成几层，每一层都有其特定的作用。这种分层结构确保首先加载最通用的样式，然后加载更具体的样式，从而减少特异性问题的机会。

CSS变量如何促进可维护的CSS？

CSS变量（也称为CSS自定义属性）允许开发人员定义可重用的值。它们可以通过减少代码重复并使进行全局更改变得更容易来显著提高可维护性。例如，将颜色定义为变量允许在整个样式表中重用它，并在一个地方更改它。

CSS预处理器在可维护的CSS中的作用是什么？

像Sass和Less这样的CSS预处理器提供了诸如变量、嵌套、mixin和函数等功能，这些功能在常规CSS中是不可用的。这些功能可以极大地增强代码的可维护性和可读性，使编写复杂的CSS变得更容易。

基于组件的架构如何促进可维护的CSS？

基于组件的架构促进了可重用、独立组件的创建，每个组件都有其自己的HTML、CSS和JavaScript。这种方法使代码更具模块化，更易于维护，因为对一个组件的更改不会影响其他组件。

样式指南在CSS架构中的重要性是什么？

样式指南提供了一套CSS编写标准。它确保代码库的一致性，使代码更易于阅读和维护。样式指南可以包括命名约定、格式规则和最佳实践。

CSS lint工具如何促进可维护的CSS？

像Stylelint这样的CSS lint工具可以帮助执行编码标准并在问题成为问题之前捕获潜在问题。它们可以自动修复某些问题并为其他问题提供建议，从而提高代码质量和可维护性。

以上是CSS架构和可维护CSS的三个支柱的详细内容。更多信息请关注PHP中文网其他相关文章！