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.