Skip to content

Instantly share code, notes, and snippets.

@robdodson

robdodson/css-process.md

Last active March 5, 2021 04:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save robdodson/6530052daaf77a6d91d30f01ab160121 to your computer and use it in GitHub Desktop.
Save robdodson/6530052daaf77a6d91d30f01ab160121 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
css-process.md

We try to follow the cube.fyi methodology. The CSS for all component-like-things lives in the blocks directory. Blocks could either be BEM CSS components or web components. Here's a web component: https://github.com/GoogleChrome/developer.chrome.com/blob/main/site/_scss/blocks/_cookie-banner.scss

You can see how it's used here: https://github.com/GoogleChrome/developer.chrome.com/blob/0db454723269cc9ddcde1beb5789bf8760855665/site/_includes/partials/cookie-banner.njk#L3

We use an Eleventy transform to feed the HTML for every page to PurgeCSS. Our PurgeCSS config looks at the raw html, and also our JS files, to figure out which classes to include in the page. https://github.com/GoogleChrome/developer.chrome.com/blob/main/site/_transforms/purify-css.js

In dev mode we just compile one big stylesheet which includes every style used across the site. In prod mode we tell eleventy to run the transform and replace the dev stylesheet with inline styles: https://github.com/GoogleChrome/developer.chrome.com/blob/main/site/_includes/layouts/base.njk#L16-L20

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment