EN/CH Mode

BRUCE_FE Interview Notes - Page Loading - Benefits of Utility First CSS

Deep dive into Utility First CSS working principles, its optimization effects on page loading speed, and practical application scenarios, including key knowledge for website performance improvement and complete answers to common interview questions.

EN/CH Mode

Lazy to read articles? Then watch videos!

Basic Concepts

Utility First CSS is a CSS design methodology that builds user interfaces using predefined, single-purpose CSS classes. Each class typically handles one specific CSS property, allowing developers to combine these classes directly in HTML rather than writing custom CSS styles.

The most popular Utility First CSS framework is Tailwind CSS, which provides a rich set of predefined classes for quickly building modern web interfaces.

<!-- Traditional CSS Method -->
<div class="profile-card">
  <img class="profile-image" src="avatar.jpg">
  <div class="profile-content">
    <h2 class="profile-name">Bruce</h2>
    <p class="profile-bio">Frontend Engineer</p>
  </div>
</div>

<!-- Utility First CSS Method (Tailwind) -->
<div class="bg-white rounded-lg shadow-md p-4">
  <img class="w-16 h-16 rounded-full" src="avatar.jpg">
  <div class="ml-4">
    <h2 class="text-xl font-bold text-gray-800">Bruce</h2>
    <p class="text-gray-600">Frontend Engineer</p>
  </div>
</div>

How Utility First CSS Optimizes Page Loading Speed

1. Reduce CSS File Size

┌─────────────────────────────────────────────┐
│                                             │
│  Traditional CSS Method                     │
│                                             │
│  Development CSS: 85KB                      │
│  Used CSS: Only 15KB (82% unused)          │
│                                             │
│  Utility First CSS Method                   │
│                                             │
│  Production CSS: 10KB (only used classes)   │
│  Unused CSS: Almost 0                       │
│                                             │
└─────────────────────────────────────────────┘

Traditional CSS Flow:
Page A --> Load header.css, home.css
Page B --> Load header.css, about.css  (header.css downloaded again)

Utility CSS Flow:
Page A --> Load tailwind.css
Page B --> Use cached tailwind.css  (no need to download again)

2. Avoid CSS Blocking Rendering

Page Loading Process Comparison:

Traditional CSS:
1. Download HTML
2. Parse HTML, discover multiple CSS files
3. Download all CSS files  ⟸ Render blocking
4. Parse all CSS
5. Render page

Utility First CSS:
1. Download HTML
2. Parse HTML, discover single CSS file
3. Download optimized small CSS ⟸ Short blocking time
4. Quick parse of simple CSS
5. Start rendering page faster

3. Reduce Network Requests

// Analysis of network requests for different CSS methods

// Traditional CSS Method (multiple requests)
// main.css, components.css, pages.css, etc.
Network Requests: 5 CSS files
Total Download: 150KB
TTFB (Time to First Byte): Slower (multiple requests queued)

// Utility First CSS Method (single request)
// tailwind.min.css
Network Requests: 1 CSS file
Total Download: 10KB
TTFB: Faster (single small request)

4. Example: Multiple Components Sharing a Single Class

<!-- Traditional CSS Method -->
<style>
  .component-a .width-2 { width: 2rem; }
  .component-b .width-2 { width: 2rem; }
</style>
<div class="component-a">
  <div class="width-2"></div>
</div>
<div class="component-b">
  <div class="width-2"></div>
</div>

<!-- Utility First CSS Method (Tailwind) -->
<div class="component-a">
  <div class="w-2"></div>
</div>
<div class="component-b">
  <div class="w-2"></div>
</div>

In this example, Utility First CSS requires defining the w-2 class only once, reducing redundant CSS definitions and improving performance.

Potential Drawbacks and Solutions

1. HTML May Become Bloated

<!-- Many classes may make HTML hard to read -->
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
  Login
</button>

Solution：Use component abstraction or framework abstraction mechanisms

// React Component Abstraction
function PrimaryButton({ children }) {
  return (
    <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
      {children}
    </button>
  );
}

// Clean usage
<PrimaryButton>Login</PrimaryButton>

2. Learning Curve

Need to learn many predefined class names and their corresponding effects.

🔥 Common Interview Questions

(1) What are the main differences between Utility First CSS and traditional CSS methods?

Answer:

Feature	Traditional CSS	Utility First CSS
Organization	Create custom classes based on components or pages, centralizing styles in CSS files	Use predefined atomic classes, combined directly in HTML
Maintainability	CSS files become complex with project growth, duplicate styles appear	Reduces duplicate styles through class reuse, but HTML may become verbose
Performance	Usually generates larger CSS files, including unused styles	Smaller CSS in production, only includes used classes
Development Speed	Need to switch between HTML and CSS files, naming new classes	Apply styles directly in HTML, no need to create new CSS
Code Example	.btn { background: blue; color: white; padding: 8px 16px; border-radius: 4px; } <button class="btn">Login</button>	<button class="bg-blue-500 text-white py-2 px-4 rounded"> Login </button>

(1) How does Utility First CSS affect the Critical Rendering Path?

Answer:

Utility First CSS optimizes the Critical Rendering Path through the following ways:

1. Reduce CSSOM Size
- 1. Smaller CSS files = Faster CSSOM Construction
- 2. Simpler Selectors = Faster Style Calculation
2. Simplify Style Calculation
- 1. Flat Selector Structure (usually only single class selectors)
- 2. Reduce Style Cascading and Specificity Calculation
3. More Efficient Caching
- 1. Low CSS file change frequency, improving cache hit rate
- 2. Single CSS file means fewer network requests
4. Work with Inline Critical CSS
- 1. Can only inline utility classes needed on the critical path
- 2. The rest of the styles can be loaded asynchronously without blocking rendering

Critical Rendering Path Comparison:

Traditional CSS:
HTML → [Complex CSSOM Construction (slow)] → Render Tree → Layout → Paint

Utility First CSS:
HTML → [Simple CSSOM Construction (fast)] → Render Tree → Layout → Paint