Estilos

Carats usa SASS con alcance para los estilos y promueve HTML semántico con el menor número de clases CSS.

base.sass

El archivo base.sass de src/client contiene los tokens de diseño globales y los resets de estilo. Todos los demás archivos SASS lo importan con @use y as * para que los tokens estén disponibles sin prefijo de espacio de nombres.

Crear base.sass

// Colors
$color-primary: #000000
$color-secondary: #ffffff
$color-background: #f5f5f5
$color-text: #333333
$color-text-light: #666666

// Spacing
$spacing-xs: 4px
$spacing-sm: 8px
$spacing-md: 16px
$spacing-lg: 24px
$spacing-xl: 32px

// Typography
$font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif
$font-size-base: 16px
$font-size-sm: 14px
$font-size-lg: 18px
$font-size-xl: 24px
$font-weight-normal: 400
$font-weight-bold: 700

// Breakpoints
$breakpoint-sm: 576px
$breakpoint-md: 768px
$breakpoint-lg: 992px
$breakpoint-xl: 1200px

// Border radius
$border-radius: 4px
$border-radius-lg: 8px

// Box shadows
$box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1)
$box-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.15)

// Transitions
$transition-fast: 150ms ease
$transition-normal: 250ms ease

Tokens de diseño

Define colores, espaciado, tipografía, puntos de ruptura y otros tokens de diseño en el nivel superior de base.sass. No los anides.

Uso correcto

@use '../base.sass' as *

.my-component
    color: $color-text
    padding: $spacing-md
    font-size: $font-size-base

Uso incorrecto

// Tokens must stay at the top level of base.sass
.my-component
    $color-text: #333
    .inner
        color: $color-text

Un token definido dentro de una regla solo existe dentro de esa regla, así que cualquier otra hoja de estilos que lo necesite tiene que redefinirlo. Así es como una paleta se va desviando en silencio a lo largo de un proyecto.

HTML semántico

Prefiere elementos HTML semánticos con el menor uso de clases. Deja que la estructura del componente y los tokens de diseño se ocupen del estilo, y anida selectores en SASS en lugar de añadir clases utilitarias al marcado.

Componente de ejemplo

import './card.sass';

export default function Card(props: { title: string; children?: JSX.Element }) {
    return (
        <article class="card">
            <header>
                <h2>{props.title}</h2>
            </header>
            <section>
                {props.children}
            </section>
            <footer>
                <button>Action</button>
            </footer>
        </article>
    );
}

SASS correspondiente

@use '../base.sass' as *

.card
    background: $color-secondary
    border-radius: $border-radius-lg
    box-shadow: $box-shadow
    padding: $spacing-md
    margin-bottom: $spacing-md

    header
        margin-bottom: $spacing-sm

        h2
            font-size: $font-size-lg
            font-weight: $font-weight-bold

    section
        margin-bottom: $spacing-md

    footer
        display: flex
        justify-content: flex-end

        button
            background: $color-primary
            color: $color-secondary
            padding: $spacing-sm $spacing-md
            border: none
            border-radius: $border-radius
            cursor: pointer
            transition: background $transition-fast

            &:hover
                opacity: 0.9

Estilos adaptables

@use '../base.sass' as *

.container
    max-width: $breakpoint-xl
    margin: 0 auto
    padding: $spacing-md

    @media (max-width: $breakpoint-md)
        padding: $spacing-sm

.grid
    display: grid
    grid-template-columns: repeat(3, 1fr)
    gap: $spacing-md

    @media (max-width: $breakpoint-lg)
        grid-template-columns: repeat(2, 1fr)

    @media (max-width: $breakpoint-sm)
        grid-template-columns: 1fr

Buenas prácticas

Sigue estas buenas prácticas para mantener los estilos:

1. Define los tokens en el nivel superior. Nunca anides tokens de diseño dentro de mixins o funciones.
2. Prefiere HTML semántico. Deja que la estructura defina el estilo en lugar de añadir clases.
3. Importa base.sass correctamente. Usa siempre @use 'relative/path/to/base.sass' as *.
4. Mantén baja la especificidad. Evita selectores anidados profundamente.
5. Usa variables para mantener la coherencia. Nunca codifiques colores, espaciados o tamaños directamente.