Skip to main content

Intro

Particle provides a CSS stylesheet, written in Sass, that serves as the foundation for all of our UIs. The styles are separated into four concerns:

  1. Base styles
  2. Utility classes
  3. Component styles
  4. CSS variables

Base styles​

A minimal set of CSS selectors target elements at the global level.

These styles serve a few functions:

  • reset element styles to eliminate cross-browser differences
  • align the styling of certain elements with design system values (for example, aligning <strong> with the theme's font-weight--bold value)
  • define a baseline rhythm of spacing between block elements

Utility classes​

Single-purpose and self-descriptive CSS classes to apply narrow styling concerns, usually a single property.

Utility classes support a utility-first approach to styling interfaces, which is a powerful way to style custom components and build and prototype rapidly without needing to write CSS. It avoids the overhead of naming every styled element within a component and the premature abstractions that can occur as a result. It keeps certain design details (e.g border radii, shadows, and colors) in sync with the design system without needing to know how to implement those details in CSS. It keeps specificity low.

Component styles​

CSS selectors that style Particle React components.

Some components are generic enough that they are styled entirely with utility classes, but others have more fine-grained styling or more complex themability requirements that justify component-specific selectors. It should be noted that Particle components often compose component-specific selectors with utility classes to support various configuration use cases without adding additional CSS overhead.

CSS variables​

Variables for design system properties like colors, font sizes, box-shadows, border radii, etc.

These variables are referenced internally by base styles, utility classes, and component classes. They can and should be referenced by CSS in the consuming application to align styles with the design system. As CSS variables (also known as CSS custom properties), they are inherited properties and are leveraged to create themeable interfaces (with support for nesting themes).