SASSmarkup~10 mins

ITCSS methodology with SASS - Browser Rendering Trace

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Render Flow - ITCSS methodology with SASS

[Read ITCSS layers] -> [Organize SASS files by layers] -> [Import layers in order] -> [Compile SASS to CSS] -> [Browser applies styles in cascade order]

The browser reads the compiled CSS generated from SASS files organized by ITCSS layers, applying styles from generic to specific to avoid conflicts.

Render Steps - 3 Steps

Code Added:

// 3. Generic
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Before

[Browser default styles]
Button has default margin and padding
Button size and spacing inconsistent

→

After

[Reset styles applied]
Button margin and padding removed
Box sizing includes border in size
Layout baseline consistent

Generic reset removes default spacing and sets box-sizing for predictable sizing.

🔧 Browser Action:Triggers reflow to recalculate element sizes and spacing

Code Sample

This code produces a centered button with primary blue color, styled using ITCSS layers in SASS for clear structure and maintainability.

SASS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ITCSS Example</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <button class="btn btn--primary">Click me</button>
  </div>
</body>
</html>

SASS

// 1. Settings
$primary-color: #3498db;

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

// 3. Generic
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

// 4. Elements
button {
  font-family: Arial, sans-serif;
  cursor: pointer;
}

// 5. Objects
.container {
  @include center;
  height: 100vh;
}

// 6. Components
.btn {
  padding: 1rem 2rem;
  border: none;
  border-radius: 0.5rem;
  background-color: gray;
  color: white;
  transition: background-color 0.3s;
}

.btn--primary {
  background-color: $primary-color;
}

// 7. Utilities
.mt-2 {
  margin-top: 2rem;
}

Render Quiz - 3 Questions

Test your understanding

After applying step 1 (Generic layer), what visual change do you see on the button?

AButton becomes centered horizontally

BButton margin and padding are removed, making it smaller and consistent

CButton text color changes to blue

DButton font changes to Arial

Common Confusions - 3 Topics

Why do my variables in Settings not change the button color?

Variables in Settings only define values. You must use them in Components or other layers to see visual changes, as shown in step 3 where $primary-color is applied.

💡 Variables alone don't style elements; they provide values for styles applied later.

Why does resetting margin and padding in Generic affect all elements?

Generic layer applies to all elements (*) to remove browser defaults, creating a clean slate for consistent styling, as seen in step 1.

💡 Generic resets affect every element, so always apply them first.

Why is my button not centered vertically on the page?

Centering requires layout styles like flexbox in Objects layer. Without applying .container with center mixin, content won't center, as explained in property_table and implied in code_sample.

💡 Use Objects layer for layout patterns like centering.

Property Reference

ITCSS Layer	Purpose	Example SASS Code	Visual Effect
Settings	Define variables and constants	$primary-color: #3498db;	No direct visual effect, used in later layers
Tools	Mixins and functions	@mixin center { display: flex; justify-content: center; align-items: center; }	Reusable styles for layout
Generic	Reset and normalize styles	* { margin: 0; padding: 0; box-sizing: border-box; }	Removes default spacing, consistent sizing
Elements	Base element styles	button { font-family: Arial, sans-serif; cursor: pointer; }	Sets font and cursor for buttons
Objects	Reusable layout patterns	.container { @include center; height: 100vh; }	Centers content vertically and horizontally
Components	UI components styling	.btn { padding: 1rem 2rem; background: gray; }	Styled buttons with padding and colors
Utilities	Helper classes	.mt-2 { margin-top: 2rem; }	Quick margin spacing

Concept Snapshot

ITCSS organizes CSS in layers from generic to specific. Settings hold variables; Tools have mixins. Generic resets default styles. Elements style base HTML tags. Objects handle layout patterns. Components style UI parts. Utilities add helper classes. This structure keeps styles clear and maintainable.