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

  1. Dimensions et positionnement : display, float, position, left, top, height, width...
  2. Bordures : border, border-image, border-radius...
  3. Arrière-plan : background, background-color, background-image, background-size...
  4. Texte : font-family, font-size, text-transform, letter-spacing...
  5. Autres

Les couleurs sont déclarées en hexadécimal, de préference sur 3 chiffres.