| Domaine | Règle |
|---|---|
| Encodage | Recommandation : forcer l’encodage UTF-8 dans fichier principal via directive @charset comme premier élément de la feuille de style. |
| Chaînes de caractère | Toujours entre guillemets simples ex: 'left' |
| Identificateurs | Pas de guillemets simples pour les identificateurs ex: sans-serif |
| Nombres | non : .1 / oui 0.1 |
| unités | longueurs égales à 0 sans unités ex non : 0em / oui 0. Pas pour durées comme 0ms |
| unités | pour ajouter une unité à un nombre on multiplie par 1unit ex non : $value + px, oui : $value * 1px |
| unités | Pour supprimer l’unité d’une valeur, il suffit de la diviser par une fois son unité. ex : $length: 42px; $value: $length / 1px; → 42 |
| calculs | Les calculs numériques de premier niveau devraient toujours être entre parenthèses. non : width: 100% / 3, oui : (100% / 3) |
| couleur | ne pas utiliser les mots-clés comme red |
| couleur | préférez le HSL, sinon le RGB, mais évitez le HEX |
| couleur | associer une couleur à une variable |
| couleur | pour un thème utiliser des variables spécifiques au thème (proxys) |
| couleur | il peut être judicieux de préférer mix') + noir ou blanc que lighten() et darken() (ou implémenter/utiliser tint et shade) voire aussi scale-color |
| listes | listes toujours entre parenthèses |
| listes | utilisez append et prepend (l'API prévue quoi) pour ajouter des éléments à une liste |
| maps | chaque entrée sur sa propre ligne |
| ensemble de règles | variables locales au début de l'ensemble |
| @include | @includes sans @content avant les déclarations, avec après. |
| imbrication | éviter, sauf pour les pseudo-classes avec le sélecteur courant & |
| constantes | en majuscules + snake case COMME_CECITTE |
| namespace | pour SASS < 4.0 utiliser un préfixe court pour code distribué |
| documentation | utiliser SassDoc |
| composants | responsabilité unique, réutilisables, indépendants |
| éviter de référencer un composant dans un autre | |
| architecture | le fichier principal main.scss devrait être le seul à ne pas commencer par un _, et ne devrait commencer que par des @import et des commentaires. |
| l'import des fichiers scss doit suivre l'ordre de l'architecture 7-1 (si utilisée) | |
| pour fichier principal : un fichier par @import / un @import par ligne / pas de saut de ligne entre 2 imports provenant du même dossier / un saut de ligne après le dernier import d’un dossier / les extensions fichiers et les underscores initiaux doivent être omis | |
| Fichier de la honte | ranger toutes les déclarations CSS, les hacks et tout ce dont on n’est pas vraiment fier dans un fichier de la honte, importé après tous les autres fichiers, à la toute fin de la feuille de style. |
| points de rupture | les nommer mais pas en fonction de terminaux mais d'amplitude (medium/large/huge plutôt que tablet/computer/tv) |
| media-queries-dans-les-sélecteurs | |
| variables | utiliser le flag !default pour les variables de conf destinées à être écrasées - elles ne redéfiniront pas une variable existante à l'import |
| @extend | n'est pas forcément préconisée |
| n'étendre que des placeholder (%), pas de vrais sélecteurs | |
| étendre un placeholder aussi peu de fois que possible | |
| n'étendre que les sélecteurs faisant partie du même cadre média | |
| @mixin | si une mixin dépasse 20 lignes, elle doit probablement être divisée ou réécrite |
| utiliser pour regrouper des déclarations qui apparaissent souvent en semble pour une bonne raison et pas par hasard | |
| ne pas inclure les parenthèses pour une mixin sans arguments | |
| utiliser une arglist plutôt qune liste d'argument si l'on en connaît pas la longueur | |
| préfixes | utiliser Autoprefixer |
| linting | utiliser SCSS-lint |
Notes :
approches des media-queries en SASS :
| dossier | usage |
|---|---|
| abstractions | outils et helpers sass, ne devrait jamais retourner la moindre ligne de CSS |
| vendor | Tout le CSS externe, de bibliothèques ou framework externes |
| vendor-extensions | votre css qui overriderait du css vendor (plutôt que de modifier directement le css vendor ce qui est déconseillé |
| base | le code standard (boilerplate) du projet + reset + styles standards pour élément html les plus employés |
| layout | ce qui concerne la mise en page, et les feuilles de styles pour éléments principaux (footer, header, navigation, sidebar, etc.) |
| composants | plus petits composants |
| pages | styles spécifiques à certaines pages |
| thèmes | si plusieurs thèmes dans un même site |
sass/ | |– abstracts/ | |– _variables.scss # Sass Variables | |– _functions.scss # Sass Functions | |– _mixins.scss # Sass Mixins | |– _placeholders.scss # Sass Placeholders | |– base/ | |– _reset.scss # Reset/normalize | |– _typography.scss # Typography rules | … # Etc. | |– components/ | |– _buttons.scss # Buttons | |– _carousel.scss # Carousel | |– _cover.scss # Cover | |– _dropdown.scss # Dropdown | … # Etc. | |– layout/ | |– _navigation.scss # Navigation | |– _grid.scss # Grid system | |– _header.scss # Header | |– _footer.scss # Footer | |– _sidebar.scss # Sidebar | |– _forms.scss # Forms | … # Etc. | |– pages/ | |– _home.scss # Home specific styles | |– _contact.scss # Contact specific styles | … # Etc. | |– themes/ | |– _theme.scss # Default theme | |– _admin.scss # Admin theme | … # Etc. | |– vendors/ | |– _bootstrap.scss # Bootstrap | |– _jquery-ui.scss # jQuery UI | … # Etc. | `– main.scss # Main Sass file