Stil

Carats, stil için kapsamlı SASS kullanır ve en az CSS sınıfıyla anlamsal HTML'i teşvik eder.

base.sass

src/client içindeki base.sass dosyası global tasarım token'larını ve stil sıfırlamalarını içerir. Diğer tüm SASS dosyaları onu @use ve as * ile içe aktarır; böylece token'lar ad alanı ön eki olmadan kullanılabilir.

base.sass Oluşturma

// 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

Tasarım Token'ları

Renkleri, boşlukları, tipografiyi, kırılma noktalarını ve diğer tasarım token'larını base.sass'ın en üst düzeyinde tanımlayın. İç içe geçirmeyin.

Doğru Kullanım

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

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

Yanlış Kullanım

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

Bir kuralın içinde tanımlanan token yalnızca o kuralın içinde vardır; bu yüzden ona ihtiyaç duyan başka bir stil dosyası onu yeniden tanımlamak zorundadır. Bir paletin proje boyunca sessizce birbirinden ayrışması böyle olur.

Anlamsal HTML

En az sınıf kullanımıyla anlamsal HTML öğelerini tercih edin. Stili bileşen yapısı ve tasarım token'larına bırakın; işaretlemeye yardımcı sınıflar eklemek yerine seçicileri SASS içinde iç içe geçirin.

Örnek Bileşen

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>
    );
}

İlgili SASS

@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

Duyarlı Stil

@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

En İyi Uygulamalar

Bakımı kolay stil için şu en iyi uygulamaları izleyin:

1. Token'ları en üst düzeyde tanımlayın. Tasarım token'larını asla mixin'lerin veya fonksiyonların içine gömmeyin.
2. Anlamsal HTML'i tercih edin. Sınıf eklemek yerine yapının stili tanımlamasına izin verin.
3. base.sass dosyasını doğru içe aktarın. Her zaman @use 'relative/path/to/base.sass' as * kullanın.
4. Özgüllüğü düşük tutun. Derinlemesine iç içe geçmiş seçicilerden kaçının.
5. Tutarlılık için değişken kullanın. Renkleri, boşlukları veya ölçüleri asla sabit kodlamayın.