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

你曾经开发大型前端项目时是不是有这样的经历，项目的 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 的编写方式，那么长远来看，遇到问题时花费的时间将会更多。所以，为了后续更高效的编写代码，前期的规则制定很有必要。

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

网页标题：一份前端开发人员的架构样式指南，请查收！
网页网址：http://www.shufengxianlan.com/qtweb/news35/347885.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容