CSS-first development builds and documents styles in a pattern library before HTML uses them. Page authors begin with reusable modules, adding new CSS only when existing patterns cannot meet the design. section 9.4.1
A practical CSS-first workflow proceeds as follows:
- Start with a page sketch, mockup, or general design target. section 9.4.1
- Search the pattern library for existing modules, beginning with the page layout and containers before moving inward. section 9.4.1
- If a required pattern is missing, pause page work and build a module or variant in the pattern library. section 9.4.1
- Document the new pattern, verify its appearance and behavior, then return to the page and add it using the stylesheet. section 9.4.1
Replacing one-off list styles
Instead of creating a separate list style on every page, check whether an existing pattern-library list is sufficient. If it is not, develop and document a reusable list module before placing it in the page markup. section 9.4.1
The workflow separates CSS changes from HTML adoption. A stylesheet can receive a new version with breaking changes while the application continues using the old version; HTML authors decide when to update deprecated modules. Deprecation and deletion still require communication about which modules remain valuable. section 9.4.2
Modular organization prevents CSS from becoming an accumulation of overrides and increasingly specific selectors. Keeping each module’s styles together makes reuse, maintenance, and change impact easier to manage. section 9.4.2
