29 December 2014

Do more Do less – Méthodologie

 

Méthodologie

 

Il n’y pas très longtemps, on m’a demandé quelles sont les principales compétences/qualités d’un intégrateur, et bien entendu une des premières choses que j’ai répondu c’est d’être bien organisé, méthodique et rigoureux. Parce qu’empiler son style dans un fichier .css sans rigueur et organisation, c’est prendre le risque de provoquer de la répétition de code inutile et se retrouver complètement perdu pour la moindre petite modification.

 

Mais grâce à sass ou less il est possible d’avoir une vraie architecture personnalisée pour votre style ! Et aujourd’hui c’est cadeau, je vous propose la méthode cuisinée perso pour un style propre et organisé. L’idéal serait de tirer le bilan de chaque fin de projet pour faire évoluer ses méthodes de travail, donc ce que je vous propose sera certainement amené à évoluer.

Nous utilisons less pour la base de notre achitecture : les variables, les imports, les mixins; il y a tellement de raison de l’utiliser (on peux aussi se tourner vers sass qui propose toute les features dont nous avons besoin). Si vous utilisez des framework pour votre développement comme Symfony2 par exemple, la compilation peut se faire automatiquement grâce à l’extension less sur node, le script lessjs ou bien encore lessphp.

Dans la méthodo que je vais vous présenter, vous reconnaitrez peut-être des similitudes avec la librairie bootstrap, et pour cause, son organisation est simple, fonctionnelle et efficace et elle m’a inspirée très largement.

 

  1. Le fichier style.less la gare centrale

    La première des choses c’est de créer un fichier style.less, rien de révolutionnaire vous allez me dire. Sauf que dans ce fichier, pas la moindre de ligne de style sera écrite ! Et oui, votre fichier style.less, ne va servir qu’à recueillir le style de tout les autres fichiers que l’on va créer via la fonction import de less. C’est la base de notre architecture : séparer en différents fichiers notre style pour qu’il soit mieux organisé, et utiliser le fichier style.less pour centraliser le tout. Attention tout de même à l’ordre dans lequel vous faites vos imports pour la priorité des règles de style ! Et vous l’aurez donc compris, c’est le seul fichier que l’on va linker à nos vues html, twig, php, où ce que vous voulez après tout.

  2. Bootstrap comme une évidence

    Oui, on va utiliser bootstrap. Cette librairie est devenu indispensable pour quasiment n’importe quel projet web. Mais on va prendre soin de prendre la version less que l’on va donc importer en premier dans notre fichier style.less au lieu de le linker directement dans nos vue twig. Vous pouvez bien sur faire de même pour n’importe quel framework de style du genre.

  3. Remixez boostrap a votre sauce

    Bootstrap c’est génial, mais il y a 99,9% de chance que le bouton que vous devez intégrer ne soit pas le même que celui proposé par la feuille de style made in twitter. On va créer un fichier bootstrap-refactor.less où l’on va modifier toutes les classes ultra pratiques de bootstrap. Une manière simple et efficace de segmenter en fichier notre code et de gagner du temps.

  4. Les variables : ultra important et ultra efficace

    Les variables, c’est une des features de less dont on va abuser durant notre intégration, on va même créer un fichier variable.less ! L’intérêt des variable c’est de pouvoir définir des couleurs ou des valeurs qui vont être récurrentes dans notre intégration. Personnelement je fais en deux temps :

    Par exemple pour les couleurs, je crée une variable qui porte le nom de la couleur que je vais utiliser, et qui a pour valeur le code hexadécimal ou rgb de mon choix :

    @blue: #3f5464;

    Dans un deuxième temps je crée une deuxième variable qui porte le nom de l’endroit concret où la couleur sera utilisée et qui aura donc pour valeur le nom de la variable se rapportant à la couleur que l’on veux utiliser :

    @container-background-color: @blue;

    Bien entendu c’est l’équivalent de

    .container {
        background-color: #3f5464;
    }

    Mais l’intérêt est rendre le code ultra adaptable aux changements. Si votre graphiste décide de changer la teinte de bleu, et bien il vous suffit de changer la valeur de votre variable @blue. Et si il décide le lendemain que le container doit finalement avoir un background orange, il devient ultra simple de changer la valeur de @container-background-color pour @orange que vous avez défini.

    Ce système d’organisation peut marcher pour à peut prêt tout, mais il est surtout efficace avec les couleurs à mon sens.

  5. Votre propre librairie de mixins

    Encore une fonctionnalité de less dont vous ne pouvez normalement plus vous passer si vous l’avez goutée. Si vous ne savez pas encore ce que sont les mixins, je vous propose d’aller voir directement la doc de less.

    Comme vous vous en doutez on va créer un fichier mixins.less qui sera enfait notre bibliothèque de mixins perso. Si vous êtes sages, vous aurez peut être le droit un jour, à ma petite sélection de mixins indispensables pour tout projet.

  6. Enfin le style de la page !

    Ouf, on va pouvoir commencer à intégrer notre markup html, Et on le fera dans un fichier front.less. Bien sur dans ce fichier prenez bien soin d’incrémenter et de diviser votre code en sous parties, pour encore plus de clarté.

    Vous vous dites que c’est fini, mais non ! (si vous êtes un fin observateur vous avez vous qu’il y a encore du texte en dessous…). Parce que si vous travaillez un projet responsive, et bien on va faire un fichier par width supporté que l’on va inclure à la fin de votre fichier front.less. Dans chacun de ces fichier : une media querie et toute les variations de style qui se rapporte, tout simplement ;) .

 

Et voilà maintenant c’est vraiment fini, n’hésitez pas à me faire vos retour sur cette architecture, si elle vous convient ou non. Et bien entendu je vous tiens au courant si ma méthode change radicalement.

comments powered by Disqus