Custom Syntax

Styles

Customizing abstract styles for your design system.

The composition of styles is similar to using syntax within class="", with the difference that you can provide an abstract name for this set of classes and reuse it anywhere.

The styles utilizes :where() to reduce CSS specificity, allowing you to modify abstract classes using practical syntax without needing to add !important declarations:

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

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>
Generated CSS
.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>
Generated CSS
.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>
Generated CSS
.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:

ab
<span class="a">a</span>
<span class="b">b</span>
Generated CSS
.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')
]
}
Custom Syntax
Semantics

Customizing semantic classes for your design system.

Custom Syntax
Variables

Customizing variables for your design tokens.

© Aoyue Design LLC.