Unit 2 Overview

Now that you understand modern CSS fundamentals, this unit teaches you how to organize and structure CSS for real-world projects. You will learn design patterns, component-based architecture, theming strategies, and tools for managing large CSS codebases. These skills are essential for working on team projects and building maintainable stylesheets.

Part 1: Architecture & Design Patterns

Complete the following in the specified order by the due dates listed in Canvas or before the end of the unit if no date is listed:

• CSS Design Patterns and Naming Conventions
  Compare common CSS naming systems (BEM, CUBE CSS, and others) and learn when each approach works best in real projects.
• CSS Components and Architecture
  See how to organize CSS into components and layers using file-structure patterns (ITCSS, SMACSS) for multi-file, multi-page sites.
• Light/Dark Theming with Custom Properties
  Learn to build light and dark themes with custom properties, use color-mix() for dynamic color systems, and compare different theme switching strategies.
• Component Library with Design Patterns
  Build a small component library using BEM or CUBE CSS and clearly document the naming and design decisions you make.
• @import and @layer
  Learn how @import and @layer work, how cascade layers help you organize styles, and when each feature is appropriate.
• Team Project: Multi-File CSS Architecture
  Work with your team to build a multi-page site that uses a shared, well-structured CSS architecture, with each member owning specific sections or components.

Part 2: Advanced Organization, Feature Detection & Layout Fundamentals

Complete the following in the specified order by the due dates listed in Canvas or before the end of the unit if no date is listed:

• Container Queries and Feature Detection
  Learn how @container lets components respond to the space they live in instead of the viewport, and how @supports lets you use modern CSS with safe fallbacks for older browsers.
• Build Tooling Basics
  Get an overview of CSS build tools such as PostCSS and autoprefixer, why they matter, and when adding a build step becomes helpful.
• PostCSS and Modern Features
  Use PostCSS to transform your CSS into a modern, optimized version that works across all browsers.
• Advanced Flexbox Patterns
  Deep dive into flex-grow, flex-shrink, and flex-basis, understand align-content vs align-items, and practice nested Flexbox patterns for real layouts.
• CSS Grid Fundamentals Review
  Review core CSS Grid syntax, compare Grid vs Flexbox, and revisit the basic grid patterns you will build on in Unit 3.
• Advanced Flexbox Layouts
  Build several complex component layouts that rely on advanced Flexbox properties to demonstrate precise control over alignment and spacing.