Skip to main content

Intro

What is Stylable#

Stylable is a CSS preprocessor that enables you to write reusable, highly-performant, styled components. Each component exposes a style API that maps its internal parts so you can reuse components across teams without sacrificing stylability.

  • Scopes styles to components so they don't "leak" and clash with other styles.
  • Enables custom pseudo-classes and pseudo-elements that abstract the internal structure of a component. These can then be styled externally.

At build time, the preprocessor converts the Stylable CSS into flat, static, valid, vanilla CSS that works cross-browser.

How do I install#

There are currently two options for installing and working with Stylable:

Optionally, you can install Stylable Intelligence, an extension providing IDE support for code completion and diagnostics. Currently supported for only Visual Studio Code (version 1.18 and later).

What can I do#

  • Build a Stylable component - If you are looking to style a component, follow the steps in the Stylable Basics Guide and Best Practices Guide

  • Build an app - If you want to use Stylable while building a web application, go to Build a Stylable Application. Read the steps and recommendations for building a performant web application that doesn't depend on other libraries for styling.

  • Create a library - If you want guidance in creating a component library, read Create a Stylable Component Library. Here you can follow our recommendations for building a library that can be used cross-project and includes theming, external styling and reusable components.

  • Learn - Take a look at our specification reference documents to get more acquanted with our code and for specific code examples. Use the overview as a cheatsheet to help you keep track of Stylable syntax.