ITCSS methodology with SASS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does ITCSS stand for in CSS architecture?

ITCSS stands for Inverted Triangle CSS. It is a way to organize CSS from broad to specific styles.

beginner

Name the main layers of ITCSS from bottom to top.

The layers are: Settings, Tools, Generic, Elements, Objects, Components, and Trumps.

intermediate

How does ITCSS help when using SASS?

ITCSS helps organize SASS files so styles are easy to find and override, reducing conflicts and improving maintainability.

beginner

What kind of styles go into the 'Settings' layer in ITCSS?

Settings contain variables, colors, fonts, and other global values used throughout the project.

intermediate

In ITCSS, what is the purpose of the 'Trumps' layer?

The Trumps layer contains utility and helper classes that override other styles, like .hidden or .text-center.

Which ITCSS layer should contain your SASS variables?

A Objects

B Trumps

C Components

D Settings

Variables belong in the Settings layer because they define global values used by other layers.

What is the main benefit of using ITCSS with SASS?

A It organizes styles from general to specific to avoid conflicts.

B It automatically compiles SASS to CSS.

C It replaces the need for media queries.

D It makes styles load faster in the browser.

ITCSS organizes styles in layers from broad to specific, helping avoid style conflicts and improving clarity.

Where would you place reset or normalize styles in ITCSS?

A Components

B Generic

C Settings

D Objects

Generic layer holds reset or normalize styles that affect base HTML elements.

Which ITCSS layer contains reusable design patterns like buttons or cards?

A Components

B Objects

C Settings

D Trumps

Components layer holds specific UI parts like buttons, cards, or navigation.

What is the role of the 'Objects' layer in ITCSS?

A It resets browser default styles.

B It holds global variables and mixins.

C It contains design patterns that are reusable and have no visual style.

D It contains utility classes for quick overrides.

Objects are reusable design patterns like grids or media objects without specific visual styling.

Explain the ITCSS layers and how you would organize SASS files using them.

Think of ITCSS as a triangle from broad to specific styles.

Describe why ITCSS is helpful for large projects using SASS.

Consider how messy CSS can get without structure.

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