避免在css中使用!importamt

2,175 阅读4分钟

避免在css中使用!importamt

!importan是强制css使用某个格式。在平常中我们很容易看到!important的使用,包括我以前,也会经常使用。强制覆盖css,真的挺方便,但大多数css规范都建议避免使用!important。

!important作用

当刚刚开始使用CSS时,!important就像是一个秘密武器,可以在样式没有按预期工作时强制覆盖。

例如:假设你想要将<blockquote>元素中出现的所有内容用斜体显示 :

blockquote * {
    font-style: italic;
}

由于某种原因(比如需要修改某些ui库的样式),它没有像你期望的那样工作,因此你可以添加!important

blockquote * {
    font-style: italic!important;
}

在这种情况下你实际做的是将<blockquote>中所有内容的特异性提高到一个不合理的高级别。通过使用!important,你实际上告诉浏览器,在任何情况下,<blockquote>中的元素都不应该是斜体之外的任何样式。

其实,你已经犯了一个错误。

why

使用与上面相同的场景,6个月过去了,你的团队中的另一个开发人员A需要在某些情况下开发<blockquote>文本:

<style>
  cite {
    font-style: normal;
	}
</style>
<body>
  <blockquote>
    <p>Don't write lazy CSS</p>
    <cite>- Nick Rollins</cite>
	</blockquote>
</body>

此时A想让cite的font-style为normal,然后并不知道为啥不起作用。此时,A唯一的选择是添加!important标记以强制应用样式。

cite {
    font-style: normal!important;
}

!important循环不断开始......

唯一可以覆盖!important标签是另一个!important,通过使用它。最终可能得到的是一个充满!important的文件。这是不理想的。

If all your styles are !important, then none of your styles are important.

解决

css编写顺序

css的编写顺序,确定哪种css样式优先的第一个规则。

<blockquote>
    <p>What color is the blockquote?</p>
</blockquote>
<style>
  blockquote {
    font-style: italic;
    background: yellow;
  }

  blockquote {
      background: pink;
  }
</style>

第二个background将会覆盖第一个background属性,但是不会修改font-style属性,

标签将会继承pink、italic样式。

关于css层叠可以看一下这篇文章Cascade

继承属性规则

继承允许子元素从父元素继承样式。当我们需要覆盖样式的时候,可以通过css定位子元素来轻松完成。

<blockquote>
    <p>What color is the blockquote?</p>
</blockquote>
<style>
  blockquote {
    font-style: italic;
    background: yellow;
  }

  blockquote {
    	font-style: normal;
      background: pink;
  }
</style>

在第二个声明normal会覆盖第一个italic的字体样式。但是由于

元素仅仅继承了font-style属性,因此我们可以通过在CSS中定位

元素来轻松地再次覆盖此样式。

p {
    font-style: italic;
}
blockquote {
  font-style: italic;
  background: yellow;
}
blockquote {
  font-style: normal;
  background: pink;
}

此时可以发现字体样式发生了变化,为italic,css编写的顺序并不会影响

的样式,因为我们写了一个更具体的**css选择器。**这种情况下,专门为子元素声明的样式将覆盖其父元素的继承样式,该特性来自于使用CSS选择器。

html|css的元素文档可以参考HTML5 and CSS3 References目前css3可以继承的属性如下:

azimuth
border-collapse
border-spacing
caption-side
color
cursor
direction
elevation
empty-cells
font-family
font-size
font-style
font-variant
font-weight
font
letter-spacing
line-height
list-style-image
list-style-position
list-style-type
list-style
orphans
pitch-range
pitch
quotes
richness
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
text-align
text-indent
text-transform
visibility
voice-family
volume
white-space
widows
word-spacing

css属性权重计算

img

计算规则:[内敛风格和!importan不属于选择器,放在这为了方便理解]

得分 选择器
0.0.0.0.0 *
0.0.0.0.1 元素或伪元素
0.0.0.1.0 class,伪类或数据属性
0.0.1.0.0 ID
0.1.0.0.0 内联风格
1.0.0.0.0 !important

实例:

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        #hello {
            color: bisque;
        }

        .test {
            color: blue;
        }

        div p {
            color: aqua;
        }

        p {
            color: red;
        }
    </style>
</head>

<body>
    <div>
        <p class="test" id="hello">
            hello world
        </p>
    </div>
</body>

</html>
选择器 结果
#hello 1.0.0
.test 0.1.0
div p 0.0.2
p 0.0.1

上面的hello world将显示bisque样式。

总结

当你的风格不是“如你想的那样工作”的时候,你不必使用!important标签,还有很多其他的选择。现在Web Component也可以加上style scopoed而不影响其他样式。

请注意,万不得已的情况下避免使用!important