【.com速译】你有没有过这样的经历，在开发一个大型的前端项目时，项目的JavaScript源文件结构很清晰，但是当你要对CSS进行改动时，你会遇到一堆乱七八糟的非结构优化CSS。即使您知道要添加或修改哪些CSS属性，在编写代码时仍然需要小心，因为有很多地方会覆盖CSS属性，在某些情况下甚至会使用!important。由于担心添加或更改代码会破坏现有样式，您创建了一个新规则，这增加了混乱。这是很多前端项目都面临的问题。当你的项目开始扩展或新的前端工程师加入团队时，了解如何在你的项目代码库中组织CSS非常重要。本文将帮助您通过不同的想法创建更强大的CSS架构。为什么我们需要一个强大的CSS架构？坚实的CSS架构基础可以支持项目开始扩展和发展。如果基础没有经过深思熟虑和规划，那么将来，您的项目很可能会倒闭。当然，CSS不太可能像JavaScript错误那样破坏你的系统，但它会产生不同的问题，使项目工作变得非常困难。如果您的团队对在项目中添加或更改CSS没有信心，他们会添加影响用户体验的错误并使项目受到影响。因此，在开始一个项目的时候，有一个扎实的CSS架构是非常有必要的，**毕竟写不好的CSS比删掉它容易多了。**在我的印象中，CSS在前端领域并没有得到广泛的关注。我们花了很多时间学习最新的JavaScript框架，但坚持在对CSS有简单了解的情况下构建Web模块。我认为这是我们都会犯的错误，也是我想改变的。我们可以使用哪些CSS架构？当我开始研究这个话题时，一些CSS架构脱颖而出：OOCSS（面向对象的CSS）SMACSS（CSS的可伸缩和模块化架构）ACSS（原子CSS）BEM（块元素修饰符）这次我简要描述每个方法。什么是BEM？BEM代表块元素修饰符，是一种构建CSS的方法，建议在创建样式类时使用一致的命名约定。BEM推荐的命名约定是block-name__element-name--modifier-name。block-name：描述应该设置样式的块。例如：照片。__element-name：描述块中应该设置样式的元素。例如：照片_图像。--modifier-name：描述正在设置样式的块或元素的修饰符。例如：photo__image--黑白。什么是OOCSS？OOCSS代表面向对象的CSS，它是一种设计CSS的方法，建议使用抽象来分离结构和视觉样式，同时消除CSS重复。下面的例子：.button{padding:10px16px;color:blue;}.h1{font-size:2em;color:blue;}OOCSS将改为如下：.button{padding:10px16px;}.h1{font-size:2em;}.primary{color:blue;}通过我们的新抽象，我们可以将主类分配给两个button和h1元素，并赋予蓝色。这有助于我们保持样式表的清洁并避免重复。什么是SMACSS？SMACSS代表CSS的可扩展和模块化架构。它需要在五个不同类别下构建样式：基础、布局、模块、状态和主题。基本样式应保留您的默认CSS样式。这些样式将用于网站或应用程序的所有元素。布局样式应包含用于将页面分隔成其结构组件的元素的样式。应在此处定义页眉、页脚和网格等元素的样式。模块样式应包含跨站点或应用程序的可重用元素的样式。状态样式应该定义网站或应用程序中不同元素的不同状态。“is-active”、“is-disabled”和“is-success”等样式。主题样式应确定元素的外观。他们应该超越基本样式，开始将您的项目样式融入网站或应用程序。什么是ACSS？ACSS代表AtomicCSS，它专注于创建许多小型CSS实用程序类供您在HTML中使用。和OOCSS类似，他们都推荐将重复的属性值分离到自己的规则中。ACSS可以看作是OOCSS的更极端版本，因为它鼓励您在尽可能小的级别上创建样式。这是一个使用AtomicCSS项目中的一些样式规则的示例：/*Colors*/.color-primary{color:blue;}.color-secondary{颜色：紫色；}/*边距*/.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】
