Which CSS properties cause only Repaint, and which cause Reflow/Layout?

In CSS, changes to properties can trigger either Repaint (redrawing) or a more costly Reflow/Layout (recalculating the layout of elements).

• Repaint occurs when visual properties that do not affect the geometry of elements are changed. For example:

  • color
  • background-color
  • visibility
  • box-shadow
  • outline

• Reflow/Layout is triggered when properties affecting the size, position, or structure of the document are changed. For example:

  • width, height
  • margin, padding, border
  • top, left, right, bottom
  • font-size
  • display
  • position
  • float

Reflow is a more expensive operation because the browser needs to recalculate the positions of elements and then perform a repaint.

Therefore, to optimize performance, it is recommended to minimize changes to properties that trigger Reflow, especially during animations and dynamic DOM modifications.