Reusing Styles

A guide to reusing styles and code de-duplication.

Overview

As the styles grow, the class name combinations and the same design patterns appear over and over again in the code. To improve development efficiency and maintain design consistency, you should reuse or access them in some way.

This guide also provides specialized solutions tailored for frameworks.

Creating reusing styles

In Master CSS, you can abstract styles into classes and reuse them in your code.

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

Apply the btn style to the button element:

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

@layer base, theme, preset, components, general;@layer components {    .btn {        display: inline-flex    }    .btn {        height: 2.5rem    }}

To learn more about creating components.

Componentization

We provide a CSS-in-JS style utility, Master Styled, to help you create a component with classes in one line. It supports Vanilla js, React, and Vue.

Create a button component

You can define type-safe styles and corresponding classes for style properties.

import styled from '@master/styled.react'const sizes = {    xs: 'font:12 h:6x …',    sm: 'font:12 h:8x …',    md: 'font:14 h:10x …',    lg: 'font:16 h:12x …',    xl: 'font:16 h:14x  …'}declare type Props = {    $size: keyof typeof sizes    disabled?: boolean}const Button = styled.button<Props>('inline-flex font:medium', {    $size: sizes,    disabled: 'opacity:.5'})Button.default = {    $size: 'md'}export default Button

To use the button component.

<Button $size="sm" disabled>Submit</Button>

Rendered as:

<button class="inline-flex font:medium font:12 h:8x … opacity:.5">Submit</button>

However, if the component involves richer implementations such as loading, you should wrap it with a functional component.

Create a block-scoped component

styled operates on an element basis, unlike global styles mentioned above, and you can declare it within a functional component or at the top level.

Create a reusable section component specific to a marketing page.

import styled from '@master/styled.react'export default function Page() {    const Section = styled.section`bg:slate-90 text:white p:15x|20x`    return (        <>            <section className="bg:slate-90 text:white p:15x|20x">...</section> {}            <section className="bg:slate-90 text:white p:15x|20x">...</section> {}            <Section>...</Section> {}            <Section>...</Section> {}        </>    )}

This is useful for block-specific style reuse, rather than creating components['home-section'] which may pollute global styles or cause name collisions.

Summary

• Moderately abstracting styles make design easier to manage and maintain consistency, but it doesn't mean that all styles should be abstracted.
• Only abstract styles that have the potential for reuse, rather than naming them simply for brevity or naming's sake.
• A good CSS structure combines abstract classes and utility classes — don’t get hung up on specific approaches.