CSS

Questi contenuti non sono ancora disponibili nella tua lingua.

CSS - Guida Rapida

Analisi design system, variabili CSS e stili multi-brand.

Comandi

Dico a Cursor	Cosa fa	Modifica?
“leggi css”	Report variabili + struttura	❌ No (read-only)

Struttura File

Globali (tutti i brand)

File	Scope	Contenuto
`design-system.css`	`:root`	Variabili core (colori, spacing, font)
`main.css`	Layout	Grid, flexbox, containers
`components.css`	UI	Button, card, form, table
`utilities.css`	Helpers	Text align, display, margin

Brand-Specific

Brand	File	Override
Hub	`hub.css`	`--accent: #F97316` (orange)
IN-1	`in1.css`	`--accent: #22C55E` (green/nature)
Elements	`elements.css`	`--accent: #D4AF37` (gold/luxury)
G-Core	`gcore.css`	`--accent: #3B82F6` (blue/tech)

Variabili Principali

Colori

Categoria	Esempio	Uso
Background	`--bg-core`, `--bg-card`, `--bg-hover`	Sfondi
Text	`--text-main`, `--text-muted`, `--text-disabled`	Testi
Accent	`--accent`, `--accent-hover`	Brand color
Status	`--success`, `--warning`, `--error`	Stati
Border	`--border`, `--border-hover`	Bordi

Spacing

Variabile	Valore	Uso
`--space-xs`	4px	Padding minimo
`--space-sm`	8px	Gap piccolo
`--space-md`	16px	Gap standard
`--space-lg`	24px	Sezioni
`--space-xl`	32px	Sezioni grandi

Typography

Categoria	Esempio	Uso
Font Family	`--font-main`, `--font-mono`	Famiglie font
Font Size	`--text-xs` … `--text-4xl`	Dimensioni
Font Weight	`--weight-normal` … `--weight-bold`	Peso

Layout

Variabile	Valore	Uso
`--sidebar-width`	260px	Sidebar
`--topbar-height`	60px	Header
`--max-width`	1280px	Container
`--border-radius`	8px	Cards, buttons

Pattern Componenti

Buttons

Classe	Stile	Uso
`.btn`	Base button	Tutti i bottoni
`.btn-primary`	Accent bg	CTA principale
`.btn-secondary`	Border only	Azione secondaria
`.btn-ghost`	Transparent	Azioni subtle
`.btn-danger`	Red bg	Delete

Cards

Classe	Stile	Uso
`.card`	Dark bg + border	Container base
`.card-header`	Border bottom	Titolo
`.card-body`	Padding standard	Contenuto
`.card-footer`	Border top	Azioni

Forms

Classe	Stile	Uso
`.input`	Dark input	Text input
`.select`	Dark select	Dropdown
`.checkbox`	Custom checkbox	Toggle
`.label`	Muted text	Label

Health Check

Il report CSS include controlli:

Check	Target	Problemi Comuni
Variabili definite	> 30 vars	Poche variabili = no sistema
Naming convention	`--kebab-case`	Inconsistenza naming
No !important	0 occorrenze	Specificità errata
No colori hardcoded	0 occorrenze	Usare variabili
Mobile responsive	≥ 3 breakpoints	Mancano media queries

Esempio Output Health

HEALTH CHECK
----------------------------------------------------------------
| Check | Status | Note |
|-------|--------|------|
| Variabili definite | ✅ OK | 45 vars |
| Naming convention | ✅ OK | --kebab-case |
| No !important | ⚠️ WARN | 3 found |
| No colori hardcoded | ⚠️ WARN | 8 found |
| Mobile responsive | ✅ OK | 4 breakpoints |
----------------------------------------------------------------

AZIONI SUGGERITE:
1. Rimuovere 3 !important in hub.css
2. Sostituire 8 colori hardcoded con variabili

Brand Override

Ogni brand può sovrascrivere variabili globali:

Hub (Orange Theme)

:root {
  --accent: #F97316;
  --accent-hover: #FB923C;
}

IN-1 (Green/Nature Theme)

:root {
  --accent: #22C55E;
  --bg-core: #0A120A; /* Dark forest */
}

Elements (Gold/Luxury Theme)

:root {
  --accent: #D4AF37;
  --font-main: Georgia, serif; /* Elegant */
}

G-Core (Blue/Tech Theme)

:root {
  --accent: #3B82F6;
  --font-mono: JetBrains Mono;
}

Output Report

Il report include:

Struttura file: Tree con righe per file
Tabella file: File, path, righe, scope, vars
Variabili CSS: Tutte le vars per categoria
Pattern componenti: Classi UI con uso
CSS per brand: Override specifici
Health check: Status ✅/⚠️ con azioni
Duplicazioni: Colori hardcoded, stili duplicati

File Correlati

PLATFORM

AGENTS/cursor/LEGGI-CSS.md - Runbook completo
src/public/css/design-system.css - Core variables
src/brands/*/css/*.css - Brand override

DOCS

04-design-system.md - Design System (Truth Zone)

Quando Usare

Usa “leggi css” quando:

Devi aggiungere nuovo brand
Vuoi verificare consistenza design system
Cerchi colori hardcoded da sostituire
Devi documentare componenti UI
Prima di major redesign

Frequenza consigliata:

Prima di ogni nuovo brand
Dopo redesign importante
Trimestrale per consistency check

Prossimi Step

Dopo “leggi css”, se trovi problemi:

Colori hardcoded:
- Aggiungi variabile in design-system.css
- Sostituisci #000000 con var(--nome-var)
!important:
- Aumenta specificità CSS
- Usa combinatori (>, +, ~)
- Rimuovi !important
Duplicazioni:
- Crea utility class
- Astrarre in components.css
Inconsistenze naming:
- Usa sempre --kebab-case
- Prefissi: --bg-*, --text-*, --space-*

Ultimo aggiornamento: 2025-12-25
Maintainer: Francesco Pelosio
AI Agent: Cursor (con runbook LEGGI-CSS.md)