“弯曲”手中的任何功能都会变坏。 进口商也不例外。 坏事不是他所知道的,而是他的使用方式。

如何运作!
在CSS中,我们使用特异性机制对样式进行优先级排序。 我们编写级联或复杂的选择器,增加选择器的权重,从而向浏览器指示某些样式相对于其他样式的优先级。
例如:
.content .title { color: red; } .title { color: blue; }
在这种情况下,尽管事实是将蓝色应用于红色之后的标题,结果我们仍然会得到红色标题。 因为第一个选择器更具体(如果您突然间对它不熟悉,请不要继续阅读-它只会变得更糟,
在这里更好地学习具体性)。
因此,使用相同的示例,但是使用!重要的是,我们突然发现他并不关心您的特异性。
.content .title { color: red; } .title { color: blue !important; }
标题将是蓝色的! 此属性违反了我们编写的规则的自然流程,并为优先级较低的样式赋予了最高的优先级。
好吧,但是,如何“吐”……不是真的,而是吐。 让我们添加另一个导入器。
.content .title { color: red !important; } .title { color: blue !important; }
标题再次变成红色。 因为我们有两个!重要冲突,所以可以通过比较选择器的权重来解决此冲突。
进口商在以下情况下是不好的:
.title { color: red; }
“嗯,我写的是红色,为什么我的标题不是红色的? 如果是这样?” .title { color: red !important; }
“太好了! 红色!”但这真的很好吗?
这种方法是不好的,至少是因为您在不了解为什么没有导入程序的情况下重新定义样式的原因。 最有可能的是,您使用的选择器的重量根本不够,并且编写一个稍微更准确和“沉重”的选择器,可以解决您的问题,并且可以严格地重新定义样式,如果您知道并检查了所有位置,就很好了。使用了该类,但是如果没有使用,则将元素从一处放到另一个位置。
修补程序工具
很多时候,当我问某人有关进口商的问题时,我会听到这样的回答:
“当我需要快速解决问题并且没有时间去理解我没有编写但编写得很差的代码时,我会用到重要 。
”是的,但是只有任务始终是“紧急的”,通常,此类任务不会有人完成,因此请不要执行。 您自己还没有注意到您如何使“不良外星人密码”变得更糟。
快速是什么意思? 找到重新定义选择器的必要重量是否如此困难且漫长? 我们非常积极地在开发中使用DevTools,我们在那里找到了解决这个问题的答案。
我们检查了要更改的元素。 它当前的颜色是黑色。 我们看看该颜色分配给了哪个选择器?

无论选择器有多困难,我们都使用相同的选择器来分配新的颜色或增加权重,而重点就在于帽子。

长吗 在我看来,这与写作在时间上没有多大区别!重要,但它更加正确和安全。
第三方解决方案和其他人的代码
关于需要使用进口商的问题的第二个最受欢迎的答案是:
“我使用!重新定义第三方库和插件或CMS-ok的样式时很重要 。
”这个答案更接近真相,但前提是它的表达方式要更准确一些。 正是这种形式是错误的,因为第三方文件的样式可以用与您自己的相同的方式覆盖,只需在连接其他人的样式后添加它们并增加选择器的权重即可。
但是,在某些情况下,此答案会“进入”问题。 例如,如果将滑块连接到页面(实现该滑块是为了在切换幻灯片时将其覆盖),则JavaScript会覆盖CSS中某些属性的值。

出于某种原因,您需要覆盖这些属性,而忽略插件本身的更改。
JS只能使用内联样式重新分配属性值。 也就是说,实际上,使用JavaScript为元素更改的任何属性都将被简单地写入style属性。 从特异性机制的角度来看,这些样式具有更高的优先级,并且无论您如何增加选择器的权重,都将无法覆盖它们。
这恰恰是我们无法没有重要之处的
第一种情况。
如果我们需要重新定义内联样式,那么只有重要的样式才能对我们有所帮助。
具有导入程序的样式的优先级高于内联样式的优先级,并且如果由于某种原因您需要重写内联样式,那么您别无选择,只能使用!重要。
重要的是好
让我们考虑另一种情况,这种情况有时在各种库和插件的代码中使用。
如果打开Bootstrap库的CSS源代码,您将看到库开发人员经常使用导入程序。 也许他们也只需要快速修复就可以了(讽刺),但是总的来说有一个更合适的解释。 在这种情况下,重要s被“永久使用”。 这样,Bootstrap开发人员可以“保护”其代码。
事实是,通过将此库连接到您的站点,您可以重新定义其原始样式。 因此,开发人员需要重新购买保险,如果您不知道特定性如何工作,则破坏其代码的行为将更加困难。 但是,如果您了解CSS的特异性机制是如何工作的,则可以通过使用导入器(但使用“较重”的选择器)编写样式来重新定义其导入器。
因此,我们来讨论
第二种情况,如果没有进口商,这是不可能的。
如果您需要覆盖重要信息(您的信息或来自第三方库的信息),那么仅!重要信息将为您提供帮助。
这就是为什么不正确地说:“当我需要重新定义第三方库的样式时,我使用导入器”,而更正确地说:“当我需要重新定义内联样式或其他时,我使用导入器!重要”。 这些样式的来源无关紧要:来自您的文件还是来自第三方。
帮手
实际上,在上一段中,描述了所有情况下进口商正常使用和正确使用的情况。 在这些情况下,不可避免地会使用进口商。 但是,在某些情况下仍允许使用进口商,尽管可能已经不完全合适。
有时,我们需要在代码中使用辅助通用类,以重用代码并进行一些简化。
例如,我们创建了某种.warning类,该类将应用于页面上的各种元素,从而表明它们的重要性。
.warning { color: red; }
我们希望通过将此类应用于任何元素,我们一定会将该元素中的文本设为红色。 但是一个元素可以使用更准确的选择器记录更高优先级的样式,然后我们的.warning类颜色将被打磨。 在这种情况下,通过在助手类中添加重要内容,我们使其变得更加通用,因为在该类中使用的颜色将具有更高的优先级。 但是,我不能说这很好。 毕竟,这使类样式具有更高的优先级,但是它仍然不能保证您百分百地工作,因为该帮助程序可能会遇到其他重要的事情,并且所有相同的东西都会出错。 然后,当事实证明在某些情况下该类应使文本“不是那么红”时,您将立即“生”一个新的选择器,并重复进口商。
什么时候仍然可能
这是正确且正常的用法!需要覆盖内联样式或其他样式时很重要!重要。
如果您遵循此规则,事实证明,在通常的布局中,尤其是从头开始强加页面时,直到开始将第三方解决方案连接到页面时,才需要使用导入程序,但是即使如此,我们上面整理出来的并不一定会导致它们的使用。
像BEM这样的现代方法也规定了自己的规则,在这些规则中,使用内联样式或导入器将是不合适的。
您不需要进口商,不是因为他某种程度上是神秘而可怕的,而是因为在大多数情况下,您可以不用他。
通常,我为自己确定的所有例外都归结为不太典型的情况。 例如,当您开发自己的库,插件或浏览器扩展时,可能需要使用此功能,并且某些样式需要特定的优先级。 但是,这与通常的常规用法相去甚远。