Sur CSS atomique généré automatiquement

L'exploration par Robin Weser du dilemme du raccourci dans le CSS atomique met en évidence les défis de la conversion automatique du HTML et du CSS en styles optimisés. Le problème central réside dans la gestion des cas Edge résultant de l'interaction des propriétés CSS raccourcies et à la main, conduisant à des erreurs potentielles lors de l'utilisation de cadres comme FELA qui génèrent des classes atomiques.

Le concept de CSS atomique - une classe, un travail - est intrigant. Considérez cet exemple:

 <code>.mb-8 { margin-bottom: 2rem; }</code>

Imaginez des milliers de ces classes, couvrant pratiquement toutes les possibilités CSS.

Pourquoi utiliser le CSS atomique? Il existe plusieurs raisons convaincantes:

• CSS réduit: L'élimination des paires de propriétés / de valeur répétées et des noms de classe spécifiques à l'auteur rétrécit considérablement la taille finale du fichier CSS. Ceci est crucial car CSS est une ressource de blocage.
• Noming simplifié: plus de temps de classe de classe qui prend du temps.
• Cohérence de conception: la limitation des classes disponibles applique un degré d'uniformité de conception.
• Agmentation de la vitesse du développeur: certains développeurs trouvent cette approche plus rapidement et plus efficace.

La génération de CSS atomiques peut être effectuée manuellement (comme GitHub et Facebook l'ont fait avec Primer et FB5 respectivement, bien que cela ne soit pas nécessairement recommandé), ou en utilisant des frameworks prédéfinis. Tachyons est un premier exemple d'une grande collection d'opinion de classes atomiques.

Cependant, Tailwind CSS est le joueur dominant. Ses forces se trouvent:

• Configurabilité: personnalisez les classes en fonction des besoins de votre projet.
• Purge Classes inutilisées: Cette étape cruciale supprime les classes inutilisées, réalisant les avantages complets de la performance du CSS atomique.
• Bibliothèque d'interface utilisateur intégrée: accélère le développement avec des composants facilement disponibles.

Mais qu'en est-il de la génération automatique de CSS atomique?

L'approche de Yahoo, en utilisant les fonctions comme noms de classe traités pendant l'étape de construction, préfigurait les méthodes actuelles. Ceci est similaire à la combinaison Purgecss de vent arrière.

Aujourd'hui, vous n'avez pas besoin d'écrire des CSS atomiques manuellement. Comme le souligne Weser, des bibliothèques comme Fela, Styletron, React Native Web, Otion et Stylesheet vous permettent d'écrire des styles de manière familière tout en générant des CS atomiques pendant le processus de construction. Cette approche maximise la réutilisabilité et minimise la taille finale du faisceau CSS. Chaque paire de valeurs immobilières n'est rendue qu'une seule fois, améliorant l'efficacité.

Cette méthode, souvent enracinée dans CSS-in-JS, traite à la fois le balisage et le CSS pour des résultats optimaux. C'est une alternative convaincante à l'écriture manuelle de CSS atomique, que de nombreux développeurs, y compris l'auteur, trouvent moins attrayant. L'avantage clé est l'optimisation automatisée pour améliorer les performances Web.

La question demeure: que pensez-vous de cette approche?

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!