CSS Utilities

Utilities provide the building blocks for layout and handle a range common use cases that help us avoid writing custom styles.

When we need to add some margin or padding, rather than adding a new selector specific to that use case, we can use utilities. This helps us reduce the number of unique property-value pairs, and helps us keep more consistent styles across the site.

  • Utilities should do one job well and one job only, are immutable, and on occasion are an acceptable approach to overriding component styles.
  • Utility class-names should be transparent and clearly describe the job they do.