Antichesse (o ^ω^ o)
Je dois refaire du front depuis la semaine dernière et c'est bien moins facile que dans mon souvenir.
Ici, un post sur SOF qui explique comment séparer ses CSS de sorte à limiter les impacts lors des refactos, et faciliter la maintenance et évolutions (e.g. créer des composants multi-thèmes).
Tout est dans le titre.
L'article propose une explication des éléments constitutifs de la lib Normalize.css afin de comprendre les choix qui y ont été faits, leurs conséquences et la motivation à leur origine.
Dans la pratique, plutôt que d'annuler les CSS intégrés aux différents navigateurs, Normalize.css tente de les faire converger vers un même rendu.
J'approuve la démarche !
Dernièrement je regardais les nouveautés en termes de frameworks CSS et globalement il y la liste suivante :
- Bootstrap
- Bulma
- Tailwind
- Foundation
- Skeleton
- Pure
- Tachyons
J'avais beaucoup d'espoir dans Tailwind qui adopte une approche par contraintes, dans le sens où il permet, sur chaque composant, d'appliquer des classes du type "à droite, vertical, graissé, etc" et c'est la combinaison de ces classes qui définira le rendu définitif du composant #SexySur20
A l'opposé, il y a Bulma où des composants déjà prêts existent et où les classes sont du type "burger-menu".
Sauf que je viens de m'apercevoir que Tailwind repose sur la mouvance JS bullshit dont la Comitstrip suivante matérialise parfaitement l'hérésie des fashions victims qui servissent dans l'industrie depuis un moment déjà :
Bref, il ne reste plus que Pure et Bulma comme frameworks CSS qui soient de vrais frameworks CSS paramétrables et simples. Certains me demanderont pourquoi j'insiste le fait d'avoir des CSS purs et durs et l'argument est simple : les SPA/PWA, j'en suis revenue !
Argumentons quand même. Selon moi, à moins que votre site implique au moins deux critères parmi les suivants (si ce n'est pas trois) :
- Du streaming de TRÈS gros fichiers (genre youtube)
- Des temps de surf qui se comptent en heureS (m'voyez le 'S') voire en jours
- Des actions ultra complexes (genre éditeur de photo en ligne)
- Le besoin de déporter des calculs côté clients si lourds qu'aucune infra sur terre ne tiendrait la charge si tout était centralisé côté serveur (ou alors à un coût équivalent à celui de ChatGPT)
- Le besoin de travailler en mode hors connexion
=> alors les SPA/PWA sont une mauvaise idée.
Du coup, la seule manière de pouvoir coder un design system qui fonctionne à la fois dans des MPA (ie. terme à la mode pour dire "pages générées côté serveur" comme Papy faisait avant en PHP) mais aussi dans des SPA/PWA, c'est d'avoir un framework CSS indépendant de tout JS et qui soit téléchargé en tant que fichier CSS et non JS.
Bref, je vais zoomer sur Pure histoire de voir ce qu'il est devenu - et peut-être Cardinal aussi - mais dans le fond, je pense garder Bulma d'autant que son développement aurait récemment repris :P
Article très intéressant sur comment nommer correctement ses classes CSS. En substance le comportement visuel ne doit jamais fuiter dans le nom de la classe, autrement cela voudrait dire que le HTML connaît une partie de la présentation ce qui viole le principe de séparation des préoccupations.
Par exemple pour un message principale sur page d'accueil il ne faut pas écrire :
.big-text-center {
/* ... */
}Mais écrire :
.greeting {
/* ... */
}Quelle est la meilleure technique pour utiliser des SVG en tant qu'icônes ?
Explication des trois façons d'encapsuler des CSS en Angular.
Pour répondre à ce besoin il est aussi possible de ne pas se servir d'Angular (>_<) !
Une merveille pour réduire la taille des pages à trois fois rien.
Comment spécifier l'encodage de caractères dans vos fichiers CSS ? Facile... En les faisant commencer par la ligne :
@charset "utf-8";Simple, pas cher et efficace !
Pour Acos qui fait des FlexBox en ce moment.
Via HowTommy.
Et comme par magie, les caméras de surveillance de la cellule Jeffrey Epstein étaient éteintes au moment où il est mort, alors qu'il s'apprêtait quelques jours plus tard à témoigner du trafic pédophile dans lequel baignent les dirigeants de ce monde. #Epstein
Une explication claire sur la convention de nommage BEM en CSS.
Un autre lien.
Les layouts en CSS pour @Animal
Les liens de Kalvn sont décidément bien trouvés ! Ici des tutos animés sur les Flexbox des CSS.
@Chlouchloutte @Animal il est temps de vous y mettre !
Source du lien.
Des jolis effets de CSS faciles à intégrer !
Super tuto à base d'exemple et de cas concrets au sujet des FlexBox et des principaux problèmes / layouts "résolus".
Pour @Animal & @Chlouchloutte
Oh merci, une cheat sheet sur les CSS Grid !
Via shaarliGor.
Milligram pèse 2Ko gzippé. C'est bien moins que Bulma et il semble faire le taf. Pourquoi pas.
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