DEV Community

Cover image for Getting started with a whole new CSS language —— Master CSS
Aron
Aron

Posted on • Edited on

3 1

Getting started with a whole new CSS language —— Master CSS

A Virtual CSS language with enhanced syntax. ~13KB

image

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 in class="...".
  • 🧠 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.

😐 Traditional

<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>
Enter fullscreen mode Exit fullscreen mode

🤩 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>
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
import '@master/css';
Enter fullscreen mode Exit fullscreen mode

or use a CDN

<script src="https://cdn.master.co/css"></script>
Enter fullscreen mode Exit fullscreen mode

Now, start styling HTML with Master CSS. 🎉

<h1 class="font:40 font:heavy italic m:50 text:center">Hello World</h1>
Enter fullscreen mode Exit fullscreen mode

To learn more, check out the Syntax tutorial documentation.

Developer Tools

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

Press ⭐️ star on GitHub! If you like it.

Image of Wix Studio

2025: Your year to build apps that sell

Dive into hands-on resources and actionable strategies designed to help you build and sell apps on the Wix App Market.

Get started

Top comments (1)

Collapse
 
artydev profile image
artydev

Thank you very much Aaron.
I am beginning a serie on DEV TO :-)
Regards

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay