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.

Practice

1. What is the main purpose of the ITCSS methodology when organizing SASS files?

easy

A. To avoid using variables and mixins in SASS

B. To write all styles in one large file for faster loading

C. To arrange styles from general to specific for better maintainability

D. To use only inline styles instead of external stylesheets

Solution

1. Step 1: Understand ITCSS structure

   ITCSS organizes CSS layers from very general styles to very specific ones.

2. Step 2: Connect ITCSS with maintainability

   This layering helps keep styles clean and easy to maintain by controlling specificity and order.

3. Final Answer:

   To arrange styles from general to specific for better maintainability -> Option C

4. Quick Check:

   ITCSS = organize styles general to specific [OK]

Hint: ITCSS means layering styles from broad to narrow [OK]

Common Mistakes:

• Thinking ITCSS means one big file
• Believing ITCSS avoids variables
• Confusing ITCSS with inline styles

2. Which of the following is the correct order of ITCSS layers from top (most general) to bottom (most specific)?

easy

A. Utilities, Components, Objects, Elements, Generic, Tools, Settings

B. Settings, Tools, Generic, Elements, Objects, Components, Utilities

C. Components, Utilities, Objects, Elements, Generic, Tools, Settings

D. Generic, Settings, Tools, Elements, Objects, Components, Utilities

Solution

1. Step 1: Recall ITCSS layer order

   The correct ITCSS order starts with Settings (variables), then Tools (mixins), Generic (resets), Elements, Objects, Components, and finally Utilities.

2. Step 2: Match options with this order

   Only Settings, Tools, Generic, Elements, Objects, Components, Utilities lists the layers in this exact order from general to specific.

3. Final Answer:

   Settings, Tools, Generic, Elements, Objects, Components, Utilities -> Option B

4. Quick Check:

   ITCSS order = Settings to Utilities [OK]

Hint: Remember: Settings and Tools come first, Utilities last [OK]

Common Mistakes:

• Mixing up Utilities and Settings order
• Placing Components before Objects
• Confusing Generic with Settings

3. Given this SASS partial import order in ITCSS:
@import 'settings';
@import 'tools';
@import 'generic';
@import 'elements';
@import 'objects';
@import 'components';
@import 'utilities';
What will be the color of a button if:
- Settings define $primary-color: blue;
- Components style button background as $primary-color;
- Utilities override button background to red;
Assuming no other styles affect the button, what color will it show?

medium

A. Green

B. Blue

C. Default browser color

D. Red

Solution

1. Step 1: Understand import order and CSS cascade

   ITCSS imports from general to specific. Utilities are last and have highest specificity.

2. Step 2: Determine which style applies last

   Utilities override Components because they come later, so button background becomes red.

3. Final Answer:

   Red -> Option D

4. Quick Check:

   Last imported style wins = Red [OK]

Hint: Last imported layer overrides earlier styles [OK]

Common Mistakes:

• Assuming Components override Utilities
• Ignoring import order effect
• Thinking variables change color directly

4. You wrote this SASS import order for ITCSS:
@import 'utilities';
@import 'components';
@import 'objects';
@import 'elements';
@import 'generic';
@import 'tools';
@import 'settings';
What is the main problem with this order?

medium

A. The layers are imported in reverse order, causing specificity issues

B. There are missing variables in the settings layer

C. Mixins are not used in the tools layer

D. Utilities should be imported before settings

Solution

1. Step 1: Check ITCSS recommended import order

   ITCSS requires importing from Settings to Utilities, not the reverse.

2. Step 2: Identify consequence of reversed order

   Importing Utilities first means general styles override specific ones, breaking intended cascade.

3. Final Answer:

   The layers are imported in reverse order, causing specificity issues -> Option A

4. Quick Check:

   Reverse import order breaks ITCSS layering [OK]

Hint: Always import from Settings to Utilities, not backwards [OK]

Common Mistakes:

• Thinking missing variables cause import order errors
• Confusing mixins usage with import order
• Believing utilities come before settings

5. You want to add a new component style for a card in your SASS project using ITCSS. Where should you place the card styles and why?
.card {
@include box-shadow($shadow-color);
background-color: $card-bg;
}

hard

A. In the Components layer, because cards are reusable UI parts

B. In the Utilities layer, because cards are small helper classes

C. In the Settings layer, because cards define variables

D. In the Generic layer, because cards reset default styles

Solution

1. Step 1: Identify what a card represents

   A card is a reusable UI component with specific styles and structure.

2. Step 2: Match card to ITCSS layer

   Components layer holds reusable UI parts like buttons, cards, modals.

3. Final Answer:

   In the Components layer, because cards are reusable UI parts -> Option A

4. Quick Check:

   Reusable UI parts = Components layer [OK]

Hint: Put UI parts like cards in Components layer [OK]

Common Mistakes:

• Placing cards in Utilities or Settings layers
• Confusing Generic with Components
• Thinking cards are just variables