Les fichiers de style spécifiques à une page peuvent ne pas être fusionnés dans le fichier main.scss. Il faut alors les référencés directement dans la page HTML.
Themes folder is optional
L'existence du dossier thème est spécifique à chaque projets. Il est donc normal que le dossier thème n'existe pas dans le projet si cela n'est pas nécessaire.
Main file
Le fichier main.scss devrait contenir uniquement des @import et des commentaires.
Ne dépassez pas trois niveaux d'imbrications.
Evitez l'imbrication des sélecteurs sauf si cela s'avère nécessaire.
Imbriquez les pseudo-classes et les pseudo-éléments à l’intérieur du sélecteur initial.
Ne dépassez pas les 50 lignes de codes pour un bloc de déclaration.
Variables
Nommez vos variables en respectant le pattern Generic to Specific.
Privilégiez l'approche mobile first dans le cas ou vous développez une application responsive design.
Ajoutez des breakpoints pour styliser le rendu pour des devices spécifiques.
Nommez et imbriquez vos breakpoints afin de gagner en maintenance et en lisibilité.
// Not Recommended
.selector{
...
@media screen and (max-width: 1024px) {
...
}
}
Dans un environnement de développement, ajoutez les sources map via l'attribut --sourcemap dans la commande de compilation
pour bénéficier d'un mapping du code au travers des outils de développement.
Ne sauvegardez pas les fichiers css sur un système de source control.
En effet, les fichiers css seront produit à partir des fichiers Sass lors de la compilation avant le déploiement.