ChapTer 10 ■ Tools, TeChnologIes, and The FuTure oF Css anImaTIon
While browser reflows are unavoidable, their impact can be minimized and localized by following a few rules:• Try to affect the element you wish to style directly, rather than its parent. That is, try to
limit the scope of any reflow: rather than altering the class of a container element to
affect its children, try to affect the children themselves directly. This does not avoid all
reflows—altering the height of an element may affect the dimensions of its parent, for
example, causing a reflow to ripple up—but it is a good general rule.• Avoid setting inline styles. Most especially, avoid the creation of multiple inline styles.
Instead, externalize the relevant CSS into a class and then change the class. A work
process that emphasizes the opposite—trying to manipulate an inline style, or merging
styles between embedded, linked, and inline styles, for example—will likely cause
multiple reflows as each is adjusted.• Apply animations to elements using transform, or to elements that are positioned
absolutely or fixed. Elements with these characteristics do not affect the position of others,
meaning that only the affected element will be repainted, without the cost of a reflow.• Create animations that are “internal” to an element with a fixed height and width and/or
that has overflow:hidden applied. Animations inside such elements will not affect
others, avoiding opportunities for reflows.• Specify set image dimensions. If the browser knows the width and height of image
elements, it will not have to push content around as the image is placed on the page.
Obviously this is complicated by current trends in responsive design.• Avoid long descendant selectors. Long descendant selectors with many tags tend to be
computationally expensive.• Avoid use of the universal selector. The wildcard (*) selector is the most computationally
burdensome selector of all.• Try to specify the property you wish to transition, rather than using “all”. While not directly
related to reflows, using the “all” option in a transition is wasteful, as the browser is then
forced to track every possible change to the element. Specifying a single property you
wish to track and change, such as opacity, is far more efficient.• Use a style profiler. (See Figure 10-1.)