CSSIntermediate~4h

Modern CSS

A stylesheet with an interface

Six features that are in every browser and in almost no curriculum. You will design a component as a set of named, typed knobs, size it with a range, not a breakpoint, let it read the box it is in rather than the window, and settle which rule wins with a line at the top of the file instead of another !important.

Start this project See the modules

Modules: 6
Drills: 10
Build steps: 6
Time: ~4h

Walk out able to

Ship one card stylesheet a stranger can re-theme, reflow and translate without editing a single selector in it.

One file, six features, no build step.

What you build it from

A property API

Named knobs, typed defaults, a documented fallback.

Container queries and clamp

Sizes taken from the box, not from the window.

Logical sides

Edges that follow the text, in any direction.

Nesting and cascade layers

Flat selectors you can read; an order you chose.

The pitch

What you practise, and what you leave with

A card stylesheet plus a second file that re-themes it with custom properties alone. If that file needs a selector, the API was short a knob.

You will practise

Property APIs and @property defaults
Container queries, container units, clamp
Logical sides in four writing modes
Nesting desugared, and cascade layers

Afterwards you can

Design a property API with typed defaults
Make a component read its container, not the page
State where a clamp locks, both ends
Say which rule wins, layers and all

Modules

6 modules, 29 items

Lessons explain one idea. Drills repeat it until it sticks. Build steps make something that exists afterwards.

1
Give the sheet an API
~41 min
Design a named knob with a documented default, and give it a type that holds.
- LessonWhy a stylesheet needs an interface4 min
- LessonThe name and the fallback9 min
- LessonGive the knob a type7 min
- DrillSay which value the card uses10 min
- DrillSay what a bad token computes to11 min
2
Ask the container, not the page
~52 min
Make a component read the box it is in, and size itself in units of that box.
- LessonAsk the box, not the window8 min
- LessonFind the box a query reads8 min
- DrillDecide whether the query applies11 min
- DrillTurn container units into pixels9 min
- Build stepBuild a card that reflows9 min
- Build stepRead the value the browser used7 min
3
One value, two bounds
~37 min
Replace a breakpoint with a range, then say exactly where that range begins and ends.
- LessonReplace a breakpoint with a range8 min
- LessonSay where the range begins and ends6 min
- DrillCompute a clamp at a given width11 min
- DrillFind where a clamp locks12 min
4
Sides that follow the text
~36 min
Name the edge any logical side paints, and flip a component with no second rule.
- LessonName the axes before the edges8 min
- LessonConvert the sheet, values and all6 min
- DrillName the edge a logical side paints10 min
- Build stepFlip the card without a second rule12 min
5
Nest what the browser understands
~27 min
Read any nested rule as the flat selector it compiles to — and know what it cannot do.
- LessonRead a nested rule flat9 min
- LessonWhat nesting will not do7 min
- DrillDesugar a nested rule11 min
6
Order the cascade on purpose
~1h
Decide which file wins before any selector is weighed, then ship the sheet.
- LessonPut the order where you can read it7 min
- LessonUnlayered, and the reversal8 min
- DrillSay which declaration wins12 min
- DrillWrite the declaration that does it10 min
- Build stepPut the sheet into four layers7 min
- Build stepSettle the contest you set up7 min
- Build stepShip the component stylesheet20 min