@master/css

CSS

A Virtual CSS language with enhanced syntax. ~13KB

• Visit css.master.co for full documentation.
• Browse our discussion community.
• Join our discord channel.
• Follow our twitter.

On this page

• Features
• Why Master CSS
• Quick Start
  • Install
  • Import
  • Hello world
• Inspiration
• Related
  • Developer tools

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 in class="...".
• 🧠 Automatically generate corresponding CSS rules based on class names.
• 🍬 With CSS syntax enhancements, you can create UIs with less code.
• ⚡️ The JIT mode is only ~13KB.
• 💖 Directly use performant JIT mode in production.
• 🧬 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.
• ... css.master.co

Why Master CSS

A brief introduction starts by giving you an understanding of markup-driven CSS.

🙁 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, refactor it with a whole new CSS language to make it easier. ↓ 86% code

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

To learn more, check out the documentation Why Master CSS.

Quick Start

This is a quick start guide, check out the full setup guide to integrate with your build tools and frameworks.

Install

npm install @master/css

or use a CDN

<script src="https://cdn.master.co/css"></script>

Import

Import to your entry file. e.g: src/main.js

import '@master/css';

Hello world

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 documentation Syntax tutorial.

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.

Developer tools

• Master CSS Language Service - A Visual Studio Code extension for Master CSS. Provides code-completion and syntax highlighting.