CSS权重的一些小技巧

原文:Hacks for dealing with specificity

原文:The Importance of !important: Forcing Immutability in CSS

降低 ID 选择器的权重

假设我们引入了一个第三方库(为什么要说是第三方的库, 因为我们提倡不使用ID选择器,所以自己写的CSS应该是没有这种情况才对的):

<div id="widget">
    ...
</div>

这时候我们想加点样式通常会这样做:

#widget {
    ...
}

不是说到的不要用 ID 选择器么~ 所以我们可以这样做:

[id="widget"] {
    ...
}

登登~ 我们可以选择使用属性选择器~ 这样以来这个选择器的权重就和类选择器是一样的啦~

但是请记住,这只是一个hack, 这不代表我们可以在CSS中大量使用 ID 选择器,只有在别无选择的时候才使用噢~

安全地提高权重

我们把选择器连起来达到提升权重的效果

.btn.btn {
}

!important来达到immutable

在 React 社区 immutable 的概念很多, 我们来看看在CSS怎样可以做到 immutable

我们有一些工具类别的实用性的类:

.u-text-center { text-align: center !important; }

.u-float-left { float: left !important; }

.u-text-large { font-size: 48px !important; }

这里用 u- 的前缀来表明这些类的用途( More Transparent UI Code with Namespaces ).

注意到这里的工具类都使用了!important来达到immutable的效果:因为!important的高权重(!important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符)所以保证了应用了该CSS选择器的节点会使用该样式而无法被覆盖。

接下来说明一下“工具”类的使用场景:

<blockquote class="o-media  c-testimonial">
  <img class="o-mediaimg c-testimonialphoto" ... />
  <p class="o-mediabody c-testimonialtext">...</p>
</blockquote>

这时候UI姐姐来跟我们说某一个地方某一个特殊的blockquote需要有一个大大的margin-bottom,我们就可以这样做:

<blockquote class="o-media
                   c-testimonial
                   u-margin-bottom-large">

另一方面,如果UI姐姐说这个改动以后其他blockquote也可以使用的话,我们就应该使用BEMModifier:

<blockquote class="o-media
                   c-testimonial  c-testimonial--large">

总的来说,规则是这样的:

如果是可以复用的样式就写该怎么写就怎么写,如果只是一次性的不复用的暂时的就使用工具类。

请小心谨慎地使用工具类,这个工具类离内联样式只有一步之遥了,务必只用在暂时的特殊的不可复用的样式上。

« 返回