HTML5 : Optimisation des flux de production

Choisir un processus d'automatisation

Testez gratuitement nos 1300 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Dans l'univers de l'automatisation des processus CSS, il existe deux courants souvent perçus comme opposés. Voyez pourquoi le préprocessing et le post-processing sont complémentaires.
04:02

Transcription

En ce qui concerne l'optimisation de la production au niveau des CSS, on va avoir deux philosophies principales qui vont se démarquer, qui vont être les processeurs versus les post-processeurs. D'un côté, on va traiter en amont, d'un autre côté on traitera en aval. Voyons un peu les distinctions, voyons un peu ce qui va les démarquer. Du côté des pré-processeurs, donc on va avoir des trucs comme SASS, LESS, Stylus par exemple, qui vont nous permettre d'écrire du code en amont de la production CSS, donc ici, les trois principaux, généralement on entend très souvent parler de SASS, de LESS également qui sont un peu en rivalité, un peu moins de Stylus, sauf si vous êtes vraiment branché node parce qu'en fait Stylus, c'est le portage en gros on va dire de SASS ou LESS, côté node, et intégré directement à node. Alors ici, côté pré-processeurs, et d'un autre côté, on verra dans un second temps, le côté post-processeurs. Côté pré-processeurs : on sait que ça va nous permettre d'optimiser l'écriture, on va avoir une écriture beaucoup plus basée sur le code. Attention quand même parce que ça va nous faire des sélecteurs qui peuvent être très lourds, très verbeux, donc il faut vraiment maîtriser et manier cela avec dose homéopathique on va dire, on va pouvoir repartir sur des partials qui sont donc des fichiers multiples, on va pouvoir égrainer comme ça la production CSS et ne pas tout centraliser sur un seul fichier de 2000 lignes CSS, donc c'est vachement intéressant pour pouvoir revenir dessus six mois après, travailler de manière beaucoup plus souple, et puis bien entendu qu'au moment de la compilation finale, on n'aura plus qu'un seul fichier CSS. On va pouvoir utiliser des mixins et des directives, alors les mixins, c'est un peu les fonctions de la programmation classique. Les directives, ça va être plus un outil qui va nous permettre de définir d'une part, on va dire, des @each ou des @element, donc un peu l'équivalent de nos conditions, de nos boucles, de nos répétitions, mais également aussi tout un certain nombre de fonctions natives qui vont êtres intégrées, qui vont nous permettre de décortiquer les couleurs, de les additionner, de les soustraire, de faire tout un certain nombre d'opérations. Alors, pas que sur les couleurs mais sur l'intégralité des CSS, on va pouvoir utiliser des variables, des références. Bien entendu, aujourd'hui les CSS3 vont commencer à migrer de plus en plus vers l'utilisation de ce type d'outil, mais déjà, less va nous permettre de pouvoir le faire déjà bien avant que tous les navigateurs puissent traiter les CSS3 et donc les variables, etc. Ça va nous permettre également de faire de l'héritage, et puis de pouvoir avoir une approche orientée objet pour faire des CSS. Côté post-processeurs, alors ici, c'est quelque chose qui va être traitée après la réalisation du CSS et donc presque une fois que tout est terminé, et donc ici, on va avoir le plus connu, le plus classique qui est PostCSS mais on verra qu'on peut traiter les CSS également de manière post, sans pour autant avoir à faire qu'à la librairie post CSS qui a pris un peu le sens du mot global quoi. Alors ici, qu'est-ce qu'on va nous proposer ? Ça va nous permettre de pouvoir faire des hacks, des petits contournements inter-navigateurs. Si c'est quelque chose qui est ecrit dans le CSS, eh bien, dans 10 ans, on aura toujours ça, écrit dans le CSS, alors que là, le post-processeurs, on va le faire qu'uniquement que pour les navigateurs qui en ont besoin et puis quand on n'en a plus besoin, on pourra retirer le tout. On va pouvoir créer des tâches temporaires, donc exactement cela, c'est-à-dire, on va faire quelque chose pendant un certain temps et puis quand on n'a plus besoin, on désactive cette fonctionnalité et on ne le fait plus par la suite. On va pouvoir donc parser le code pour pouvoir modifier le code éventuellement si besoin y était. On va pouvoir vérifier également la bonne intégrité d'écriture de son code, chose qu'on peut faire aussi en pré-processeurs mais généralement c'est plus quelque chose qu'on fait en post-processing, une fois que le code a été généré, on vérifie qu'il soit bon, et on va pouvoir donc comme ça améliorer la qualité une fois que le code CSS aura été écrit. Alors, rien ne nous empêche d'utiliser soit des pré-processeurs, soit des post-processeurs, soit les deux, on peut très bien avoir des parties écrites en amont, des parties qui seront corrigées et modifiées par la suite, donc tirez le meilleur parti de chacune de ces technos, et c'est ce que je vous invite à voir au cours de ce chapitre.

HTML5 : Optimisation des flux de production

Optimisez vos flux de production lors de vos développements en HTML5. Explorez les méthodes et les éléments essentiels à la mise en place de processus automatisés.

5h29 (62 vidéos)
Aucun commentaire n´est disponible actuellement
 
Spécial abonnés
Date de parution :26 déc. 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !