L'orientation future du CSS

Quand le CSS simple sera-t-il suffisant pour remplacer Sass, Less, Stylus et rest ?

L’une des réalités les plus difficiles auxquelles les développeurs Web doivent faire face est que la plupart des gens utilisent encore des navigateurs anciens et peu performants lorsqu’ils parcourent des sites Web. Les navigateurs ajoutent constamment de nouvelles fonctionnalités, mais vous ne pouvez généralement pas en profiter à moins que vous ne soyez prêt à perdre de nombreux utilisateurs qui n'ont pas mis à jour leur navigateur.

Ce problème n'existe pas lorsque vous utilisez Electron pour développer des applications. Parce que le code de l'application Electron que vous avez écrite s'exécute sur un navigateur Chromium distinct. Chromium est le moteur principal de Google Chrome et est alimenté par Google. En même temps, il est également open source, ce qui signifie qu'un grand nombre de développeurs de la communauté l'optimisent chaque jour.

Propriétés personnalisées CSS

La semaine dernière, Electron a publié une nouvelle version prenant en charge les propriétés personnalisées CSS. Si vous avez utilisé des langages de prétraitement comme Sass et Less, vous êtes probablement déjà familier avec les variables, qui vous permettent de définir des valeurs réutilisables pour des éléments tels que les jeux de couleurs ou les mises en page. Les variables gardent votre feuille de style SÈCHE (Ne vous répétez pas) et améliorent la maintenabilité.

Étant donné que les propriétés CSS personnalisées ne sont que des propriétés CSS classiques, elles peuvent être manipulées via JavaScript. Cette fonctionnalité subtile mais puissante permet aux développeurs de modifier dynamiquement l'interface visuelle tout en profitant de l'accélération matérielle CSS, et peut réduire la duplication entre le code frontal et les feuilles de style.

​Ce qui suit est un exemple d'utilisation d'attributs personnalisés :

:root {  
    --primary-color: papayawhip;  
    --base-line-height: 1.4;
} 
.thing {  
    color: var(--primary-color);  
    margin: 0 0 calc(var(--base-line-height) * 1rem);
}

Voir la démo dans Google Chrome (nécessite une version Chrome supérieure à 49)

Mixin CSS et héritage

Maintenant, nous avons des variables dans notre CSS. C'est bien, mais ce n'est pas suffisant pour écrire un CSS parfait. Ce dont nous avons vraiment besoin, c'est d'un moyen d'écrire du CSS réutilisable. Ces fonctionnalités existent déjà dans Sass, Less et Stylus, mais ne sont pas disponibles dans CSS standard.

Entrez la règle @apply

Quelqu'un chez Google développe un nouvel ensemble de spécifications :

Cette spécification définit la règle @apply, qui permet aux développeurs de stocker un ensemble de propriétés dans une variable nommée qui peut ensuite être référencée dans d'autres règles de style.

​ Voici un exemple d'utilisation de la règle @apply :

body {  
    --alert: {    
        color: white;    
        padding: 15px;    
        margin: 1rem 0;    
        border-radius: 6px;  
    }
} 
.alert-success {  
    @apply --alert;  
    background-color: olivedrab;
}
.alert-warning {  
    @apply --alert;  
    background-color: firebrick;
}

Au moment de la rédaction de cet article (8 avril 2016), cette fonctionnalité est encore très nouvelle et n'est pas supportée par Google Chrome ni même Chrome Canary, mais elle est possible dans la dernière version de Chromium tous les soirs en activant le drapeau.

Si vous souhaitez essayer la règle @apply vous-même, vous pouvez d'abord télécharger la dernière version de Chromium, puis implémenter @apply en activant la balise. Voici comment procéder sur OS X :

/Applications/Chromium.app/Contents/MacOS/Chromium \  --enable-blink-features=CSSApplyAtRules

Pour voir tous les styles sympas combinés par les règles ci-dessus, vous pouvez vous référer à ma démonstration de codepen :

@appliquer la démo Codepen sur le navigateur Chromium

Commencez à écrire le futur CSS maintenant

Une fois que @apply sera pris en charge par Chromium et Electron, nous pourrons écrire des styles propres et maintenables en utilisant du CSS natif. Mais en attendant ce jour, nous devons encore continuer à apprendre les préprocesseurs pour combler ces lacunes.

Il existe au moins deux projets qui permettent d'écrire le futur du CSS : Myth et cssnext. Des deux projets, cssnext est le plus actif et dispose même d'un numéro git dédié pour promouvoir l'implémentation de @apply (Note du traducteur : la dernière version de postcss-cssnext prend déjà en charge les règles @apply).

Ce qui précède est l’avenir du CSS.

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!