编写CSS容易出错的地方（以及如何避免它们）

本文来自静华网-一个有气质的网站-编写CSS容易出错的地方（以及如何避免它们）

我使用CSS越多，我认为它越是狂野的西部。它是成熟的，无处不在的，但缺乏像其他类似工具中给出的基本常识特征。在与几个具有良好架构后端，广泛的测试覆盖范围和良好的文档的现代MVC网络应用程序工作后，我经常发现样式表是巨大的意大利面垃圾堆。

我可能是不公平的。它诞生于网络仍在发展的时代，观念正在被抛出，流行的观念开始坚守。

尽管我相信CSS很难，但世界上的每个网站都需要它，如果没有它，就无法生存。所以这里有一些关于什么是坏的以及如何在写作时保持理智的想法。这将成为一份工作清单，所以未来会让我感到困扰的任何事情都会落到实处。

1.全局样式

我对CSS的第一个也是最大的挑战是，任何样式声明都可以改变页面上任何元素的任何方面。如果你刚刚开始将脚趾头浸入网络，这是超级强大的，但对于大型网站来说，这往往是非常危险的。几乎所有的前端开发人员在他们职业生涯的某个时候都会添加/更新/删除一个样式，只是发现它偶然泄露到另一页的其他部分。

我认为这是CSS最重要的问题。它使任何模块化概念都非常困难。明天，开发人员可能会粘贴几个!important标签，并废弃封装好的可重用小部件。

CSS

1 2 3 4 5 6 7 8 9 10

.blog-post {    .title {      font-size : 2rem ;    } }   # Grrrr, styles leaking everywhere h1 {    font-size : 5rem !important ; }

SASS / SCSS帮助我们在这里，但不完全。如果你是一个很好的小开发者，那么通过在父类中嵌套规则可以显着减少泄漏风格。

Sass

1 2 3 4 5 6 7 8 9 10 11 12

.blog-post {    .title {      font-size : 2rem ;    } }   # A bit better .home {    h1 {      font-size : 5rem ;    } }

这样比较好，但这不是一个傻瓜证明的解决方案。它只需要一个不小心的风格带你回到地狱。一个紧迫的最后期限迫使你做出一些可疑的妥协（即黑客）。

如果您告诉任何后端开发人员他们必须使用一种赋予全局变量全局范围的编程语言，让每个对象的内部状态都可见，让其他开发人员重写他们的代码，他们可能会当场辞职。但这是CSS开发的疯狂现实。一切都准备好了。不变性？Pfffshh。

最佳解决方法

我所遇到的围绕全球范围的最佳方式是采用CSS命名系统BEM，该系统期望开发人员以模块化方式持续编写代码。它避开危险泄漏习惯像造型使用标签（例如h1，p等），而是更喜欢在类名的造型。为了避免与类似名称发生意外碰撞，故意命名为模块（或BEM术语中的块）的类名。

通常有一个使用标签来创建一组默认样式的参数。对于大多数网站来说，这通常是一个好主意。但是，如果你只是在任何地方压倒这些风格，我会说不要打扰。把它们放在通用工具类（如.paragraph，.heading-1等），因为你需要使用它们。

BEM绝不是完美的。在任何地方写大，长，名字空间的课程都会很麻烦。你还在写CSS。你仍然可以编写可笑的风格，把所有东西都搞砸了。你仍然需要纪律。但是它所提供的是结构和一套规则，可以帮助你编写更好，更可维护的风格。

2.特异性

特定性是CSS用来决定哪种风格比其他风格更重要的机制。根据我的经验，它几乎总是以最后（或在这种情况下是最高的）进行竞赛。大量的!important标签，任意ID的样式以及不需要的div包装，其整体目的是将特定的特性微调到比现有的风格稍高一点。真实的故事。

如果你正在制作一个新的用户界面元素，但另一个由你的同事编写的非常具体的风格正在你的方向，你会：

1. 投入时间了解你的同事的UI小部件，找出风格变化对网站其他部分的影响，并据此重构。
2. 或者用一个!important。

根据您所工作的环境类型和代码库的大小，您的选择可能会有所不同。

面向对象的语言通过继承和子类化来解决这个问题。最不重要的和非特定的方法位于继承树的顶部，最具体的位于底部。在我看来，将这些面向对象原则应用于UI的工作要比CSS的特异性要好得多。UIKit例如，熟悉iOS的任何人都会熟悉将通用UIView小部件与更具体的子类配合使用，以覆盖某些属性。另一方面，你通常需要编写更多的代码，并在这种覆盖行为上多花点心思。

最佳解决方法

不要参加到底的比赛。一般来说，确保你的风格不太具体。

• 尽量不要使用!important（有时你必须在使用第三方嵌入时）。
• 不要在ID（非常具体）上设计风格。
• 使用类名（非特定）。
• 避免在风格选择器中包含后代，因为这会增加特异性。使用SASS / SCSS，嵌套样式可以编译为后代选择器，因此不要嵌套。

如果您使用的是BEM，那么您已经遵循了这些规则。