Antichesse (o ^ω^ o)
Avant toute chose, SMACSS n'est pas un framework CSS, c'est un ensemble de pratiques CSS/SCSS permettant d'écrire des feuilles de styles clean code.
Rien que sur les deux premières pages, j'y ai choppé des astuces.
@Lenny @Doudou @Chlouchloutte, c'est pour vous !
Edit :
Pour faire gagner du temps à tout le monde, je tente ici d'établir un résumé des concepts.
1. Les CSS se divisent en 5 catégories :
-
Base : ce sont les CSS des éléments HTML. Typiquement, le body, le html, la couleur par défaut des liens, des inputs. Bref, les balises HTML, sans classes ni ID.
-
Layout : votre page se découpe en général par grands blocs (d'ailleurs presque toujours les mêmes lorsque l'on respecte les canons du milieu). En général, ils portent un ID, se trouvent directement dans le
<body>et vous y trouverez les sectionsheader,footer,content,side-content,article,side-bar... -
Module : il s'agit de la même chose que les Layouts, à la différence qu'ils se trouvent soit dans un Layout, soit dans un Module eux-mêmes. Ils sont conçus pour être auto-porteurs et nous pouvons les comparer aux JPanels de Swing (ça me fait mal d'écrire ça). En général, ils ne sont pas forcément unique, ne portent pas d'ID, et leurs contenus sont skinés via une classe héritée, typiquement :
.mon-module span {...}
.mon-module a {...}
- **State :** ce sont les CSS qui vont changer l'interface en fonction des actions de l’utilisateur. Ils sont forcément liés à du JS de part leur aspect dynamique. Par exemple, vous cliquez sur un bouton et une zone passe de _is-visible_ à _is-hidden_. En général, ils commencent par `is-...` ou `has-...` et ne sont constitués que de classes.
- **Theme :** il s'agit de tout ce qui touche à l'apparence mais pas l'orientation et la forme cf. (modules) ni la structure de la page (cf. layouts). Ils comprennent donc les couleurs (texte & background), l'épaisseur des traits et bordures, la police de caractères, les images de fond, les logos, etc.
### 2. L'usage de SCSS ou SASS
Pour thématiser des CSS, il faut les variabiliser et pour ce faire nous avons deux outils :
- SASS (et sa variante que je lui préfère SCSS car plus proche de CSS pour les néophytes).
- Les variables CSS.
À cela s'ajoute un autre point, il faut générer plusieurs fichiers CSS (un principale contenant les 4 premières catégories de CSS, et un par thème afin de pouvoir changer dynamiquement de thème pendant l'exécution).
### 3. Les bonnes pratiques
J'en utilisais déjà pas mal sans y avoir forcément réfléchi, mais de façon formelle :
- Limiter la profondeur d'imbrication des balises HTML quand vous le pouvez.
- Limiter la profondeur d'imbrication des CSS (mieux vaut préférer l'imbriquation du HTML à l'imbriquation des CSS).
- Utiliser le moins d'ID possible puisqu'ils sont spécifiques à votre PWA et rendront difficile le portage de votre design vers une autre PWA.
- Changer de thème ne consiste pas à modifier toutes les balises HTML, non. Il faut supprimer du DOM le CSS contenant le fichier de l'ancien thème pour y ajouter un `<link>` vers celui du nouveau thème.
- Si vous n'utilisez pas des polices comme Fontisto ou Fontawesome, utilisez des sprites CSS avec des images, vous aurez moins de requêtes HTTP et moins de data à transférer.
- Éviter de faire du balisage HTML spécifique à votre contenu.