Differences

This shows you the differences between two versions of the page.

--- notes_sur_sass-guidelines [2016/08/10 18:46] – created leo
+++ notes_sur_sass-guidelines [2016/08/12 15:45] (current) – leo
@@ Line 1: / Line 1: @@
+===== 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.|
@@ Line 15: / Line 17: @@
 ^ 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 ====
+<code>
+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
+</code>