User Tools

Site Tools


notes_sur_sass-guidelines

Differences

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

Link to this comparison view

notes_sur_sass-guidelines [2016/08/10 18:46]
leo created
notes_sur_sass-guidelines [2016/08/12 15:45] (current)
leo
Line 1: Line 1:
 +===== règles =====
 +
 ^Domaine^Règle| ^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.| ^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| listes toujours entre parenthèses |
 ^ listes| utilisez append et prepend (l'API prévue quoi) pour ajouter des éléments à une liste | ^ 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èglesvariables 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 & 
-^ | |+constantesen 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>​
notes_sur_sass-guidelines.txt · Last modified: 2016/08/12 15:45 by leo