ITCSS methodology with SASS - Mini Project: Build & Apply

Build a Simple ITCSS Structure with SASS

📖 Scenario: You are working on a small website project. You want to organize your styles using the ITCSS methodology with SASS. ITCSS helps keep styles clean and easy to manage by layering them from general to specific.

🎯 Goal: Create a basic SASS file structure following ITCSS layers: Settings, Tools, Generic, Elements, and Objects. Write SASS code that shows variables, mixins, resets, base styles, and a simple object style.

📋 What You'll Learn

Create a SASS variable for the main color in the Settings layer

Add a mixin for a flex container in the Tools layer

Write a CSS reset rule in the Generic layer

Style the body element with the main color in the Elements layer

Create a reusable class .card with flex layout in the Objects layer

💡 Why This Matters

🌍 Real World

ITCSS helps developers keep CSS organized and scalable in real projects, making it easier to maintain and update styles.

💼 Career

Understanding ITCSS and SASS is valuable for front-end developers working on medium to large websites or apps where CSS organization is important.

1

Create the Settings layer with a color variable

Create a SASS variable called $main-color and set it to #3498db inside a comment block labeled // Settings.

SASS

// Settings
// Your code here

Hint

Use $main-color: #3498db; to define the main color variable.

2

Add the Tools layer with a flex container mixin

Below the Settings layer, add a comment // Tools and create a mixin called flex-center that sets display: flex;, justify-content: center;, and align-items: center;.

SASS

// Settings
$main-color: #3498db;

// Tools
// Your code here

Hint

Use @mixin flex-center { display: flex; justify-content: center; align-items: center; } to create the mixin.

3

Add the Generic layer with a CSS reset

Add a comment // Generic below Tools. Then write a CSS reset rule that sets margin and padding to 0 for all elements using the universal selector *.

SASS

// Settings
$main-color: #3498db;

// Tools
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

// Generic
// Your code here

Hint

Use * { margin: 0; padding: 0; } to reset all elements.

4

Add Elements and Objects layers with body style and card class

Add a comment // Elements and style the body element to have background-color set to $main-color. Then add a comment // Objects and create a class .card that uses the flex-center mixin and sets height to 10rem and width to 15rem.

SASS

// Settings
$main-color: #3498db;

// Tools
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

// Generic
* {
  margin: 0;
  padding: 0;
}

// Elements
// Your code here

// Objects
// Your code here

Hint

Use body { background-color: $main-color; } and .card { @include flex-center; height: 10rem; width: 15rem; }.

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