SUIT CSS: style tools for UI components

Introduction

SUIT CSS is a reliable and testable styling methodology for component-based UI development. A collection of CSS packages and build tools are available as modules. SUIT CSS plays well with React, Ember, Angular, and other component-based approaches to UI development.

Scope styles

The SUIT CSS naming convention helps to scope component CSS and make your widgets render more predictably.

.MyComponent {}
.MyComponent.is-animating {}
.MyComponent--modifier {}

.MyComponent-part {}
.MyComponent-anotherPart {}

Future-facing CSS preprocessor

The SUIT CSS preprocessor assembles future-facing extensions to CSS that support component-based development.

npm install suitcss-preprocessor

Vendor-prefixes are automatically applied with Autoprefixer. Custom media query aliases and custom properties help with theming and configuring components. Imports are inlined and can be used to reference npm-installed packages.

/* Import inlining */
@import "normalize.css";

/* Media query aliases */
@custom-media --wide-screen (min-width: 80em);

/* Custom properties */
:root {
  --base-font-size: 16px;
}

@media (--wide-screen) {
  html {
    font-size: calc(var(--base-font-size) * 2);
  }
}

Encapsulation testing

postcss-bem-linter (for PostCSS) is included in the preprocessor but can be used stand-alone. It lets you test your CSS for conformance to the SUIT CSS methodology.

/** @define MyComponent; */

:root {
  --MyComponent-color: green;
}

.MyComponent {
  color: var(--MyComponent-color);
}

HTML Inspector can be used to test that your HTML conforms to the SUIT conventions.

Starter CSS for web apps

SUIT CSS provides a normalizing style foundation designed for web applications. The utilities provide design-agnostic structural helpers that reduce common boilerplate CSS in components.

<div class="MyComponent">
  <h1 class="u-textTruncate">...</h1>
  <div class="u-cf">
    <div class="u-sizeFit">...</div>
    <div class="u-sizeFill">...</div>
  </div>
</div>

Dependency resolution

SUIT CSS works best when style dependencies are automatically resolved. Rely on npm or Component(1). With npm, imports can be used to depend on local components and CSS in npm-installed packages.

/* npm-installed dependency */
@import "suitcss-utils-text";
/* local dependency */
@import "./Button";

.MyComponent {}

Modular and extensible

Each part of the SUIT CSS project is modular. Pick and choose which CSS packages to use. Write your own components. Rebuild and extend the CSS preprocessor using PostCSS plugins.

Used by…

Twitter, BBC Three, Cloud Four, Segment.io and many others.