Css Module 64

  Module 64 : Web developers looking for modern and efficient CSS techniques. 

Introduction to Modern CSS

Why modern CSS matters

Evolution from CSS2 to CSS3 and now CSS4 proposals

Efficiency in terms of performance, readability, and maintainability

 CSS Custom Properties (Variables)

Concept:

CSS custom properties (variables) allow you to reuse values across your stylesheets, making CSS more manageable and dynamic.

Syntax:

css

 code

:root { --main-color: #3498db; --padding-base: 1rem; } button { background-color: var(--main-color); padding: var(--padding-base); }

Advantages:

Centralized design values

Easier theme switching

Native browser support and better performance than preprocessor variables

Exercise 1: Create a Theme with Custom Properties

Objective:

Implement a light/dark mode switch using CSS variables.

Steps:

Define base colors using :root.

Use data-theme attribute to change the root variables.

Write JavaScript to toggle data-theme.

Code Example:

css

 code

:root { --bg-color: #ffffff; --text-color: #000000; } [data-theme="dark"] { --bg-color: #000000; --text-color: #ffffff; } body { background-color: var(--bg-color); color: var(--text-color); }

js

 code

document.querySelector("#themeToggle").onclick = () => { document.documentElement.dataset.theme = document.documentElement.dataset.theme === "dark" ? "light" : "dark"; };

Responsive Layouts with Flexbox and Grid

Flexbox Deep Dive:

1D layout (row or column)

Use cases: navbars, toolbars, buttons

css

 code

.container { display: flex; justify-content: space-between; align-items: center; }

CSS Grid Deep Dive:

2D layout (rows and columns)

Use cases: dashboards, galleries, forms

css

code

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }

Exercise 2: Build a Responsive Dashboard

Objective:

Use Flexbox for header/footer and Grid for main content.

Header and footer: display: flex, center items

Content section: display: grid, responsive columns

Add breakpoints with media queries

Modern CSS Selectors

Focus:

:is(), :where(), :not()

Attribute and state selectors

Benefits: cleaner, shorter selectors with better performance

css

code

:is(h1, h2, h3) { font-family: 'Open Sans', sans-serif; }

Exercise 3: Optimize a Blog Layout

Goal:

Use advanced selectors to simplify class-heavy markup.

 Minimal CSS with Utility Classes (Utility-First CSS)

Concept:

Using small, reusable utility classes (like Tailwind CSS) to compose interfaces with minimal custom CSS.

html

 code

<button class="bg-blue-500 text-white p-2 rounded hover:bg-blue-600"> Click Me </button>

Pros:

Less CSS to maintain

Highly reusable and consistent

Exercise 4: Recreate a Component Using Only Utility Classes

Performance Optimization Techniques

Focus Areas:

Minify CSS

Use critical CSS (load only what’s needed first)

Remove unused CSS (e.g., PurgeCSS)

Use content-visibility for lazy-rendering

css

code

.card { content-visibility: auto; }

Compare Load Times

Tools:

Lighthouse or WebPageTest

Create two versions of a page (one optimized, one not).

Run performance tests.

Measure paint time and unused CSS percentage.

Modern Techniques Summary Checklist

Technique

Description

Benefits

CSS Variables

Reusable design tokens

Theme flexibility

Flexbox

1D layouts

Responsive alignment

Grid

2D layouts

Complex layout design

:is()/:where()

Advanced selectors

Less repetition

Utility CSS

Small composable classes

Fast prototyping

content-visibility

Lazy rendering

Faster initial load

 Build a Modern, Responsive Landing Page

Requirements:

Use CSS Grid and Flexbox for layout

Apply a dark/light theme toggle using CSS variables

Optimize performance with minimal CSS and content-visibility

Deliverables:

Complete HTML/CSS source code

Performance report screenshot from Lighthouse

Optional Tailwind version of the same page