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

时间:2017-11-03 19:55:35

标签: css css3

我领导一个初级开发人员团队,他们会改变CSS样式而不会意识到他们的变化也会影响我们网站的其他页面。

是否有一种扩展或技术可以让他们知道如果他们改变了这种类的颜色,所有这些页面(我们有超过100页)都会受到影响吗?

2 个答案:

答案 0 :(得分:1)

不幸的是,这并不容易。这一切都取决于你的CSS的结构和维护情况。

有许多css指南可以帮助您解决此问题。

您可以使用命名空间。它建议您使用不同的单独命名空间来帮助您进行css扩展。

一些名称空间是:

o - :表示某些东西是一个对象,并且它可以在任何数量的无关上下文中用于您当前可以看到它的那个。修改这些类型的类可以可能会在许多其他不相关的地方产生连锁反应。小心翼翼。

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

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

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

s - :表示类创建新的样式上下文或范围。与主题相似,但不一定是化妆品,这些应该谨慎使用 - 如果不明智地使用,它们可能会被滥用并导致可怜的CSS。

is-,has - :表示由于状态或条件,有问题的UI当前以某种方式设置样式。这个有状态的命名空间很华丽,来自SMACSS。它告诉我们,由于调用了某个状态,DOM当前应用了临时,可选或短期样式。

_:表示这个班级是最糟糕的 - 一个黑客!有时候,虽然很少,但我们需要在标记中添加一个类来强制某些东西起作用。如果我们这样做,我们需要让其他人知道这个类不太理想,并且希望是暂时的(即不要绑定到此类)。

js - :表示DOM的这一部分有一些行为,并且JavaScript绑定到它以提供该行为。如果您不是使用JavaScript的开发人员,请完全保留这些内容。

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

如需更多阅读:

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

答案 1 :(得分:0)

获取公司Applitool或类似软件的许可证,通过这种方式,您可以为所有这些页面创建可视化基线,如果该页面在视觉上发生变化,Applitool应用程序将抛出错误。

如果您可以接受更改,那么您可以继续接受更改作为您的新基线,如果没有,那么您需要重新审视该问题。