Common CSS anti-patterns - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the 'Overqualified Selector' anti-pattern in CSS?

It happens when you use too many qualifiers in a selector, like div.header instead of just .header. This makes CSS slower and harder to maintain.

beginner

Why is using !important considered a CSS anti-pattern?

Because it forces styles to override others, making debugging and future changes difficult. It breaks the natural cascading and specificity rules of CSS.

intermediate

What problems arise from using deeply nested selectors in CSS?

Deep nesting creates complex selectors that are hard to read and maintain. It also increases CSS specificity, making overrides tricky and can slow down browser rendering.

beginner

Explain the 'Global Styles' anti-pattern in CSS.

Applying styles globally (like styling all p or div tags) can cause unintended side effects across the site, making it hard to control and predict styling.

beginner

Why is using fixed units like px for font sizes considered an anti-pattern?

Fixed units ignore user preferences and device differences, harming accessibility and responsiveness. Using relative units like em or rem is better.

Which of the following is an example of an overqualified selector?

A .button

B button.primary

C #header

D div.button.primary

Option D uses too many qualifiers (tag + classes), making it overqualified.

What is a major downside of using !important in CSS?

A It improves performance

B It makes styles easier to override

C It breaks natural cascading and makes debugging harder

D It reduces file size

!important forces style overrides, breaking CSS rules and complicating debugging.

Why should you avoid deep nesting of selectors?

A It makes CSS files smaller

B It increases specificity and reduces maintainability

C It improves browser rendering speed

D It helps with responsive design

Deep nesting increases specificity and makes CSS harder to maintain.

What problem can global styles cause?

A They cause unintended styling side effects

B They improve accessibility

C They reduce CSS file size

D They make styles easier to override

Global styles apply everywhere, which can cause unexpected changes in many places.

Which unit is better for font sizes to support accessibility and responsiveness?

A em or rem

B px

C pt

D cm

em and rem are relative units that adapt to user settings and screen sizes.

Describe three common CSS anti-patterns and why they should be avoided.

Think about how these affect maintainability, performance, and debugging.

Explain why using fixed units like px for fonts can harm accessibility and responsiveness.

Consider how users might change font size settings or use different screen sizes.