Does the!important rule of css affect performance?

Source: Internet
Author: User

Recently in the project found a lot of CSS code inside the use of!important to cover the original high-priority style. By common sense, the more flexible things are, the more work needs to be done. So it is assumed that flexible and convenient rules like!important, if used much, will certainly have an impact on performance. Based on this consideration, all of these styles were originally intended to be removed by raising the priority level. But then a think, or go to Google, guess is generally unreliable. So I found this article was!important bad for performance? Here is the approximate meaning:

Firefox's parsing code /source/layout/style/nsCSSDataBlock.cpp#562对于important的处理是这样的:
for CSS

if (aisimportant) {    if (!  Hasimportantbit (apropid))      = pr_true;    Setimportantbit (apropid);   Else  {    // ...

source/layout/style/nsCSSDataBlock.h#219这里面有条评论算是对上面代码的解释:

/* *     * Transfer the state for |apropid| (which may a shorthand)     * FROM |afromblock| to the block.  The property being transferred     * is!important if |aisimportant| are true, and should replace an     * existing!import Ant property Regardless of it own importance     * If |aoverrideimportant| is true.     *      * ...      */

As can be seen from the above, Firefox's judgment on the!important rule is simple: it overrides the normally generated style rule with the style that contains!important, and then, if it resolves to a later!important rule, Compare the priority with the previous important rule. That is, a CSS rule that uses!important is set to the highest priority, and then the highest priority is used to determine which style to apply.

The conclusion is that the use of!important has no negative effect on performance. However, this rule is less to be considered in terms of maintainability. However, this rule has a bug in the IE6 (IE6 IE7 (q) IE8 (q) does not fully support the!important rule) and should be noted when using it.

Reference article:

Https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity

Http://www.w3cplus.com/css/the-important-css-declaration-how-and-when-to-use-it.html

Http://www.w3.org/TR/CSS2/cascade.html#important-rules

http://w3help.org/zh-cn/causes/RA8003

Http://stackoverflow.com/questions/13743671/is-important-bad-for-performance

http://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.