Lesson 7: CSS foundations and cascade: Performance perspective

Concept Explanation

Performance in CSS is usually less about raw speed and more about keeping styles predictable, easy to apply, and cheap to maintain as a page grows. In this lesson, you will style a small card layout while paying attention to selector simplicity, reusable spacing rules, and avoiding unnecessary overrides. The goal is to see how a clear structure can reduce future styling work and make changes safer. By the end, you should be able to spot when a stylesheet is becoming harder to scale and rewrite it into a lighter, more consistent version.

Where to Put the Code

1. Start with variables and inputs. Place style rules in reusable class selectors.
2. Add processing logic in the middle section.
3. Finish with output and quick validation.

Command Reference

• Start with two cards that share the same structure, then confirm both receive the same base styling.
• Change one design token such as --card-padding or --border-color and observe how many elements update at once.
• Compare a version that repeats styles in each selector with a version that uses shared classes and variables.
• Write down one reason simple selectors are easier to maintain when a layout grows.

Step-by-step Guide

1. Paste the starter CSS into a small demo page with two or three cards.
2. Check that spacing, borders, and text color come from shared rules rather than repeated declarations.
3. Change one token value and confirm the update appears consistently across all cards.
4. Add one extra modifier or variation without breaking the base card styles.
5. Review the result and note which rule makes the stylesheet easier to extend later.

Practice Exercises

• Build a compact card variant with tighter spacing while keeping the same base card class.
• Rewrite the example without design tokens, then compare which version is easier to adjust.
• Create a small list of three UI pieces that could reuse the same spacing or border variables.

Coding Challenges

• Refactor a verbose set of repeated card selectors into a smaller system with shared base styles.
• Add a dark theme variation by changing variables instead of duplicating every component rule.

Mini Practice Tasks

• Rename one class to make its purpose clearer.
• Add one small improvement that reduces repeated values.
• Summarize in one line why this stylesheet is easier to scale.