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.