- Visit css.master.co for full documentation.
- Browse our discussion community.
- Join our discord channel.
- Follow our twitter.
On this page
Features
Let's have a quick overview of the groundbreaking features of Master CSS:
π₯ A whole new CSS language instead of utilities/libraries.π Write CSS properties, functions, selectors and even media queries directly inclass="..."
.π§ Automatically generate corresponding CSS rules based on class names.π With enhanced CSS syntax, you can build UIs with less code.β‘οΈ Directly use performant JIT in production. ~13KB𧬠An enhanced and structured CSS syntax for class names.π A forerunner to syntax highlighting for class names.β¨ Hybrid Rendering that allows you to pre-generate CSS from HTML on the server side, and then continue to use JIT on the client side.β¨ Group Styles that allows you to extract the same selectors and media query styles and make it short.β¨ Reactive Styles that allows you to style an element based on parent/sibling state.
To learn more, check out the documentation.
Why Master CSS
A brief introduction starts by giving you an understanding of markup-driven CSS.
<style>
.home-section {
background-color: blue;
padding: 2rem;
text-align: center;
}
.home-section:hover {
background-color: red;
}
@media (min-width: 1024px) {
.home-section {
padding: 3rem;
}
}
</style>
<section class="home-section">...</section>
<section class="bg:blue bg:red:hover p:32 p:48@md text:center">...</section>
To learn more, check out the Why Master CSS documentation.
Quick Start
This is a quick start guide, check out the full setup guide to integrate with your build tools and frameworks.
npm install @master/css
import '@master/css';
or use a CDN
<script src="https://cdn.master.co/css"></script>
Now, start styling HTML with Master CSS.
<h1 class="font:40 font:heavy italic m:50 text:center">Hello World</h1>
To learn more, check out the Syntax tutorial documentation.
Developer Tools
- Master CSS Language Service - A Visual Studio Code extension for Master CSS. Provides code-completion and syntax highlighting.
Inspiration
Some of our core concepts and designs are inspired by these giants.
- Language - Master is a language, but it was originally inspired by ACSS's concept of atomic classes.
- Virtual CSS - Difference algorithms, virtual models, etc. are inspired by Virtual DOM.
Related
- @master/normal.css - Normalize browser's styles. ~1KB
- @master/keyframes.css - Simple and useful CSS keyframes. ~0.4KB
- @master/style-element.react - Quickly create styled React elements with conditional class names. ~800B