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

Check out Episode 1: How a Hackathon Project Became a Web3 Startup 🚀

Ever wondered what it takes to build a web3 startup from scratch? In the Stellar Dev Diaries series, we follow the journey of a team of developers building on the Stellar Network as they go from hackathon win to getting funded and launching on mainnet.

Read more

Top comments (1)

Collapse
 
artydev profile image
artydev

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

Image of Stellar post

🚀 Stellar Dev Diaries Series: Episode 1 is LIVE!

Ever wondered what it takes to build a web3 startup from scratch? In the Stellar Dev Diaries series, we follow the journey of a team of developers building on the Stellar Network as they go from hackathon win to getting funded and launching on mainnet.

Read more

👋 Kindness is contagious

Explore a trove of insights in this engaging article, celebrated within our welcoming DEV Community. Developers from every background are invited to join and enhance our shared wisdom.

A genuine "thank you" can truly uplift someone’s day. Feel free to express your gratitude in the comments below!

On DEV, our collective exchange of knowledge lightens the road ahead and strengthens our community bonds. Found something valuable here? A small thank you to the author can make a big difference.

Okay