@master/css

CSS

A Virtual CSS language with enhanced syntax. ~13KB

• Introduction
• Setup
• Why Master CSS
• Github Discussions
• Join Master Discord

On this page

• Core Concept
• Quick Start
  • 1. Download
  • 2. Import
  • Hello World
• Original Design
• Inspiration
• Related

Core Concept

This is your current/traditional code:

<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>

Now, writing CSS in a whole new language makes UI development easier. ↓ 86% code

<section class="bg:blue bg:red:hover p:32 p:48@md text:center">...</section>

Quick Start

This is just a quick start guide, the official documentation here.

1. Download

npm install @master/css

Or use a CDN

<script src="https://cdn.jsdelivr.net/npm/@master/css"></script>

2. Import

import '@master/css'

Hello World

<h1 class="font:40 font:heavy bg:blue:hover m:50 text:center@md">
    Hello World
</h1>

Next, learn the structured Syntax - Master CSS!

Original Design

• Master CSS Syntax - As a whole new language, Master created our own unique syntax.
• Class Highlight - Master is the first language to highlight class names in markup.
• Hybrid Rendering - Apply both JIT and AOT to CSS compilation. Similar to Hydration technology.
• Group Styles - The one of groundbreaking features that allows you to extract the same selectors and media query styles and make it short. Inspired by SerKo.
• Reactive Styles - The one of groundbreaking features that allows you style an element based on parent/sibling state.
• Arbitrary selectors and media queries - Apply arbitrary selectors and media queries directly in class="", which is the most powerful and comprehensive language on the market.

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 CSS Language Service - A Visual Studio Code extension for Master CSS. Provides code-completion and syntax highlighting.
• @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.