Naming Conventions

La convenzione BEM viene utilizzata per la semantica del blocco principale e dei componenti.
Classi personalizzate utilizzate per lo stile (in main.css utilizzate con le classi Tailwind @apply) in componenti atomici, molecole, organismi o stili base ricorrenti per varianti di componenti, ad esempio: pulsanti, link, stili base delle card, tipografia.
Utilizzate anche per gli stili aggiunti o rimossi tramite js, e per gli hook js.

Struttura delle classi

Prefisso

• Tutte le classi del design system iniziano con il prefisso rtds- per evitare conflitti con altri stili o framework

Componenti base

• I componenti base utilizzano la struttura rtds-[nome-componente]
• Esempio: rtds-btn, rtds-card, rtds-category

Varianti

• Le varianti di un componente utilizzano il modificatore BEM con --
• Esempio: rtds-btn--primary, rtds-category--overline

Elementi

• Gli elementi interni di un componente utilizzano il separatore __
• Esempio: rtds-cta-banner__content, rtds-cta-banner__cta

Utility Tailwind

• Le classi di utilità Tailwind sono prefissate con rtds- per mantenere la coerenza ed evitare conflitti con altri framework
• Esempio: rtds-p-6, rtds-flex, rtds-grid

Stati e modificatori

• Altre utility, stati e i modificatori possono essere aggiunti tramite classi separate
• Esempio: is-open, is-selected, has-dialog

Responsive

• Le classi responsive utilizzano i breakpoint di Tailwind con il prefisso rtds-
• Esempio: lg:rtds-grid-cols-12, md:rtds-py-8