ITCSS methodology with SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding ITCSS Layer Order

In ITCSS, styles are organized in layers to manage CSS specificity and maintainability. Which layer should contain generic HTML element styles like body and h1?

A Settings layer

B Generic layer

C Tools layer

D Components layer

💡 Hint

Think about where you put styles that affect all elements globally.

The Generic layer in ITCSS contains styles that affect basic HTML elements globally, such as body and h1. This layer comes after Settings and Tools but before Components.

📝 Syntax

intermediate

SASS Import Order in ITCSS

Given the ITCSS layers, which SASS import order correctly follows the ITCSS methodology?

A @import 'settings'; @import 'generic'; @import 'tools'; @import 'elements'; @import 'objects'; @import 'components'; @import 'utilities';

B @import 'components'; @import 'objects'; @import 'elements'; @import 'generic'; @import 'tools'; @import 'settings'; @import 'utilities';

C @import 'settings'; @import 'tools'; @import 'generic'; @import 'elements'; @import 'objects'; @import 'components'; @import 'utilities';

D @import 'utilities'; @import 'components'; @import 'objects'; @import 'elements'; @import 'generic'; @import 'tools'; @import 'settings';

💡 Hint

Remember ITCSS layers start from Settings and go towards Utilities.

ITCSS import order starts with Settings (variables), then Tools (mixins/functions), Generic (reset/normalize), Elements (base styles), Objects (layout patterns), Components (UI components), and finally Utilities (helpers).

❓ selector

advanced

Specificity in ITCSS Layers

Which selector from the ITCSS layers will have the highest CSS specificity when compiled?

A * { box-sizing: border-box; } /* Generic layer */

B body { font-family: Arial; } /* Generic layer */

C .btn-primary { color: blue; } /* Components layer */

D #header .nav-item { font-weight: bold; } /* Objects layer */

💡 Hint

Higher specificity comes from IDs and class combinations.

The selector #header .nav-item has an ID and a class, giving it higher specificity than simple classes or element selectors.

❓ layout

advanced

Using ITCSS Objects Layer for Layout

In ITCSS, the Objects layer is for design patterns and layout. Which SASS code snippet best represents a reusable layout object for a grid container?

A .grid-container { display: flex; flex-wrap: wrap; gap: 1rem; }

B .grid-container { position: absolute; top: 0; left: 0; }

C .grid-container { font-size: 1rem; color: black; }

D .grid-container { border: 1px solid red; }

💡 Hint

Objects layer focuses on layout and structure, not colors or borders.

The code with display: flex and flex-wrap creates a flexible grid layout, which fits the purpose of the Objects layer.

❓ accessibility

expert

Accessibility in ITCSS Utilities Layer

Which utility class defined in the ITCSS Utilities layer best helps improve accessibility by visually hiding content but keeping it readable by screen readers?

A .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }

B .hidden { display: none; }

C .offscreen { position: fixed; left: -9999px; top: 0; }

D .invisible { visibility: hidden; }

💡 Hint

Screen readers can read content that is visually hidden but not removed from the accessibility tree.

The .sr-only class hides content visually but keeps it accessible to screen readers, improving accessibility.