Stylesheets and SCSS

01 SCSS structure and naming Theme stylesheets are SCSS compiled by the build: tokens and mixins first, then one partial per component, named with BEM. The import order, glob imports and the builds that support them, Sass modules beside @import, and class names from production partials.

02 Several stylesheets from one build A build can compile several stylesheets: a main one, a checkout one, a vendor one loaded late, one per landing-page family. Two real splits with their sizes and the templates that load them, and the rule for what belongs in each file.

03 Design tokens as custom properties On a multi-brand site, colours and fonts belong in CSS custom properties, set per brand or per page at render time from values an administrator controls, so one stylesheet serves every brand. The override pattern in both engines, the per-brand build it replaces, and what custom properties cannot do.

04 Bootstrap in a theme Most theme repositories use Bootstrap 5 for the grid, spacing utilities and a few interactive pieces, and their own components for everything visible. How to find the version a site really runs, the Bootstrap 4 class names that silently do nothing, the 5.3 additions, and the import order that makes overrides work.

05 Critical and deferred CSS The main stylesheet should block rendering; styles the first screen does not need should not. What to inline in the head, how to load a stylesheet late under the site's Content Security Policy, attaching the handler from your bundle instead of inline, and the measurements that decide whether a change was worth it.

Objects ReferenceGenerated from the platform, so it is always current

API ReferenceEvery REST endpoint, in cURL, PHP, Python and JavaScript

In this unit