Une astuce pour coder plus vite en css

Aujourd’hui, je partage avec mes lecteurs qui codent du CSS une astuce qui permet d’aller un peu plus lorsque je fais de l’intégration web.
Que dis je, beaucoup plus vite : combinée à plusieurs autres outils – que je présenterais plus tard – cette astuce me permet de coder 2 fois plus vite.
Il s’agit en quelque sorte d’éviter de réécrire plusieurs fois les mêmes bouts de codes en CSS , en ayant recours à des classes standards.
Pour ce faire, lorsque vous recevez votre maquette web – au format .psd

• Copiez la sur le site assets d’Adobe – https://assets.adobe.com ;
• Une fois le document uploadé, cliquez sur l’onglet « extract »;
• Copiez ensuite les différents codes de couleurs dans l’encadré en bas à droite;
• Créez une classe css pour chaque code de couleur
   par exemple .vertcitron{background:#9CBF20} et .textevertcitron{color:#9CBF20}
• Ecrivez ensuite vos fichiers html (astuce : cette étape va deux fois plus vite lorsqu’on utilise Emmet);
• Pour chacun des blocs ou éléments du DOM devant être mis en forme avec une couleur extraite dans les étapes précédentes,ajouter la classe correspondante ;
  par exemple, le bloc avec une couleur de fond vertcitron sera <div class= »vertcitron »></div> 
• Répétez jusqu’à la fin de l’intégration.

Jean Luc Houedanou