Lesson 9: CSS foundations and cascade: Architecture checkpoint

Concept Explanation

Architecture in CSS is about deciding where styles belong before a stylesheet becomes messy. In this lesson, you will organize a small page section using base styles, component styles, and a simple naming pattern so that each rule has a clear job. Instead of adding declarations wherever they seem to work, you will group them in a way that makes future edits easier. This kind of structure matters once a project has more than one page or more than one person editing the styles.

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

• Separate base values, component rules, and variations so each group has a clear purpose.
• Test the featured modifier and confirm it changes the component without rewriting every property.
• Map each selector to its role: base token, component block, child element, or modifier.
• Write down one architecture choice that would help if the project grew to several similar cards.

Step-by-step Guide

1. Identify which rules define reusable values and which rules belong only to the profile card component.
2. Apply the styles to a normal card and a featured card to compare the structure and variation.
3. Add one new child element, such as a description, without breaking the existing naming pattern.
4. Check that the modifier only changes what is necessary and does not duplicate base styles.
5. Review the stylesheet and note how the structure would help when adding more components later.

Practice Exercises

• Create a second component, such as a notification card, using the same token layer but different component classes.
• Refactor the card so spacing and colors are easier to update from a single place.
• Build a small example with one base card and two modifier variations.

Coding Challenges

• Design a mini component structure for a dashboard panel with a title, subtitle, and highlighted state.
• Compare a flat stylesheet with a token-plus-component approach and explain which is easier to maintain.

Mini Practice Tasks

• Add one modifier class without duplicating the whole component.
• Rename one selector to better match its role in the structure.
• Summarize the architecture in one clear sentence.