User Tools

Site Tools


notes_sur_sass-guidelines

règles

DomaineRègle
EncodageRecommandation : forcer l’encodage UTF-8 dans fichier principal via directive @charset comme premier élément de la feuille de style.
Chaînes de caractèreToujours entre guillemets simples ex: 'left'
IdentificateursPas 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
calculsLes 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 :

architecture 7-1

dossierusage
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
notes_sur_sass-guidelines.txt · Last modified: 2016/08/12 15:45 by leo