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.
Un outil en ligne très sympa permettant de déminifier des fichiers JS / CSS / HTML minifiés.
Très pratique !
À télécharger : le support PDF de formation pour mes cours d'initiation au HTML et CSS pour débutants : les bases du language pour construire un sites web...
Un cours simple, vraiment pour débutant mais très pratique.
Montrer un historique des diffs via des animations CSS est une excellente idée !!!
Bravo
Pour @doudou, le tuto se comprend en quelques minutes et traduit parfaitement la facilité avec laquelle il est possible de traquer ses utilisateurs.
Belle explication en tout cas !
Pour Chlouchloutte, Animal et Lenny qui doivent faire du positionnement HTML.
Le modèle FlexBox est un positionnement à une dimension, les CSS Grid font de même mais en deux dimensions.
L'intérêt de se servir de frameworks comme Bulma ou Bootstrap se réduit de semaines en semaines. D'autant que les CSS Grid sont gérées à 88% selon Can I use. Pour info les FlexBox le sont à 95% à cette heure.
On peut utiliser des cm et des mm en CSS. WTF ??? (⊙_⊙) Il y a même des retard's units comme les pouces !!
En tout cas merci à Timo pour le lien.
Le design d'email est un exercice difficile. Il y a des contraintes fortes à respecter au niveau mise en page et code. Le guide complet pour connaitre les meilleures pratiques.
Comment templatiser correctement nos e-mail.
Some of the components I've explored here have specific standardized requirements in order to work as expected. Tab interfaces, for example, have a prescribed structure and a set of interaction behaviors as mandated by the WAI-ARIA specification. It's at your discretion how closely you follow these requirements. Research may show
Choisissez la lib qui vous plaît le plus
Comment mettre en cache des fichiers statiques avec Nginx
Pour Chouchloutte qui galère encore avec les FlexBox alors qu'on est en 2018... Trollolo
Écrire des CSS en Kotlin. Pas mal pour avoir un mono langage et des TU sur les CSS #Paranoïa
Pour Chlouchoutte & Animal qui galèrent depuis 5 ans avec les Flexbox. Une infographie pour comprendre comment ça marche (je préfère quand même le tuto d'Aslacréations ici qui me semblait plus pragmatique et moins fouillis).
Plein d'effets en CSS, via un shaarliste.
Les sources JavaScript exécutées par le navigateur sont souvent différentes des sources originales crées par un développeur. Les source map servent au debugger
Assez dingue. J'avoue !
via Sebsauvage.
Il est possible d'appliquer une CSS si une classe est présente sur un DIV ET une autre classes. Pour cela, il faut simplement ne pas mettre d'espace dans le fichier CSS, par exemple :
<p class="red">taco</p>
<p class="yellow">burrito</p>
<p class="red yellow">chimichanga</p>.red { color: red; }
.yellow { color: yellow; }
/* Pas d'espace dans la déclaration */
.red.yellow { color: orange; }Pour Lenny et Chlouchloutte. Le SCSS est plus facile d'appréhension que le less. En une soirée j'ai fait des trucs vraiment pas mal. Je posterai des articles à ce sujet.
Des images de chargements en CSS.
Via une river