Tiens, un sujet sur lequel j'ai envie de participer. o/
Je vais commencer par répondre à @Henrykiki (parce que j'utilise Sublime Text et qu'une bonne partie de ses méthodes sont aussi les miennes) : il est possible de trouver différentes façons d'installer un auto-refresh sur Sublime Text, à condition de travailler sur un projet local. Si tu es familier avec les Packages (LiveReload, il me semble), il te suffit d'ouvrir ton projet avec tous les fichiers nécessaires et d'utiliser la même extension sur ton navigateur.
Il existe également d'autres façon, notamment en utilisant Prepros (un serveur local) qui est juste magnifiquement parfait pour les petits projets hors lignes. Par contre, si comme moi tu utilises le localhost pour héberger tes fichiers css/js, le LiveReload ne fonctionnera pas à distance (il faut absolument être en circuit fermé), mais bon. Je ne suis toujours pas mort à utiliser le F5 à répétition et je me suis rapidement fait à l'idée qu'il n'y avait pas d'autres solutions. :B
Sinon, pour ma part.Comme beaucoup de personnes, j'ai commencé en intégrant tout directement sur ForumActif à grand coup de "valider -> changer d'onglet -> actualiser la page" pour le css ou de "envoyer -> valider le template -> changer d'onglet -> actualiser la page" pour les templates. Quand j'y repenses maintenant, je vois à quel point la perte de temps était énorme, d'autant qu'en plus, à cette époque, je n'avais pas encore l'assurance suffisante pour rédiger mon code d'un trait et de vérifier ensuite. Pour chaque petite modification, aussi insignifiante qu'inutile, je répétais ces petits réflexes de vérification pour m'assurer que tout était "correct".
Avec le temps, la logique s'est mise en place et j'ai fini par ne plus me vérifier aussi souvent. C'est aussi à ce moment là que j'ai compris à quel point la rapidité et l'efficacité étaient deux choses importantes, et j'ai cherché un moyen d'améliorer mes méthodes : j'ai découvert Sublime Text, puis le ZenCoding, puis DropBox, WampServeur et SASS. Dernièrement j'ai commencé à utiliser Bourbon en complément.
Tout d'abord, Sublime Text. Un éditeur de texte tout ce qu'il y a de plus sessy. Des capacités monstres pour presque rien en ressources, des thèmes trop beaux (oui, c'est important) et, surtout, une foule d'extensions très utiles qui permettent d'améliorer son environnement de travail. Avec lui, j'avais le beurre et l'argent du beurre
(et le...), du coup je l'ai conservé (et j'y travaille encore, en témoigne mon petit screen).
Par la suite, c'est un peu au hasard que j'ai découvert le ZenCoding (plus précisément Emmet, comme en parle @Henrykiki). En plus de permettre de créer une sémantique HTML en quelques secondes, il permet également la même chose en CSS (écrire "m15-10+p5" et tabuler donne respectivement margin: 15px 10px; et padding: 5px;/ écrire "tt" et tabuler donne un text-transform, etc.). THE POWER IS REAL.
Dropbox est arrivé un peu par nécessité. Je connaissais déjà son principe sans en voir l'utilité dans ma situation (un serveur en ligne permettant d'accéder à ses fichier de n'importe où, autorisant le partage et la contribution de plusieurs personnes, etc.). Lorsque j'ai commencé à travailler à temps plein, j'ai rapidement abandonné la clef USB au profit de ce petit utilitaire, me permettant d'accéder à mes codes pendant mes pauses et/ou à transférer des fichiers aux collègues très facilement. En plus (et ça, c'est le plus important), j'assure un backup de tous mes projets : si mon PC m'explose à la gueule, je sais que j'ai pas tout perdu.
Avec tout ça, WampServeur (maintenant Prepros) est arrivé au moment où j'ai commencé à m'intéresser au PHP et autres langages plus poussés. J'ai réussi à lier mon dossier Dropbox pour y faire interagir directement mon serveur local, de façon à pouvoir utiliser mes fichiers hors ligne directement sur un navigateur... et ÇA. Magie. \o/
Actuellement, donc, je code absolument tout sur Sublime Text (mes templates FA, mon css, mon javascript, TOUT). Je n'ai même pas besoin de me soucier de copier/coller mon CSS ou mon JS directement sur mon forum, parce que j'utilise justement mes fichiers en serveur interne. Tout ce qu'il me faut, c'est ajouter ma feuille de style au template principal (overall-header), mettre le lien adapté ("//localhost/dossierquelconque/css/cssprincipal.css") et chaque fois que j'enregistre mon code, je n'ai qu'à actualiser ma page (ce que je fais très peu, finalement) pour y voir les modifications.
Pour le HTML, je garde toujours un page ouverte sur mon éditeur pour y faire opérer la magie d'Emmet (ul>li*3 et j'ai une liste que je copie/colle dans mon template).
Généralement, je commence par le HTML, j'ajoute sur mon template, je place les variables FA correctement et j'enregistre. Ensuite, il ne me reste plus qu'à ouvrir la page du forum et je n'ai plus besoin de toucher au panneau d'administration pour un moment.
Pour le CSS, si vous avez regardé le screen de mon éditeur et que vous avez pas trop compris : j'utilise SASS. C'est un métalangage CSS qui offre un vrai gain de temps en permettant, par exemple, d'utiliser des minis fonctions CSS et des variables. Au lien d'écrire un code de couleur, par exemple, je n'ai qu'à le définir en variable ("$blue-color: #218b9b;") et utiliser cette variable n'importe où pour appeler ma couleur. Je peux également éclaircir cette couleur ("background-color: lighten($blue-color, 8%);") avec une fonction. C'est vraiment génial et avec le temps on devient vite accro (pour vous dire, maintenant je souffre quand je dois lire des "vieux" codes CSS, tellement les répétitions sont impressionnantes).
Bourbon est un complément SASS qui me permet surtout d'appliquer tous les préfixes -webki/-moz nécessaires qui s'utilise très facilement ("@include transition(color .3s);"). Avec ça, je sais que tout fonctionnera bien sur chaque navigateur. La librairie offre beaucoup plus de choses, mais je viens tout juste de commencer à l'utiliser et je n'ai même pas pris le temps de lire sa documentation, donc... :3
M'enfin. Sinon, j'utilise énormément l'outil développeur de Chrome (je travaille sur Chrome, donc), qui me permet d'accéder à la console (Ctrl+Shif+J) ou au HTML/CSS (Ctrl+Shif+C) en un instant. J'utilise parfois une petite extention (Live CSS Editor) qui me permet d'ajouter du CSS sur une page ouverte et de voir directement les modifications. Le plus souvent, je m'en sers lorsque je change une couleur en sachant quel sélecteur je vise (body, une classe particulière, etc.).
Autrement, je suis beaucoup de blogs/sites qui partagent de nombreuses ressources ou astuces et je passe beaucoup de temps à mettre en favoris des outils, des frameworks, des exemples, des tutos au cas où j'aurai un jour besoin de m'y référé.
Pour ce qui est de l'utilisation de mes codes, disons que je formate depuis récemment mes projets de la même façon en conservant toujours une convention de codes que j'utilise et améliorer à chaque fois :
Mon CSS est classé en quatre dossiers.
- Tools, qui contient les fonts, Bourbon et un Reset CSS.
- Base, qui contient la structure de ma page (le layout), les couleurs utilisées (je suis très fan du framework Bootstrap, j'utilise donc, comme eux, de nombreuses classes utilitaires), un reset personnel typographique (les h1/h2/h3, small, strong, etc.). Il y a également la déclaration de toutes mes variables SASS (les couleurs de mon thème et sa largeur, la taille de ma marge principale) et les mixins que j'ai développés et/ou rassemblés avec le temps (je m'inspire beaucoup de Material Design en ce moment ; "@include shadow(z);" me donne la hauteur de l'ombre souhaitée).
- Modules se rapportent à tous les codes qu'on utilise un peu partout (formulaires, header, modal, structure des posts administratifs, etc.). Je prends le temps de bien définir mon style principal, et après je n'ai plus qu'à utiliser mes éléments où je le veux, pour important la page ou le template.
- Layout est spécifique à la gestion des templates FA (affichage de l'index, de la liste des sujet, du profil des membres, des messages privés, etc.).
Bien entendu, avec SASS, tous ces segments de codes sont rassemblés en un seul et même fichier CSS. Les diviser comme ça me permet juste de mieux m'y retrouver durant le développement.
Et puis je pense avoir fait le tour, donc voilà. o/
THE PAVÉ IS REAL THOUGH.
(Nihil = crédibilité 0 (¬▂¬))
