保持项目中所有选择器的CSS专用性较低是一个值得追求的目标。 通常，这表明事物处于相对和谐状态。 您并不是在与自己作斗争，并且有足够的空间在需要时覆盖样式。 选择器的特异性会随着时间的流逝而逐渐增加，对此有一个严格的上限。 我敢肯定，我们所有人都感受到了！important标签和内联样式的痛苦。

那么，随着时间的流逝，我们如何保持低特异性呢？

给自己上课

也许您正在编写一个高专用选择器，因为您要覆盖一个已经存在的选择器。 也许您要选择的元素包含在多个页面中，因此您可以从较高级别的类中进行选择：

.section-header {/* normal styles */
}body.about-page .section-header {/* override with higher specificity */
}

无论您对此有何感受，都应认识到这里的特异性正在蔓延。 为避免这种情况，有没有办法改变您要直接设置样式的元素上的类名？ 有时创建一些服务器端帮助函数或变量来发出类可能会有所帮助，以避免视图中的逻辑。

<header class="<%= header_class %>">Which could output one class, or both, as desired.
</header>

.section-header {/* normal styles */
}.about-section-header {/* override with same specificity *//* possibly extend the standard class */
}

考虑样式表的源顺序

沿着相同的尝试覆盖事物的脉络，也许您正在应用其他类名来为您处理样式覆盖。

<header class="section-header section-header-about"></header>

但是，使用.section-header-about编写覆盖样式的位置实际上已被现有类覆盖。 由于样式表中的选择器顺序，可能会发生这种情况。 两个选择器都具有完全相同的特异性，因此从宣布最后一个获胜者中选出的规则。

要解决此问题，仅需确保以后再写覆盖类。 也许组织您的样式表，例如：

@import "third-party-and-libs-and-stuff";@import "global-stuff";@import "section-stuff";@import "specific-things-and-potential-overrides";

降低您要覆盖的事物的特异性

您知道他们说的要比让他们发现更好的事情。 你应该那样做。

如果元素上有一个ID，而这正是它的样式，可以将其删除吗？ 一定要在项目范围内搜索#that，然后再进行搜索。 它可能被用作JS钩子（完全可以），在这种情况下，您应该不理会它，或者添加一个类或将已经使用的类用于CSS。

不要回避上课的开始

我已经知道使用像这样的选择器：

.module > h2 {}

这样做会很好，直到他们今天想要该h2元素的特殊样式。 您可能会进入标记并像这样：

<div class="module"><h2 class="unique">Special Header</h2>
</div>

但可悲的是：

.module > h2 {/* normal styles */
}
.unique {/* I'm going to lose this specificity battle */
}
.module .unique {/* This will work, but specificity creep! */
}

由于原始选择器在咬我们，所以发生了特异性蠕变。 这就是几乎所有CSS方法学都建议采用扁平结构的原因：

<div class="module"><h2 class="module-header"></h2><div class="module-content"></div>
</div>

感觉起来像是更繁琐的前期工作，因为您可能不需要立即使用这些课程。 但是，通过避免这项工作（不要偷懒！），以后使用的钩子可以节省您的悲伤。

使用级联

随着项目的老化，改变具有低特异性的选择器变得越来越危险，因为选择器可能会影响更多事物并产生意想不到的后果。

#im #just .gonna[do] .this .to .be #safe {/* cries (ಥ_ʖಥ) */
}

但是影响更多的事情是CSS的力量。 有了坚实的基础，就可以希望减少覆盖范围。 为此的策略可以是……

使用样式库和/或样式指南和/或原子设计

模式库（ 类似这样的东西）可能意味着您有需要的东西。 需要一些标签吗？ 在这里，这是执行此操作的既定方法。 而且它的构建方式很可能是特异性很轻，因此覆盖不会太困难。

原子设计 （ 书 ）可以指导您构建网站（或模式库）的方式，因此，即使您没有所需的完整模式，也可以在其下方找到构建块。

样式指南可能会救您，因为它可能会强制执行有关特定性的特定规则，以使您免于自己。

考虑选择排版

同时，您尝试使用级联并为许多元素设置智能默认值，有时您可能希望对某些智能默认值进行范围划分。 例如，列表元素通常用于导航和内容内。 它们的样式将完全不同。 因此，为什么不从头开始， 只在需要时应用文本样式。

/* reset styles globally */
ul, ol, li {list-style: none;margin: 0;padding: 0;
}/* scope text styles to text content */
.text-content {h1, h2, h3 {}p {}ul {}ol {}/* etc */
}

这的确增加了这些文本选择器的特异性，但这意味着专门针对文本的规则所产生的影响并没有超出它们所需要的范围，并且对替代的需求也越来越少。

超出您控制范围的问题

也许某些第三方代码期望或将某些HTML注入您的页面。 您必须使用它。 您仍然可以尝试使用尽可能低的特异性选择器。 您可以在代码中留下注释，以指示选择器为何如此。 您可以使用低特异性选择器，但可以使用！important覆盖。 您可以询问负责非理想代码的人员是否可以解决它。

仅轻轻地提高特异性，并注意

如果您需要进行专一性战斗，而不是去尝试像ID​​或！important这样的大锤，可以尝试一些更轻松的事情。

标签限定符是最低可能的特异性升级。

ul.override {/* I win */
}
.normal {
}

但是将选择器限制为特定标签是一个奇怪的限制因素。 明智的做法是只添加一个附加类。 如果另一个名称没有意义，则根据需要甚至可以使用相同的类。

.nav.override {
}
.override.override {
}
.nav {
}

仅仅因为嵌套很好，并不意味着必须提高特异性

有时不建议在预处理器中进行嵌套，因为这样可以轻松编写过多的选择器。 但是嵌套有时在样式表中看起来很漂亮，因为它可以将内容组合在一起，从而更易于阅读和消化。

Bohdan Kokotko最近提醒我，Sass中的＆符实际上可以用于命名间隔，而不是复合选择器。

.what {color: red;&-so {color: green;&-ever {color: blue;}}
}

.what {color: red;
}
.what-so {color: green;
}
.what-so-ever {color: blue;
}

单类包装器

处理覆盖的一种相当有力的方法是在需要将样式覆盖应用于或添加新覆盖元素的区域上使用现有的包装元素。

<div class="override">... existing stuff ...</div>

现在，您只需在选择器中添加一个类即可覆盖其中的任何现有样式。 这是专一性，但试图将其保持在较低水平。

.override .existing {
}

只有一次

如果您要覆盖替代项，那么这是一个停止并重新考虑的好地方。

您可以只给自己一个类供您使用吗？ 单个替代实际上可能是有效的，就像对模式进行变体而不是创建新模式一样。 超越会导致混乱和进一步战斗。

下次再做就更好

如果您一直被特异性问题所困扰，即使立即解决这些问题都不切实际，至少您现在已经知道这是有问题的，下次可以采取不同的方法。

翻译自: https://css-tricks.com/strategies-keeping-css-specificity-low/