===== règles ===== ^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 : - https://www.sitepoint.com/managing-responsive-breakpoints-sass/ - https://css-tricks.com/approaches-media-queries-sass/ ===== architecture 7-1 ====== ^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 | ==== visualisation ==== 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