Styles

Customizing abstract styles for your design system.

Introduction

A style can be composed of multiple syntaxes, you can provide an abstract name for this set of classes and reuse it anywhere.

<button class="btn bg:green!">Submit</button>

This is just one of the abstract means. For React, Vue, and Svelte users, it's recommended to use the official styled package.

Basic usage

Add a style

Create an abstract style using Master CSS syntax.

export default {
    styles: {
        btn: 'inline-flex h:10x …'
    }
}

Apply the btn style to the button element:

<button class="btn">Submit</button>

.inline-flex,
.btn {
    display: inline-flex
}
 
.h\:10x,
.btn {
    height: 2.5rem
}

Master CSS shares the same CSS declarations for .inline-flex, .btn { ... } through a selector list. This structural arrangement enhances browser rendering and enables selectors or media queries to be applied within the config.styles.

Add a style with states

Create an abstract style with state selectors and condtional queries.

export default {
    styles: {
        btn: '… outline:2|invert:focus outline-offset:2:focus'
    }
}

Try clicking the button to see the outline effect

<button class="btn">Submit</button>

.light {
    --invert: 0 0 0
}
 
.dark {
    --invert: 255 255 255
}
 
.outline\:2\|invert\:focus:focus,
.btn:focus {
    outline: 0.125rem rgb(var(--invert)) solid
}
 
.outline-offset\:2\:focus:focus,
.btn:focus {
    outline-offset: 0.125rem
}

Add styles in a nested structure

Create and manage a set of abstract styles in a nested structure. Rather than repeating the same style names over and over again, you can write one style inside another. Master CSS will automatically combine the outer style’s name with the inner style’s.

export default {
    styles: {
        card: {
            '': 'r:2x …',             // .card
            header: 'bb:1|gray …',    // .card-header
            content: 'p:5x …',        // .card-content
            footer: 'bt:1|gray …',    // .card-footer
        }
    }
}

Apply the styles:

<div class="card">
    <div class="card-header">…</div>
    <div class="card-content">…</div>
    <div class="card-footer">…</div>
</div>

.light {
    --gray: 162 161 163
}
 
.dark {
    --gray: 137 136 138
}
 
.bb\:1\|gray,
.card-header {
    border-bottom: 0.0625rem rgb(var(--gray)) solid
}
 
.r\:2x,
.card {
    border-radius: 0.5rem
}
 
.bt\:1\|gray,
.card-footer {
    border-top: 0.0625rem rgb(var(--gray)) solid
}
 
.p\:5x,
.card-content {
    padding: 1.25rem
}

The empty string '' represents an outer style, much like Sass's &.

Extend an existing style

Create a new abstract style by extending an existing style and adding additional syntax.

export default {
    styles: {
        a: 'fg:lime',
        b: 'a text:underline'
    }
}

You can see that b inherits the text lime color of a:

<span class="a">a</span>
<span class="b">b</span>

.light {
    --text-lime: 76 141 7
}
 
.dark {
    --text-lime: 145 217 26
}
 
.fg\:lime,
.a,
.b {
    color: rgb(var(--text-lime))
}
 
.text\:underline,
.b {
    text-decoration-line: underline
}

Style guides

Split styles into files

Whether to split into multiple files depends on how many abstract styles you have.

project
|-- styles
|   |-- btn.css.js
|   `-- card.css.js
`-- master.css.js

Typically, frameworks or standard directory structures come with a "styles/" folder for CSS files, and we recommend placing your custom styles there with "styles/*.css.js".

/** @type {import('@master/css').Config} */
export default {
    styles: {
        btn: '…'
    }
}

Extend "styles/btn.css.js" in "master.css.js".

/** @type {import('@master/css').Config} */
export default {
    extends: [
        require('./styles/btn.css')
    ]
}