|
|
|
|
公众号矩阵

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

当你的前端项目开始扩展或新的前端工程师加入团队时,理解如何在你的项目代码库中组织 CSS 是非常重要的。

作者:Ian Holden来源:hackernoon|2021-02-05 16:55

【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的重复。

下面这个例子:

  1. .button { 
  2. padding10px 16px
  3. colorblue
  4. .h1 { 
  5. font-size2em
  6. colorblue

OOCSS会更改成如下:

  1. .button { 
  2. padding10px 16px
  3. .h1 { 
  4. font-size2em
  5. .primary { 
  6. colorblue

通过我们的新抽象,我们可以将 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项目中的一些样式规则示例:

  1. /* Colours */ 
  2. .color-primary { colorblue; } 
  3. .color-secondary { colorpurple; } 
  4.  
  5. /* Margins */ 
  6. .mt-1 { margin-top5px; } 
  7. .mt-2 { margin-top10px; } 
  8. .mb-1 { margin-bottom5px; } 
  9. .mb-2 { margin-bottom10px; } 

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

应该选择哪种 CSS 架构?

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

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

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

总结

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

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

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

【责任编辑:黄显东 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

订阅专栏+更多

数据湖与数据仓库的分析实践攻略

数据湖与数据仓库的分析实践攻略

助力现代化数据管理:数据湖与数据仓库的分析实践攻略
共3章 | 创世达人

5人订阅学习

云原生架构实践

云原生架构实践

新技术引领移动互联网进入急速赛道
共3章 | KaliArch

31人订阅学习

数据中心和VPDN网络建设案例

数据中心和VPDN网络建设案例

漫画+案例
共20章 | 捷哥CCIE

217人订阅学习

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊

51CTO服务号

51CTO官微