与这三个CSS方法论驯服不守规矩的表

本文是与SiteGround合作创作系列文章的一部分。感谢您支持使SitePoint成为可能的合作伙伴。

本文将探讨三种成功的CSS架构方法，包括其原则、目标和优势。

关键要点

• BEM、SMACSS和ECSS是三种用于管理CSS架构的方法，每种方法都有其自身的原则、目标和优势。
• BEM（块-元素-修饰符）专注于长期易于维护项目和组件的可重用性，使用智能命名约定将CSS代码组织成可重用的模块。
• SMACSS（可扩展和模块化CSS架构）对CSS规则进行分类，以识别模式并创建用于编写可维护和可重用CSS的指南，其灵活的命名约定有助于代码组织和团队效率。
• ECSS（持久性CSS）强调隔离，将构建每个组件所需的所有代码封装在其自己的共享文件夹中，并使用严格的CSS命名约定。从长远来看，这种方法支持轻松维护和最小化文件大小的增加。

为什么CSS代码会失控？

保持CSS代码精简、可重用和可维护非常困难。如果您未能以一致的方式执行任何编码和组织规则，小型、中型和大型项目都可能出现这种情况，尤其是在有多个开发人员参与的项目中。当代码库很大，随着时间的推移经历了许多更改，并且缺乏组织时，团队通常更倾向于在样式表文档的末尾添加新的样式规则，而不是删除部分代码或修改现有代码。主要原因通常是编辑或删除CSS声明的效果是不可预测的，并且可能导致项目中的某个地方设计中断。这是一个失败的策略，它会导致代码重复、优先级问题（覆盖样式规则变成一场战斗）以及整体膨胀。通常情况下，选择最适合您需求的方法是一个迭代过程，它从熟悉现有方法开始。以下三种方法可以帮助您应对杂乱样式表带来的挑战。

BEM

BEM代表块-元素-修饰符。它是Yandex创建的一种用于构建CSS的架构方法。BEM方法的目标是>开发快速启动并长期支持的网站。它有助于创建可扩展和可重用的界面组件。BEM网站

这里的关键概念是长期易于维护项目和组件的可重用性。BEM的核心策略是借助智能命名约定将CSS代码组织成可重用的模块。让我们仔细看看。

什么是块？

识别块是应用BEM方法的关键步骤。块是一个>功能独立的页面组件，可以重复使用。在HTML中，块由class属性表示。BEM文档。

在决定将什么视为块时，问问自己是否可以轻松删除该部分代码并在其他地方使用它。例如，您可以将网站页眉或页脚视为一个块。您可以安全地嵌套块，例如，您可以将菜单块放在页眉块内。

<ul class="menu"></ul>

因为原则上您应该能够在页面的任何位置重复使用块，所以块的CSS不应设置任何边距或定位规则。最后，在选择名称时，请确保名称描述块的用途是什么，而不是它的外观或状态。换句话说，它的名称应该回答这个问题：它是什么？（例如，页眉、菜单等），而不是它是什么样的？（例如，固定页眉、小型菜单等）。

什么是元素？

根据BEM方法，元素是>块的一部分，它没有独立的含义，并且在语义上与其块相关联。获取BEM

以下是适用于元素的一些原则：

• 元素只能存在于块内
• 元素不能属于其他元素，它们只能是块的一部分
• 您可以构建嵌套元素
• 元素名称描述其用途，而不是其外观
• 在命名元素时，您需要遵循以下约定：block__element

什么是修饰符？

修饰符是>定义块或元素的外观、状态或行为的实体。BEM文档

例如，页眉块可以固定在页面顶部，手风琴块可以打开或关闭，按钮块可以禁用等。BEM修饰符的命名约定如下所示：blockelementmodifier。这是BEM方法的核心。此外，BEM还提供文件结构组织原则、一套工具和一个活跃的社区来提供支持。

使用BEM的优点

以下是您在项目中使用BEM的一些优势：

• 新开发人员可以快速理解标记中组件与CSS规则之间的关系
• 它促进团队的生产力。在大型项目中，这种优势尤其明显
• 命名约定降低了类名冲突和样式泄漏的风险
• CSS不会与页面内特定位置的标记紧密关联
• CSS 是高度可重用的

SMACSS

可扩展和模块化CSS架构（SMACSS）是一种用于组织和编写CSS代码的Web开发方法。其创建者Jonathan Snook将其描述如下：>SMACSS是一种检查设计过程并使这些严格的框架适应灵活思维过程的方法。当使用CSS时，它试图记录一种一致的站点开发方法。SMACSS网站

其核心是对CSS规则进行分类。分类会带来模式，即您在设计中重复出现多次的内容，您可以围绕这些模式制定编写可维护和可重用CSS的指南。SMACSS核心类别是：

• 基础 — 此类别包含控制元素默认外观的CSS规则。选择器包括单个元素选择器、属性选择器、伪类选择器、同级选择器等。例如，html、body、a、a:hover等。
• 布局 — 此类别用于将页面划分为各个部分的样式。
• 模块 — 模块是设计的可重用积木式部件，例如菜单、对话框、搜索框等。
• 状态 — 此类别包括用于描述布局或模块在特定状态（例如，可见或隐藏、展开或关闭等）或特定视图（例如，主页或内部页面）中的外观的样式。
• 主题 — 此类别类似于状态，因为它包含负责布局和模块外观的CSS规则。并非所有项目都需要此额外类别，但了解它的存在总是有好处的。

SMACSS命名约定

与上面概述的类别相关，SMACSS提出了一种命名约定，以帮助代码组织和开发团队的生产力。布局、状态和模块规则以有意义的名称或缩写作为前缀。对于布局规则，例如layout-、grid-甚至简单的l-都是可接受的前缀。对于状态规则，约定是用is-作为状态前缀，例如is-hidden、is-visible等。至于模块，只需使用您正在构建的组件的名称，例如.menu、.dialog等。例如，要设置打开的对话框的样式，您可以在CSS中使用.dialog.is-open之类的选择器。模块内的相关元素以及同一模块的变体应使用模块的基本名称作为前缀。此外，尽量不要使用ID、元素选择器或嵌套选择器。例如，要选择名为menu的模块内的菜单项，不要像这样编写选择器：.menu li a，而应使用类似.menu-link或.menu-item的内容。与BEM不同，SMACSS不会规定过于严格的命名约定。Jonathan Snook明确表示：>……不要觉得您必须严格遵守这些指南。制定一个约定，记录下来，并坚持下去。SMACSS网站

使用SMACSS的优势

SMACSS方法进行CSS编码的一些优势包括：

• 它为模块化、可维护的CSS提供了有效的指南，同时避免过于严格
• 您可以快速学习（和教授）SMACSS
• SMACSS命名约定不如BEM的冗长，在某些方面更容易掌握
• 它足够灵活，可以很好地用于大型和小型项目

ECSS

持久性CSS或eCSS是>编写样式表以用于大型、快速变化、长期存在的Web项目的指南。eCSS网站

这种CSS方法确实引起了我对其作者Ben Frain对处理大规模CSS挑战的原始观点的极大兴趣。eCSS的核心概念是隔离。隔离意味着每个组件都是一个独立的代码单元，没有依赖性、没有上下文负担，可重用且可移除，而不会造成样式泄漏的风险。这主要通过以下方式实现：

• 将所有代码（不仅是CSS，而且是构建每个组件所需的所有技术）封装在其自己的共享文件夹中。
• 每次需要与现有组件类似但有一些变体的组件时，即使变体很小，也要创建一个全新的组件。
• 使用严格的CSS命名约定

根据上述第二点，很明显，重复属性和值对于eCSS来说不是问题。在这方面，eCSS代表了与BEM和SMACSS等方法的根本区别，后者扩展或抽象现有组件，从而避免或尽可能避免代码重复。这是否意味着eCSS会生成大型样式表文件？不一定。在使用文件压缩进行了一些测试后，Ben Frain得出结论，由于“gzip在压缩重复字符串方面非常高效”，因此使用eCSS与其他更倾向于抽象而不是重复的方法之间的文件大小差异非常小。

使用eCSS的好处

以下是应用eCSS方法并接受其对重复的观点可以获得的好处：

• 通过保持每个视觉模式的隔离性，CSS代码更容易维护
• 虽然您会发现重复的属性和值，但从长远来看，文件大小的增加仍然很小。这是因为模块是自包含的、独立的单元，您可以随时快速删除不再需要的模块，而无需担心会破坏设计
• 创建模块所需的所有语言/技术文件共享同一个文件夹，这使得编辑和物理删除不再需要的内容都变得非常容易。

您可以在Frain的书《持久性CSS》中阅读这种创新方法的所有细节。

结论

编写可维护且组织良好的CSS代码具有其挑战性。在本文中，我介绍了三种可以帮助完成此任务的方法。这绝不是一个详尽的列表，而且这些方法都不能解决您在项目中可能遇到的所有问题。只需尝试一下，看看什么适合您。您还可以尝试将BEM和SMACSS结合使用，甚至可以根据您自己设定的问题集制定自己的方法。您编写组织良好、易于管理的CSS代码的黄金法则是什么？您认为使用CSS架构方法可以减轻痛苦吗？点击评论框让我知道。

关于CSS架构方法的常见问题

OOCSS、SMACSS和BEM方法的主要区别是什么？

OOCSS、SMACSS和BEM都是旨在帮助开发人员编写干净、可维护和可扩展CSS的CSS方法。OOCSS或面向对象的CSS鼓励开发人员编写可重用、面向对象的代码。它专注于将结构与外观分离，并将容器与内容分离。SMACSS或可扩展和模块化CSS架构提供对CSS规则进行分类的指南，以使您的代码更灵活和更易于管理。BEM或块元素修饰符是一种命名约定，使您的CSS更易于阅读和理解。它将UI划分为独立的块，这些块可以重复使用和组合。

如何在CSS中实现WordPress编码标准？

WordPress有自己的一套CSS编码标准，以确保不同项目之间的一致性和可读性。这些标准包括命名约定、缩进、间距和注释的规则。要实现这些标准，您可以使用带有WordPress配置的CSS棉绒工具，如Stylelint。

样式表在Web开发中的作用是什么？

观看《成为办公室的CSS英雄，使用CSS架构制作结构化、可维护和可扩展的CSS》！观看本课程 样式表是一个文件或代码形式，它定义网页的布局和设计。它控制页面上HTML元素的视觉呈现，包括布局、颜色、字体和动画。CSS（层叠样式表）是最常用的样式表语言。

CSS方法如何改进我的Web设计流程？

CSS方法可以通过使您的CSS更具组织性、可重用性和可扩展性来极大地改进您的Web设计流程。它们提供了一种编写CSS的结构化方法，这有助于降低代码的复杂性，使其更易于理解和维护，并提高性能。

在HTML中编写CSS的最佳实践是什么？

在HTML中编写CSS的最佳实践包括通过使用外部样式表将样式与内容分离，有效地使用选择器，对相关的样式进行分组，使用速记属性以及对代码进行注释以提高清晰度。验证您的CSS也很重要，以确保它没有错误并且与不同的浏览器兼容。

如何使我的CSS代码更易于维护？

为了使您的CSS代码更易于维护，您可以使用CSS方法，如OOCSS、SMACSS或BEM，它们提供构建和组织代码的指南。其他策略包括将CSS模块化，使用Sass或Less之类的预处理器以及遵循命名约定。

使用CSS预处理器的优点是什么？

Sass和Less之类的CSS预处理器允许您在CSS中使用变量、嵌套、mixin和函数，这可以使您的代码更易于阅读和维护。它们还允许您编写更简洁和更强大的CSS。

如何确保我的CSS与不同的浏览器兼容？

为了确保您的CSS与不同的浏览器兼容，您可以使用Can I Use之类的工具，它显示了CSS属性在不同浏览器中的兼容性。对于并非所有浏览器都完全支持的CSS属性，使用供应商前缀也很重要。

CSS在Web设计中的重要性是什么？

CSS在Web设计中至关重要，因为它控制网页上内容的视觉呈现。它允许您创建具有视觉吸引力的网站，这些网站具有始终如一的设计和布局。它还使您可以根据不同类型的设备（如台式机、平板电脑和移动电话）调整演示。

如何了解更多关于CSS方法的信息？

在线有很多资源可以学习CSS方法。SitePoint、Smashing Magazine和Mozilla Developer Network等网站提供深入的文章和教程。您还可以在Coursera和Udemy等平台上找到在线课程。

以上是与这三个CSS方法论驯服不守规矩的表的详细内容。更多信息请关注PHP中文网其他相关文章！