Lors de la conception de sites assez conséquents, il est intéressant de jeter un coup d’œil à ce qu’il est possible de faire afin d’optimiser son rendement en intégration. Après avoir testé en profondeur plusieurs solutions (dont le très bon Blueprint CSS), j’ai retenu 2 solutions qui me font gagner un temps fou et me permettent de me concentrer sur l’aspect créatif des projets que j’intègre.

CSS Intelligent

Gagner en productivité

Premièrement, si comme moi vous codez sous Textmate, je vous conseille le très bon bundle de chez Minimal Design : Textmate CSS Bundle.

Sur le principe des « snippets », accédez aux propriétés CSS les plus communes en tappant ses initiales.

Exemple : lstn +
Donnera : list-style-type: none;

Le gain de temps lors de la construction de vos éléments est incroyable. Personnellement je ne pourrai plus me passer de cet outil.

Vers un CSS « intelligent »

Ensuite, nous avons tous eu l’expérience suivante : les desiderata du client qui varient en cours de production (la femme du dg « préfère le jaune » et il ne veut rien entendre après des heures d’explication laborieuse). Pour faciliter la propagation de changements « site-wide », nous avons plusieurs solutions :

  1. La bonne vieille technique du « Rechercher / Remplacer » (parfois trop « bourrin », ou pas assez)
  2. Coder le style en dur dans la source html, il l’aura voulu son jaune (quick’n’dirty)
  3. Se baser sur un framework CSS dynamique, permettant d’attribuer des variables (de la couleur dominante à l’épaisseur de la bordure des champs de formulaire)

Je trouve que le grand point faible du CSS est que ce langage ne permet pas la réutilisation de classes ou de constantes. Même en optimisant son code on produira toujours de l’excédent, du redondant. Certains intégrateurs s’acharnent avec minutie à factoriser les propriétés, à optimiser les sélecteurs… Je pense que c’est une perte de temps. La machine doit être là pour épauler le créatif, pas l’inverse.

Avec CSS Cacheer, un préprocesseur php qui traite vos feuilles de style, vous accédez à de nombreuses fonctionnalités qui révolutionneront votre manière de coder :

Les constantes

Voici une partie des constantes que je déclare en début de css :

@constants {
  ma_couleur: #3D7017;
  links_color: #FF752D;
  grid: 950; /* largeur de la grille */
  sidebar: 7; /* nombre de colonnes pour la barre latérale */
  content: 18; /* nombre de colonnes pour le contenu */
  gutter: 10; /* marge entre les colonnes */
  body_color: #121;
  headers_text: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
  body_text: Georgia, Times, "Times new roman", serif;
}

Appelables ainsi :

h1 {
  font-family: const(headers_text);
  color: const(ma_couleur);
}

Réutilisez vos classes !

Je veux que mon élément (« .lien ») reprenne toutes les propriétés d’un autre élément (« .bouton »), sans avoir à les saisir à nouveau ni toucher à mon code html:

.lien {
  class: bouton; /* je reprends les propriétés des éléments .bouton */
  border-width: 3px; /* mais avec une bordure de 3 pixels */
}

Alignez vos éléments facilement

Le système de grille génère à la volée un background reprenant des valeurs comme « nombre de colonnes », « largeur d’une colonne », « goutière » (comprenez « espace entre les colonnes ») et « hauteur de ligne » (baseline).

Les sélecteurs imbriqués

Cette fonction vous coupera probablement le souffle. Un petit bout de code vaudra mieux qu’une longue explication :

ul#exemple {
  list-style-type: none;
  line-height: 1.25em;

  > li {
    margin-top: 14px;

    h3 {
      font-size: 1.3em;
      font-weight: bold;
      margin-bottom: 0;
    }

    p {
      color: #7F9280;
      margin-bottom: 0;
    }
  }
}

Oui vous avez bien lu ! L’élément « h3 » qui appartient à l’élément « li » qui lui-même appartient à l’élément « ul#exemple » sont imbriqués !

CSS Scaffold reconnaît les relations d’appartenances et nous servira le css qui suit :

ul#exemple {
  list-style-type: none;
  line-height: 1.25em;
}
ul#exemple > li {
  margin-top: 14px;
}
ul#exemple > li h3 {
  font-size: 1.3em;
  font-weight: bold;
  margin-bottom: 0;
}
ul#exemple > li p {
  color: #7F9280;
  margin-bottom: 0;
}

Factorisation automatique

Si plusieurs éléments ont les mêmes propriétés, ils seront regroupés pour optimiser le poids total de votre fichier.

Minification, mise en cache & compression gzip

Une fois passé à la moulinette, votre code tient en une seule ligne, mis en cache et gzippé. Ainsi votre css est optimisée et vos pages sont plus rapides à charger.

Et bien plus encore…

Faire une liste de toutes les fonctionnalités du framework aurait gâché votre plaisir de les découvrir par vous même. Malgré tout, j’ai apporté quelques modifications et améliorations aux plugins de CSS Cacheer, et je tenais à les partager :

Plugins CSS Cacheer
(à extraire dans le dossier css-cacheer/plugins/ de votre installation)