A pattern library is a separate set of HTML pages that inventories and showcases reusable CSS modules. It is a development tool, not part of the site or application. When a stylesheet has many modules, the library helps you find an existing pattern before writing more CSS. section 9.4 section 9.0
Use the library as part of a CSS-first workflow:
- Start with a sketch or mockup. Look for existing modules, assembling the page from outer layout and containers inward. section 9.4.1
- If a needed module or variant is missing, set the page aside. Build and document the pattern in the library, check how it looks and behaves, then use it on the page. section 9.4.1
Choosing a list style
Suppose several pages need styled lists. Reusing a few documented list modules avoids creating a different list style for every page. If none fits, develop the new style separately before adding it to a page. section 9.4.1
The library can be hand-built HTML pages, or it can use a tool such as Storybook when the application uses a supported JavaScript framework. Choose an approach that fits the team’s technology; the important part is an accessible inventory of available modules. section 9.4
Treat incompatible changes deliberately. One option is to update every affected page’s HTML. Another is to mark the old module as deprecated in the library and introduce a replacement, allowing both to work during migration. CSS versions can communicate whether a release contains fixes, compatible additions or deprecations, or removal of deprecated modules. section 9.4.2
