一份前端开发人员的架构样式指南，请查收！

【51CTO.com快译】你曾经开发大型前端项目时是不是有这样的经历，项目的 JavaScript 源文件结构清晰，但想要对 CSS 进行更改时，就会遇到一堆乱七八糟的非结构化 CSS 。

虽然你知道添加或修改哪些 CSS 属性，但是写代码时还是很小心谨慎，因为在很多地方有 CSS 属性被覆盖，在某些情况下，甚至还使用了 !important。由于担心增加或者修改代码会破坏现有样式，所以你会创建一个新的规则，这会让混乱的情况进一步增加。

这是许多前端项目都面临的问题。

当你的项目开始扩展或新的前端工程师加入团队时，理解如何在你的项目代码库中组织 CSS 是非常重要的。本篇文章将通过不同的想法，帮助你创建更强大的CSS架构。

为什么我们需要强大的CSS架构?

稳固的 CSS 体系结构基础可以在项目开始扩展和发展时为其提供支持。如果基础没有经过深思熟虑的思考和规划，那么未来，你的项目很可能会倒塌。

当然，CSS不太可能像 JavaScript 错误那样破坏你的系统，但它可以产生不同的问题，使项目工作非常困难。如果你的团队对在项目中添加或更改 CSS 没有信心，那么他们会添加 Bug，这些 Bug 会影响用户的体验，使项目受到影响。

因此，开始一个项目时，有一个可靠的 CSS 架构是非常必要的，**毕竟编写糟糕的CSS 要比删除它更容易。**

在我的印象里，CSS在前端领域并没有被广泛的关注。我们花费大量的时间学习最新的 JavaScript 框架，却坚持用浅显的 CSS 理解凑合着构建 Web 模块。

我想这是我们都犯过的错误，也是我想要改变的事情。

我们可以使用哪些CSS架构?

当我开始研究这个主题时，有许多CSS架构脱颖而出：

• OOCSS (Object-Oriented CSS)
• SMACSS (Scalable and Modular Architecture for CSS)
• ACSS (Atomic CSS)
• BEM (Block Element Modifier)

这次我简要描述下每种方法。

什么是 BEM？

BEM代表块元素修饰符，是一种构建CSS的方法，推荐在创建样式类时使用一致的命名约定。BEM推荐的命名约定是 block-name__element-name--modifier-name。

• block-name：描述应设置样式的块。例如：photo。
• __element-name：描述该块中应设置样式的元素。例如：photo_image。
• --modifier-name：描述正在设置样式的块或元素的修改器。例如：photo__image--black-and-white。

什么是OOCSS？

OOCSS代表面向对象的CSS，它是一种设计CSS的方法，推荐使用抽象来分离结构样式和可视化样式，同时消除CSS的重复。

下面这个例子：

.button { 
padding: 10px 16px; 
color: blue; 
} 
.h1 { 
font-size: 2em; 
color: blue; 
} 

OOCSS会更改成如下：

.button { 
padding: 10px 16px; 
} 
.h1 { 
font-size: 2em; 
} 
.primary { 
color: blue; 
} 

通过我们的新抽象，我们可以将 primary 类分配给两个 button 和 h1 元素，并被赋予 blue 颜色。这有助于我们保持样式表整洁，避免重复。

什么是 SMACSS？

SMACSS代表CSS的可扩展和模块化体系结构。它要求在五种不同类别下构建样式：base，layout，module，state 和 theme。

• Base 样式应保留你默认的CSS样式。这些样式将用于网站或应用程序的所有元素。
• Layout 样式应该包含元素的样式，这些元素的设计目的是将页面分离为其结构组件。页眉、页脚和网格等元素的样式应该在这里定义。
• Module 样式应该包含跨网站或应用程序的可重用元素的样式。
• State 样式应该定义你的网站或应用程序中不同元素的不同状态。诸如“is-active”、“is-disabled”和“is-success”之类的样式。
• Theme 样式应该决定元素的外观。他们应该超越基本的样式，并开始注入你的项目的风格到网站或应用程序。

什么是 ACSS？

ACSS代表 Atomic CSS，它专注于创建许多小型 CSS 实用工具类，供你在 HTML 中使用。与 OOCSS 相似的是，它们都建议将重复的属性值分离到它们自己的规则中。ACSS可以被看作是OOCSS的一个更极端的版本，因为它鼓励你在尽可能小的层次上创建样式。

下面是使用Atomic CSS项目中的一些样式规则示例：

/* Colours */ 
.color-primary { color: blue; } 
.color-secondary { color: purple; } 
 
/* Margins */ 
.mt-1 { margin-top: 5px; } 
.mt-2 { margin-top: 10px; } 
.mb-1 { margin-bottom: 5px; } 
.mb-2 { margin-bottom: 10px; } 

与OOCSS的不同是，ACSS 建议在 CSS 选择器的命名约定中使用CSS属性。比如在OOCSS中你可以定义一个 .primary 类将元素的颜色更改为蓝色。但在 ACSS 中你需要定义一个 .color-primary的类。

应该选择哪种 CSS 架构？

简单的说，选哪个都没有关系。因为上面的几种架构都有优点和缺点。不同的人在选择上会有不同的看法。

最重要的是，在开始编写CSS之前，确保您的团队已经同意使用一致的格式。这种格式可以是上面提到的架构之一，或者是不同架构的混合，或者是你自己想出来的东西。

负责该项目的工程团队应该理解这种结构，以便编写的任何新CSS都遵循选择的样式。最好是在文档中解释体系结构，这样新加入团队的工程师也能够快速、轻松地了解项目所选择的体系结构。

总结

无论你选择如何构建项目，都必须确保不要忘记 CSS，并尝试维护 CSS 代码保持一致样式，使新工程师更容易上手，让他们能够自信地进行更改。确保这些规则被记录和执行，最好以自动化的方式。

如果在项目开始阶段不花时间创建一套强大的规则来管理 CSS 的编写方式，那么长远来看，遇到问题时花费的时间将会更多。所以，为了后续更高效的编写代码，前期的规则制定很有必要。

【51CTO译稿，合作站点转载请注明原文译者和出处为51CTO.com】

【责任编辑：黄显东 TEL：（010）68476606】
本文转载自网络，原文链接：https://hackernoon.com
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！