css 预处理器选择_CSS预处理器的选择器特异性

css 预处理器选择

Selector specificity is a real problem for most medium and large-sized projects, and as any other frequently recurring coding problem it needs to be addressed carefully. Even CSS-Tricks recently had an article on how to keep your CSS specificity low.

对于大多数中型和大型项目来说，选择器的特殊性是一个实际的问题，与其他任何经常重复出现的编码问题一样，它也需要仔细解决。 甚至CSS-Tricks最近也有一篇文章介绍了如何降低CSS特异性 。

And before you even try to say !important let me remind you that:

!important让我提醒您：

CSS/everyday tip: if everything is !important, nothing is !important.

CSS /日常技巧：如果一切都很重要，那么什么都不重要。

– Tony Nelson (@tonynelson19) November 18, 2010

–托尼·尼尔森(@ tonynelson19) 2010年11月18日

CSS specificity isn’t that complex, but the community has done a lot to make it as easy to comprehend as possible, writing guides by using analogies with fish and Star Wars, or by using poker terminology. There are interactive calculators available online, and even a specificity mixin for Sass, allowing you to check and output the exact specificity value of a selector.

CSS的特殊性并不那么复杂，但是社区已经做了很多工作，以使其尽可能容易理解，使用与鱼类和《星球大战》的类比或使用扑克术语编写指南。 在线提供了交互式 计算器 ，甚至还有Sass的特异性mixin ，您可以检查并输出选择器的确切特异性值。

Simpler is better when in comes to a CSS specificity strategy, the specificity workarounds in this article (which may feel a bit hacky) are suited for cases where the architecture doesn’t allow for a simple fix. Use your judgment when deciding which approach suits your project best and ultimately try to hit the perfect balance between clean and maintainable CSS.

当涉及到CSS专用性策略时，越简单越好，本文中的专用性变通办法(可能会让人觉得有些棘手)适用于架构不允许简单修复的情况。 在决定哪种方法最适合您的项目时，请使用您的判断力，并最终尝试在干净和可维护CSS之间达到完美的平衡。

方法＃0 – BEM (Approach #0 – BEM)

BEM is