CSS a un problème de portée globale. Un style défini dans un fichier affecte chaque élément de la page entière. La Session 031 a construit l'approche de FLIN : du CSS scopé qui est automatiquement isolé au composant qui le définit, avec des styles calculés qui réagissent aux changements d'état. Pas de build step. Pas de conventions de nommage. Pas de surcoût à l'exécution.
Le compilateur de composants de FLIN scope automatiquement les règles CSS au composant qui les définit. Chaque composant reçoit un identifiant unique, et chaque sélecteur CSS est augmenté avec cet identifiant. Les styles définis dans Button.flin ne peuvent affecter que les éléments dans Button.flin. Ils ne peuvent pas fuiter vers d'autres composants.
Trois garanties
- Les styles ne fuient pas vers l'extérieur. L'attribut de scope assure que les sélecteurs ne matchent que les éléments du même composant.
- Les styles ne fuient pas vers l'intérieur. Les styles globaux ne remplacent pas les styles de composant.
- Des noms de classes identiques ne conflictent pas. Deux composants peuvent définir
.containeravec des styles différents.
Écrivez du CSS standard. Obtenez un scoping automatique. Utilisez l'interpolation pour les valeurs dynamiques. C'est tout le modèle mental.
Ceci est la partie 89 de la série "How We Built FLIN".
Navigation de la série : - [88] FlinUI Enterprise Components - [89] Scoped CSS and Computed Styles (vous êtes ici) - [90] The Component Lifecycle - [91] Slots and Content Projection