SMACSS - noelno/dovelei GitHub Wiki
I. Base
Reset + styles par défaut.
Essentiellement des sélécteurs éléments. Peut inclure des sélécteurs d'attributs, des pseudo-classes, des sélécteurs d'éléments enfants ou de frères.
Pas d'identifiants ou de !important
.
- Reset (framework ou personnalisé)
- Taille de la titraille
- Polices
- Arrière-plan
Conseil : mettre une autre couleur d'arrière-plan que le blanc, travailler sur du blanc peut vous faire louper des trucs.
II. Layout
Divise la page en sections qui contiennent 1 à n modules.
Classes préfixées layout-
, l-
, l-grid
...
- Entête
- Pied-de-page
- Navigation
- Contenu
- Grille
III. Modules
Parties modulaires (réutilisables) plaçables facilement (sans casser) dans le layout, ou au sein d'autres modules.
Représente des composants plus petits : carousels, barre de navigation...
Sélécteurs : seulement des classes (pour la réutilisation) et des éléments enfants dont la balise porte une sémantique (pas span ou div donc). Mais idéalement se cantonner aux classes (pour l'évolutivité).
IV. Etats
Description de l'apparence du layout ou du module dans un état particulier (actif, masqué, déplié, désactivé, sur petit écran...). Classes préfixées is-
.
Exemple : .btn.is-btn-disabled
, .menu-item.is-menu-item-selected
V. Thèmes
Déclinaisons du style de base (fêtes, hommage)... On utilisera une classe portant le nom du module pour redéfinir les règles existantes.
Exemple : .voeux2017 .main-content-heading
Ordre de déclaration
- Dimensions et positionnement :
display
,float
,position
,left
,top
,height
,width
... - Bordures :
border
,border-image
,border-radius
... - Arrière-plan :
background
,background-color
,background-image
,background-size
... - Texte :
font-family
,font-size
,text-transform
,letter-spacing
... - Autres
Les couleurs sont déclarées en hexadécimal, de préference sur 3 chiffres.