Des articles sur CSS qui m'ont époustouflé en 4

Présenter les 3 piliers de l'architecture CSS à Front in Sampa 2024 m'a donné l'occasion de lire beaucoup de choses sur CSS d'un point de vue théorique, ce qui, je pense, m'a donné une vision plus mature, holistique et stratégique de Développement CSS à grande échelle.

Au cours de cette tournée, j'ai découvert des points de vue sur CSS qui, en plus de raviver ma curiosité, m'ont donné envie de prendre de nouvelles décisions avec ces nouvelles visions du monde.

 

Complexité cyclomatique : logique en CSS par Harry Roberts

La complexité cyclomatique est une mesure de la complexité d'un programme - chaque contrôle de flux et chaque sortie augmente la complexité d'une méthode, d'une classe ou d'une application.

En CSS, la complexité peut signifier des sélecteurs lents, mal réutilisables et trop spécifiques.

div.sidebar .login-box a.btn span {}

/*
Pode ser lido como

IF (inside .btn)
AND IF (on a)
AND IF (inside .login-box)
AND IF (inside .sidebar)
AND IF (on div)

*/

 

"Considérez vos sélecteurs comme des mini programmes"

 

Lien vers l'article sur le blog CSSWizardry, en anglais

 

---

 

CSS conditionnel par Ahmad Shadeed

Toujours sur l'intérêt de voir CSS comme un langage avec des opérations logiques, ne parlant pas seulement de requêtes multimédias qui font des évaluations logiques pour rendre le code disponible en fonction des conditions de contexte, mais de chaque état interactif, de la présence ou non d'un sélecteur suivant, à partir d'un index sélecteur, ou de la présence d'un enfant spécifique (avec :has).

C'est un article extrêmement actuel avec les nouvelles propriétés et le changement de paradigme provoqué par :has, les requêtes de conteneur et les requêtes de support déjà existantes mais peu explorées.

 

Lien vers l'article sur le blog d'Ahmad Shadeed, en anglais

 

---

 

La cascade CSS par Amelia Wattenberger

Cascade Feuilles de style, et pourtant il est très courant de voir des erreurs CSS qui concernent la manière et l'ordre dans lesquels le CSS est écrit. Dans ce magnifique article de blog d'Amelia Wattenberger, d'une manière simple et visuelle, elle démontre le fonctionnement de la cascade et donne un aperçu de la façon de penser votre CSS en gardant cela à l'esprit.

 

Lien vers l'article sur le blog d'Amelia Wattenberger, en anglais

 

---

 

Une brève histoire du CSS-in-JS : comment nous en sommes arrivés là et où nous allons par Dan Ward

Plus j'avais besoin d'utiliser CSS-in-JS, plus ses points négatifs me dérangeaient, tels que la taille du bundle, les changements d'exécution et une architecture déroutante de réutilisation par rapport à la colocalisation. Avec les variables CSS, il devient encore plus obsolète de préférer la fonction flèche à l'injection de variables via des styles - c'est beaucoup plus simple et CSS gère bien ce type de portée.

C'est dans cet article que l'on comprend pourquoi et comment il existe, avec des liens incroyables évoqués tout au long.

 

Lien vers l'article sur medium, en anglais

 

---

 

CSS et le chemin critique par Stoyan Stefanov

Le CSS est le plus grand délinquant en matière de chargement Web lent, de CSS inutilisés et excessifs, de sélecteurs et d'opérations qui, en interaction, affectent plus de nœuds qu'ils ne le devraient, même de sélecteurs complexes et lents qui nécessiteraient moins de surcharge et plus d'architecture.

Dans cet article, vous comprendrez comment le navigateur fonctionne pour charger, compiler et hiérarchiser cet actif critique et comment rendre le chemin vers celui-ci moins pénible pour l'utilisateur final.

 

Lien vers l'article sur le blog de Stoyan Stefanov, en anglais

Après avoir lu, regardez cette vidéo de Harry Roberts sur les performances CSS sur Frontend United

 

---

 

Conception Web réactive

Ethan Marcotte a inventé le terme « réactivité » à partir d'assemblages architecturaux qui répondaient d'une certaine manière à l'occupation de leur espace, cet aperçu inspiré du texte de John Alsopp en l'an 200 qui appelait à un Web plus libre qui dictait moins de règles à les utilisateurs dans un monde avec un nombre croissant d'appareils a changé la façon dont nous écrivons les interfaces et changera également la façon dont vous les voyez.

 

Lien vers l'article du blog A List Apart, en anglais

Après lecture, regardez cette vidéo de Jen Simmons avec un regard moderne sur la réactivité - mises en page intrinsèques

 

---

 

Pour fermer

L'avenir du chargement CSS par Jake Archibald

J'ai rencontré Jake en train de regarder HTTP 203 sur la chaîne Google et je suis depuis son blog. Dans cet article, il explore la possibilité d'inclure des liens dans les replis de pour charger progressivement les styles de ce qui se trouve en dessous du "fold".

Vous ne saviez pas que c'était possible ? Ouais, TIL aussi !

 

Lien vers l'article sur le blog de Jake, en anglais

 

Après avoir lu, regardez l'émission HTTP 203 sur la chaîne Chrome for Developers, j'apprends beaucoup de Jake et de ses invités

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!