Performance considerations in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ selector

intermediate

Which CSS selector is the most performant?

Consider these CSS selectors. Which one is the fastest for browsers to match elements?

A div > p > span.highlight

B #main-content .article p span.highlight

C *

D span.highlight

💡 Hint

Simple selectors are faster because browsers match them quickly without traversing many elements.

The selector span.highlight is the most performant because it directly targets elements by tag and class without complex ancestry or universal selectors.

Universal selector * matches all elements and is slow. Complex descendant selectors require more work.

🧠 Conceptual

intermediate

What is a common cause of slow CSS rendering?

Which of these CSS practices most often causes slow page rendering?

A Using semantic HTML elements

B Using many complex selectors with deep nesting

C Using external CSS files

D Using CSS variables

💡 Hint

Think about how browsers match selectors to elements.

Deeply nested and complex selectors force browsers to check many elements, slowing down rendering.

Semantic HTML, external CSS, and CSS variables do not inherently slow rendering.

❓ layout

advanced

Which CSS property change triggers the least layout recalculations?

When updating styles dynamically, which property change causes the least browser layout work?

A Changing <code>background-color</code> of an element

B Changing <code>width</code> of an element

C Changing <code>margin</code> of an element

D Changing <code>font-size</code> of an element

💡 Hint

Some properties only affect painting, not layout.

Changing background-color only triggers repaint, not layout recalculation, so it is faster.

Changing width, margin, or font-size affects layout and triggers reflow, which is more expensive.

❓ accessibility

advanced

How can performance optimizations affect accessibility?

Which practice can improve CSS performance without hurting accessibility?

A Using very low contrast colors to reduce paint time

B Removing all focus styles to reduce CSS rules

C Using media queries to load simpler styles on small screens

D Hiding content visually with <code>display:none</code> instead of off-screen positioning

💡 Hint

Think about responsive design and user needs.

Using media queries to load simpler styles on small screens improves performance and keeps content accessible.

Removing focus styles hurts keyboard users. Low contrast hurts readability. Hiding content with display:none removes it from screen readers.

📝 Syntax

expert

What is the output of this CSS snippet in terms of applied styles?

Given this CSS, which color will the <p> text inside <div id="container"> have?

div p { color: blue; }
#container p { color: red !important; }
p { color: green; }

CSS

div p { color: blue; }
#container p { color: red !important; }
p { color: green; }

A Red

B Green

C Black (default)

D Blue

💡 Hint

Remember that !important overrides normal declarations regardless of specificity.

The rule with !important always wins, so #container p { color: red !important; } sets the text color to red.

Other rules are overridden even if they have higher specificity or come later.