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

我领导了一个初级开发团队，他们会改变CSS样式，但没有意识到他们的改变也会影响我们网站的其他页面

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

获取公司中的或类似软件的许可证，通过此操作，您可以为所有这些页面创建视觉基线，如果该页面发生视觉变化，Applitool应用程序将抛出错误

---

如果更改对您来说是可以接受的，那么您可以继续并接受这些更改作为您的新基线，如果不可以，那么您需要重新审视这个问题。

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

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

您可以使用名称空间。它建议您使用不同的名称空间来帮助您进行css缩放

有些名称空间是：

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

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

u-：表示该类是一个实用类。它有一个非常特定的角色（通常只提供一个声明），不应绑定或更改。它可以重用，并且不绑定到任何特定的UI。您可能会从库和方法（如SUIT）中识别出这个名称空间

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

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

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

\：表示这门课是最差的——一个黑客！有时，尽管非常罕见，但我们需要在标记中添加一个类来强制某些东西工作。如果我们这样做，我们需要让其他人知道这个类不太理想，希望是暂时的（即不要绑定到这个类上）

js-：表示DOM的这一部分有一些行为作用于它，JavaScript绑定到它以提供这种行为。如果您不是一名使用JavaScript的开发人员，请不要使用这些代码

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

欲了解更多信息，请阅读此处：

---

我知道这听起来很愚蠢，但他们应该知道类是全局的。在任何好的IDE中快速搜索都会告诉他们使用的文件，如果他们不想更改其他文件，就必须更加具体。告诉他们这应该足够了。如果您的团队正在处理生产代码，他们应该已经知道这一点，或者他们应该知道他们正在编辑什么css文件，以及它如何在范围内应用于站点。@SourceOverflow这是真的。我计划教他们CSS特异性计算确保np我理解原因，在公司环境中，这之所以如此困难，是因为资源可能会发生变化，除非他们事先知道这些变化如何影响，否则他们不会知道，你也不会。所以，自动化视觉测试是一种可行的方法，我的朋友。这实际上是一个非常好的主意+我想补充两件事：1）它们不是真正的名称空间，而是前缀。距离名称空间最近的是类似于

侧栏容器的东西，稍后我使用
.sidebar container.button
引用该容器中的按钮。2） 除非您必须注意性能，尤其是jQuery，否则您应该考虑使用属性而不是带有
is-，has-
前缀的类作为状态，因为这样可以更清晰地区分样式和函数，并且在使用它们时更清晰。