基礎原理

重用設計

A guide to reusing styles and code de-duplication.

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>

Generated CSS

@layer base, theme, preset, components, general;@layer components {    .btn {        display: inline-flex;        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.

components
Button.tsx
Card.tsx
master.css.ts

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:semibold', {    $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:semibold 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