ITCSS methodology with SASS - Performance & Optimization

Performance: ITCSS methodology with SASS

MEDIUM IMPACT

This affects CSS loading speed and rendering performance by organizing styles to reduce complexity and improve caching.

Organizing CSS styles for a large project using SASS

SASS

// ITCSS layers
@import 'settings'; // variables, colors
@import 'tools'; // mixins, functions
@import 'generic'; // resets, normalize
@import 'elements'; // basic HTML elements
@import 'objects'; // layout and structure
@import 'components'; // UI components
@import 'utilities'; // helper classes

Separating styles into ITCSS layers reduces selector complexity and improves caching, leading to faster style calculation and less render-blocking.

📈 Performance GainSingle style calculation pass with simpler selectors; reduces reflows and improves LCP

Organizing CSS styles for a large project using SASS

SASS

@import 'reset';
@import 'buttons';
@import 'header';
@import 'footer';

// All styles mixed without clear layering or specificity control

Mixing all styles without structure causes deep selector nesting and large CSS files that slow style calculation and increase render-blocking.

📉 Performance CostTriggers multiple reflows due to complex selectors; blocks rendering longer during style calculation

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Unstructured SASS imports with deep nesting	High due to complex selectors	Multiple reflows triggered by style recalculations	High paint cost from layout thrashing	[X] Bad
ITCSS layered SASS imports with simple selectors	Low due to flat selector structure	Single reflow after initial style calculation	Low paint cost with stable layout	[OK] Good

Rendering Pipeline

ITCSS organizes CSS so the browser can quickly calculate styles with less complexity, reducing layout recalculations and paint times.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckStyle Calculation due to complex selectors and large CSS files

Core Web Vital Affected

LCP

This affects CSS loading speed and rendering performance by organizing styles to reduce complexity and improve caching.

Optimization Tips

1Keep CSS selectors simple and flat to speed up style calculation.

2Organize styles in ITCSS layers to improve caching and reduce render-blocking.

3Avoid deep nesting in SASS to prevent layout thrashing and multiple reflows.

Performance Quiz - 3 Questions

How does using ITCSS with SASS improve page load performance?

A By adding more nested selectors for specificity

B By increasing the number of CSS files loaded

C By reducing CSS selector complexity and improving style calculation speed

D By loading all styles inline in HTML

DevTools: Performance

How to check: Record a performance profile while loading the page. Look for long 'Style Recalculation' and 'Layout' tasks.

What to look for: Shorter style recalculation times and fewer layout shifts indicate good CSS organization like ITCSS.

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