/stylesheet

Dynamic CSS for user interfaces

Primary LanguageJavaScript

NPM Version Known Vulnerabilities Coverage Status

Stylesheet Logo

Dynamic CSS for user interfaces.

npm install stylesheet
  • Pure: Stylesheet uses pure standard CSS. Wrap your dynamic CSS properties with an attr() function or attribute selector and Stylesheet will automatically update and render them with your data. So you can develop new features in Stylesheet without rewriting existing code.

  • Component-Based: Build reusable, customizable and dynamic front-end UI elements. Since components styles is written in plain CSS you can easily define components's complex relationships, interactions and shared styles.

  • Write Once, Use Anywhere: Stylesheet can potentially work with any front-end technology stack, so you can share and transfer your styled components between platforms. Stylesheet has official bindings for React and vanilla DOM.

Usage

Title {
  font-size: 4em;
  color: attr(textColor color);
}

And an integration

React Logo HTML5 Logo Webpack Logo
ReactDOM Vanilla DOM Webpack

Learn more about integrations

Prior Art and Comparison

CSS Modules

A methodology to import CSS tokens (e.g. class names) to JavaScript and converting them to unique identifiers.

  • Requires boilerplate code to use as components.
  • Does not provide a solution for dynamic CSS.