CSS architecture for large projects
You keep CSS organised, predictable and maintainable as a project grows, using naming conventions, cascade layers, design tokens and build tools.
Level 301 · 16 lessons · 15 practice labs
Lessons
Order and naming
- Problems of growing CSS: conflicts and dead code
- Naming with BEM
- Utility classes versus component classes
- Cascade layers: @layer
- Limiting scope with @scope
- Short task: tidy up a messy stylesheet
A design system
- Design tokens: colour, spacing, type
- Multiple themes with CSS variables
- Sass: variables, nesting and mixins
- Native CSS nesting
- PostCSS and vendor prefixes
- Short task: light and dark themes from tokens
Quality
- Rule checks with Stylelint
- Finding unused CSS
- Visual regression testing
- Capstone: move a site’s styles to a layered architecture
Practice labs
- Rename classes to BEM: Rename the randomly named classes of a card component into block, element and modifier form.
- Untangle clashing styles: Two teams' .button rules overwrite each other; separate their scopes and end the clash.
- Tidy a messy stylesheet: Find duplicates, dead rules and over-specific selectors in a three-thousand-line stylesheet and simplify it.
- Order the layers: Define reset, base, components and utilities layers with @layer and show the effect of their order.
- Put third-party styles in a layer: A ready-made date picker's styles override the page; move them into a low-priority layer to fix it.
- Draw component limits with @scope: Stop styles leaking into nested cards with @scope and a scope limit.
- Define colour and spacing tokens: Move hard-coded colour and spacing values into sensibly named CSS variables.
- Derive light and dark themes from tokens: Set up base and semantic token layers and write a structure that switches theme with one attribute.
- One code base for three brands: Dress the same interface in three sister companies' colour and type tokens without touching component code.
- Cut repetition with Sass: Simplify repeated button styles with Sass variables and a mixin.
- Move from Sass to native nesting: Convert Sass nesting to native CSS nesting and check for behaviour differences.
- Set up a PostCSS pipeline: Set up a PostCSS pipeline for prefixing, minifying and transforming modern syntax and verify the output.
- Fix Stylelint warnings: Add Stylelint to the project and fix the warnings from the first run one by one.
- Find unused CSS: Use the coverage tool to find rules no page uses and separate those safe to remove.
- Set up visual regression tests: Take reference screenshots of five pages and catch the difference a style change causes with a test.
About this course
You keep CSS organised, predictable and maintainable as a project grows, using naming conventions, cascade layers, design tokens and build tools.
What you will learn
- Order and naming
- A design system
- Quality
Prerequisites
You should be comfortable with the level 101 and 201 topics of the same path.
Lab environment
Lessons run on your own Kali Linux desktop in the browser, with the tools ready in their windowed interfaces. Nothing to install; a computer screen is recommended.
Frequently asked questions
- Is this course right for my level?
- The course is at level 301; it assumes you know the topics of the lower-level courses.
- Is there anything to install?
- No. Every lesson runs in your own lab environment that opens in the browser.
- How do lessons work?
- Each lesson has 8 to 10 steps and a short quiz. Early steps show the command to type, later steps give less help; if two attempts fail, the solution opens.
- Can I try it for free?
- Yes. The first three lessons of every course are free.