css - 如何判断我的 CSS 样式更改是否会影响其他页面？

Question

我领导着一个由初级开发人员组成的团队，他们会更改 CSS 样式，但没有意识到他们的更改也会影响我们网站的其他页面。

有没有我可以使用的扩展或技术让他们知道如果他们改变这个类的颜色，所有这些具有相同类的页面(我们有超过 100 个页面)也会受到影响？

Answer 1

不幸的是，这并不容易。这完全取决于您的 CSS 的结构和维护情况。

有很多 css 指南可以帮助您解决这个问题。

您可以做的是使用命名空间。它建议您使用不同的个人 namespace 来帮助您进行 css 缩放。

一些命名空间是:

o-: 表示某物是一个对象，并且它可以在任何数量的与您当前可以看到它的上下文无关的上下文中使用。对这些类型的类进行修改可以可能会在许多其他不相关的地方产生链式 react 。小心行事。

c-: 表示某物是一个组件。这是一个具体的、特定于实现的 UI 片段。您对其样式所做的所有更改都应该在您当前查看的上下文中可以检测到。修改这些样式应该是安全的并且没有副作用。

u-: 表示这个类是一个实用类。它具有非常特殊的作用(通常只提供一个声明)，不应绑定(bind)或更改。它可以重复使用，并且不依赖于任何特定的 UI。您可能会从 SUIT 等库和方法中认出这个命名空间。

t-: 表示类负责将主题添加到 View 。它让我们知道 UI 组件的当前外观可能是由于主题的存在。

s-: 表示一个类创建了一个新的样式上下文或范围。类似于主题，但不一定是装饰性的，它们应该谨慎使用——如果使用不当，它们可能会被滥用并导致糟糕的 CSS。

is-, has- 表示所讨论的 UI 部分当前由于状态或条件而以某种方式设置样式。这个有状态命名空间非常漂亮，来自 SMACSS。它告诉我们，由于调用了某个状态，DOM 当前应用了一个临时的、可选的或短暂的样式。

_:表示这个类是最坏中的最坏的——一个 hack!有时，虽然非常罕见，但我们需要在我们的标记中添加一个类以强制某些东西工作。如果我们这样做，我们需要让其他人知道这个类不是理想的，并且希望是临时的(即不要绑定(bind)到这个)。

js-: 表示 DOM 的这一部分有一些行为作用于它，并且 JavaScript 绑定(bind)到它以提供该行为。如果您不是使用 JavaScript 的开发人员，请不要管这些。

qa-:表示 QA 或测试工程团队正在运行自动化 UI 测试，需要查找或绑定(bind)到 DOM 的这些部分。与 JavaScript 命名空间一样，这基本上只是为非 CSS 目的在 DOM 中保留 Hook 。

更多内容请阅读这里:

https://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/