Does the CSS "! Important" property influence website performance?

Asked

Viewed 471 times

0

I wonder if when allocating the property !important influences the performance of the site, because I use it enough to overlap the bootstrap for example.

css
  • 3

    Not much, not even complex selectors will influence so much, there are people who will claim to influence, but this is called micro-optimization, that nothing else is a matter of micro-seconds. There are libs Js and a number of plugins that are the real drivers of the delay, many front-end pseudo-understood use a series of libs almost randomly without knowing what are harming the performance.

  • 2

    In the performance not so much, see comment above, but in the maintenance of the project influences a lot. Today you may know what you’re doing, but in a while, if you need to change something in the project in production, until you remember that you used a !important may take unnecessary time as there may be multiple selectors that set the font color of your element to red, but appears green. Unnecessary stress. I particularly avoid always using it.

3 answers

2


It shouldn’t have any effect on performance really. Viewing the Firefox CSS parser at /source/layout/style/nsCSSDataBlock.cpp#572 I think this is the relevant routine, trying to replace this CSS rule.

It seems to be a simple routine to check if it is "important".

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

Also has comments on source/layout/style/nsCSSDataBlock. h#219

/**
 * Transfer the state for |aPropID| (which may be a shorthand)
 * from |aFromBlock| to this block.  The property being transferred
 * is !important if |aIsImportant| is true, and should replace an
 * existing !important property regardless of its own importance
 * if |aOverrideImportant| is true.
 * 
 * ...
 */
  1. Firefox uses a bottom-up analyzer written manually. In both cases, each CSS file is parsed in a Stylesheet object, each object contains CSS rules.
  2. Firefox creates style context trees that contain the end values (after applying all rules in the correct order)

Now, you can easily see, for example, with the Object Model described above, the parser can mark the rules affected by !important easily, without much cost. Performance degradation is not a good argument against !important.

However, maintenance is a scam (like other answers mentioned), which may be their only argument against them.

Note: I tried to do the original Stackoverflow translation in English: https://stackoverflow.com/questions/13743671/is-important-bad-for-performance

0

Yes and no, of course add a notation ! Mportant will increase the size of the code, but nothing noticeable, not time of execution I believe the difference is not noticeable, but of course this is a more Enerica answer on the subject, in large codes may have a minimum difference.

0

It’s possible, since your site will load the CSS, and how much you’re reading it (will read more rules) that are being superimposed by others you use ! Important.

Think CSS is cascading, that is if you use the ! Important, possibly you are doing something "wrong"!

Read these articles, which may help you better understand the problems you may have using it:

  • Are you sure what you’re talking about? It doesn’t depend on the rendering of browser? On the second paragraph: it has a better basis?

  • The browser renders everything as it reads from the CSS... Think that the CSS brings the idea of cascading, so: https://jsfiddle.net/2tj21z9r/ is worse than this: https://jsfiddle.net/2tj21z9r/1/

  • Each browser has its own rendering engine, based on its own strategy to get the best possible performance, perhaps the x { k: v !important;} would influence something if human perception were like Barry Allen’s, but not if you use a few !important probably won’t have any difference, if use many even maybe have a small variation of something like 0.00001 for 0.00003 seconds. There is no way to state accurately and sorry, I personally find it a huge mistake to state anything, as I said, each browser has its own rendering engine. ;)

  • I agree that each browser has its own rendering engine and that more and more of them are working to make everything faster. However, even though this is not the question, I think we should take into account that this is a "bad Practice" because it makes debugging and breaks the idea of (cascade) natural CSS, as suggested by the MDN - https://developer.mozilla.org/en-US/docs/Web/CSS/Specificitydocumentation

  • 1

    Make Debug difficult != Performance, besides that debuggers like Chrome (and browsers based on Chromium) and Safari for example, are very good at analyzing CSS. To really speak what I think, even though MDN site good, still anything that comes to affirm "Good (Bad) practices" is that this is very relative, recommend that run your own tests as a benchmark until further ;) ... Related: https://answall.com/a/143893/3635

  • The problem is not even debug, because I can "find myself" easily. It’s that my CSS is growing (900 Lines) and I’ve used a lot ! Charge for this concern.

  • @Leonardobonetti do CSS without !important if it works beauty, don’t need (a lot doesn’t need), if you don’t get "priority" then use !important, to summarize I would say that the answer is "use !important if necessary, if not use, regardless of performance"

  • In short, as far as the use of !Important will not even be noticeable in the question performance ;)

Show 3 more comments

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.