1485 sujets

Web Mobile et responsive web design

Bonjour à tous!

Cela maintenant de nombreux mois que je me suis attaqué aux media Queries (les mains dans le cambouis jusqu'aux coudes). Cependant, j'ai eu quelques soucis de productivité lorsqu'il s'agit de mettre en place et de peaufiner mes CSS.

Je m'explique:
Bien souvent je commence avec une CSS dédiée au Desktop (je n'arrive pas à adopter l'approche "mobile first"...trop de passif à mon actif Smiley biggrin , mais ça changera). Puis j'attaque les CSS dédiés à des largeurs plus "tablette". Et pour finir, je termine par le Mobile.
Je me retrouve alors avec trois à cinq feuilles de style que je m'efforce de nettoyer en regroupant les propriétés/sélecteurs communs, spécifiques,... et les trie dans l'ordre les communs (reset, base, layout général), les CSS pour mobile, ensuite tablettes,... Bref je fais ma petite cuisine.

C'est très simple pour des mises en page "basiques", mais pas pour des projets complexes.
Ma question est la suivante: existe-t-il des outils pour regrouper, fusionner, simplifier et organiser plusieurs feuilles de style (en fonction des media queries) ?
Genre l'outil qui ressort les propriétés communes et les places hors "media queries", simplifie etc...
Est-ce que SASS, SimpLess etc..,le propose ?
Ou bien est-ce ma manière de travailler que je dois complétement remettre en question ?

Merci d'avance!
Modifié par MULK (01 May 2013 - 14:43)
Bonjour,

Quoi que vous fassiez, pensez bien à développer avec une grille css, qu'elle soit la vôtre ou celle d'un framework. En adoptant la méthode css improprement appelée "orienté objet" (créer un style css et l'appeler dans la page à partir d'une class, ce qui évite les redondances dans la feuille de style). Vous allez gagner énormément de temps.

Attention aux outils css qui fusionnent les propriétés, ont a quelquefois des surprises.
Yop! Bien-entendu que j'ai monté en "fluide" Smiley cligne !
Merci pour l'outil, vais tester cela!