Common CSS anti-patterns - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

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

What is the main problem caused by overusing !important in CSS?

A It improves page load speed by reducing CSS file size.

B It automatically fixes browser compatibility issues.

C It ensures all styles are applied only to the first element on the page.

D It makes styles harder to override and maintain, causing confusion in large projects.

💡 Hint

Think about how CSS rules are applied and how !important affects that.

Using !important forces a style to override others, which can make it difficult to change styles later. This leads to messy and hard-to-maintain CSS.

📝 Syntax

intermediate

What error does this CSS snippet cause?

Consider this CSS code:

div { color: red; font-size 16px; }

What error will this cause?

A Syntax error due to missing colon after <code>font-size</code> property.

B No error; CSS will apply both styles correctly.

C Runtime error stopping the page from loading.

D The <code>color</code> property will be ignored but <code>font-size</code> works.

💡 Hint

Check the syntax for CSS property declarations carefully.

CSS properties must have a colon : between the property name and value. Missing it causes a syntax error and the rule is ignored.

❓ selector

advanced

Which selector causes the worst performance issue?

Which CSS selector below is considered an anti-pattern because it slows down browser rendering the most?

A *

B div > p > span

C body div p span

D ul li:first-child

💡 Hint

Think about how many elements the selector matches and how browsers process selectors.

The universal selector * matches every element on the page, causing the browser to apply styles to all elements, which hurts performance.

❓ layout

advanced

What is the problem with using float for layout?

Why is using float for page layout considered an anti-pattern in modern CSS?

A Floats automatically center elements horizontally without extra code.

B Floats are deprecated and no longer supported by browsers.

C Floats remove elements from normal flow, causing layout issues and requiring clearfix hacks.

D Floats make elements invisible on mobile devices.

💡 Hint

Consider how floats affect the position and flow of elements on the page.

Floats take elements out of the normal flow, which can cause parent containers to collapse and require extra fixes like clearfix. Modern layout methods like Flexbox and Grid avoid these problems.

❓ accessibility

expert

Which CSS practice harms accessibility the most?

Which CSS anti-pattern below can make content unreadable or unusable for people with visual impairments?

A Using semantic HTML elements with proper ARIA roles.

B Using low contrast colors for text and background.

C Using relative units like rem and em for font sizes.

D Using media queries to adjust layout on small screens.

💡 Hint

Think about how color contrast affects readability for everyone.

Low contrast between text and background colors makes it hard for users with vision impairments to read content, harming accessibility.