Does the CSS!important rule have an impact on performance?

Source: Internet
Author: User

Recently in the project to find a lot of CSS code inside the use of!important to overwrite the original high priority style. According to common sense, the more flexible things, the more work needs to be done. So take it for granted that a flexible and convenient rule like!important would certainly have an impact on performance if used much. Based on this consideration, all of these styles were intended to be removed by raising the priority level. But then a thought, or to google it, guess generally are not reliable. So I found this article is!important bad for performance? Here is the general meaning: firefox for CSS parsing code /source/layout/style/nsCSSDataBlock.cpp#562对于important的处理是这样的:

if (aIsImportant) {
    if (!HasImportantBit(aPropID))
      changed = PR_TRUE;
    SetImportantBit(aPropID);
  } else {
    // ...

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

/**
* Transfer the State for Apropid (which May is a shorthand)
* from Afromblock.  The property being transferred
* are!important if aisimportant is true and should replace a
* existing     !important property Regardless of it own importance
* If Aoverrideimportant is true.
* 
* ...
*/

As you can see from the above, Firefox's judgment of the!important rule is simple: the style containing the!important is directly overwritten with the normal generated style rules, and then if you parse to the back of the!important rule, The previous important rules are compared to the precedence level. That is, CSS rules that use!important are placed to the highest priority, and then the highest priority is used to determine which style to apply.

The conclusion is that using!important has no negative impact on performance. But from a maintainability standpoint, use this rule less. However, this rule has bugs in the IE6 (IE6 IE7 (q) IE8 (q) does not fully support!important rules) and should be noted when used.



Related Article

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.