Suggest edit — master-css

Title

Name

Note

---
visibility: public
---

# Master CSS

**repo:** [master-co/awesome-master-css](https://github.com/master-co/awesome-master-css)  
**category:** [[front-end-development|Front-End Development]]
**related:** [[css|Css]]

---

# Awesome Master CSS [![Awesome](https://awesome.re/badge.svg)](https://github.com/sindresorhus/awesome) 
 
<a href="https://github.com/master-co/css#readme"><picture><source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/33840671/205240887-0e354830-f0d4-4eb6-b604-9f7b8112c92c.svg"><source media="(prefers-color-scheme: light)" srcset="https://user-images.githubusercontent.com/33840671/205238744-7355106d-d454-4b3d-a40a-7b19e34ddb9d.svg"><img alt="Master CSS" src="https://user-images.githubusercontent.com/33840671/205238744-7355106d-d454-4b3d-a40a-7b19e34ddb9d.svg" height="60" width="350" align="right"></picture></a>

> Automatically generate corresponding CSS rules based on class names, with enhanced CSS syntax, you can build UIs with less code and directly use performant JIT in production.

[Master CSS](https://css.master.co) is a virtual CSS language with enhanced syntax, efficiently build your UI and design system with HTML only.

## Contents 
- [Useful Links](#useful-links)
- [IDE Extensions](#ide-extensions)
- [Tools](#tools)
- [Plugins](#plugins)
- [Community](#community)
- [Learning](#learning)
- [Online Examples](#online-examples)
- [Articles](#articles)

## Useful Links
- [Repository](https://github.com/master-co/css) - Master CSS repository.
- [Documentation](https://docs.master.co/css) - Master CSS documentation.

## IDE Extensions
- [Master CSS Language Service](https://github.com/master-co/css/tree/beta/packages/language-service) - Provides code-completion and syntax highlighting for [Visual Studio Code](/@harrisonqian/awesome/wiki/editors/visual-studio-code).

## Tools
- [Master Styles CSS Converter](https://github.com/serkodev/master-styles-css-converter) - Online convert CSS to Master styles.
- [Master Sandbox](https://sandbox.master.co) - Master sandbox online editor.

## Plugins 
- [@master/normal.css](https://github.com/master-co/css/tree/beta/packages/normal.css) - Normalize browser's styles.
- [@master/keyframes.css](https://github.com/master-co/css/tree/beta/packages/keyframes.css) - Simple and useful CSS keyframes.
- [@master/style-element.react](https://github.com/master-co/style-element.react) - Quickly create styled [React](/@harrisonqian/awesome/wiki/front-end-development/react) elements with conditional class names.
- [@master/literal](https://github.com/master-co/literal) - Conditionally construct class names and strings with template literals.

## Community
- [Discussions](https://github.com/master-co/css/discussions) - Official place to discussion.
- [Discord channel](https://discord.gg/sZNKpAAAw6) - Channel to chat with Master community.
- [Official Twitter](https://twitter.com/mastercorg) - Newly developed notifications about Master.

## Learning
- [Setup guide](https://docs.master.co/css/setup)
- [Syntax tutorial](https://docs.master.co/css/syntax-tutorial) - Quick syntax guide for an enhanced and structured CSS syntax for class names.
- [Master CSS Cheat Sheet](https://awilum.[github](/@harrisonqian/awesome/wiki/development-environment/github).io/cheatsheets/mastercss) - Quickly search all syntax of Master CSS.

## Online Examples
- [Glassmorphism example](https://codepen.io/aron-tw/pen/LYOGzdY) - HTML only glassmorphism components by Master CSS.
- [Interactive switch toggle example](https://codepen.io/aron-tw/pen/zYpyQyV) - A interactive switch toggle by Master CSS.

## Articles
- [Why Master CSS](https://docs.master.co/css/why-master-css) - Offical concepts and principles about Master CSS.
- [Getting started with a whole new CSS language —— Master CSS](https://dev.to/aron/getting-started-with-a-whole-new-css-language-master-css-12l0)
- [Rapidly create reusable [React](/@harrisonqian/awesome/wiki/front-end-development/react) components in one line](https://dev.to/aron/rapidly-create-reusable-react-components-59fd)

Contributions welcome! Read the <a href="./contributing.md">contribution guidelines</a> first.