Search code examples
htmlcssdomreflow

Will adding a class without style information cause reflow?


Will adding a class without any associated style information (e.g. no CSS entry for the class) cause a reflow or some other significant synchronous processing? Would the answer apply to most browsers, or only e.g. older browsers?

I did try to run an experiment with FF performance monitor, but I'm not proficient enough to interpret the results; the waterfall does show a layout after adding a class, but I'm unable to draw any real conclusions.


Solution

  • No.

    It will cause a style application invalidation, but when the browser performs a re-evaluation it will see that the element's computed properties that affect layout have not been altered, so it won't trigger a layout - or even a repaint.

    Remember that different CSS properties may trigger a relayout when changed (such as width), others only trigger a repaint (such as background-color), and others do nothing at all (such as voice-family, which is in the (now obsolete) Aural module which is independent of the visual-formatting model).