Une feuille de style ça devient vite assez long, on y ajoute plein de choses et parfois il y a un peu de redondance dans le code. Quelques exemples :
L’effet float et text-align
J’intègre un template, je mets du float un peu partout, au final on arrive à une dizaine de float qui se baladent dans le code. Il en va de même pour le texte qui se promène de droite à gauche en passant par le centre.
La solution est plutôt simple, on code des classes dédiées.
.left{float : left ;} .right{float : right ;} /* 2 classes dédiées au positionnement */ .aligncenter{text-align: center;} .alignright{text-align: right;} .alignleft{text-align : left ;} /* 3 classes dédiées au positionnement du texte */ .both{visibility: hidden; clear: both;} /* pour résoudre le syndrome du float */
D’où proviennent ces noms ? right et left car ce sont logiquement des positions. Les align* sont en fait celles que WordPress mets par défaut, travaillant sous WordPress je les adopte.
La classe both permettra d’éviter à ce qui se trouve en dessous d’une div avec float de se retrouver n’ importe où (pour ceux qui ne comprendraient pas lisez CSS : comprendre le fonctionnement de float et clear.) Personnellement je l’applique à un <hr />, car c’est ce qui me semble le plus logique.
L’effet box
Cette fois regardons le rendu notre page sur un browser, certaines choses sont similaires.
- Des box
- Des ombres CSS3
- Des border-radius (CSS3)
- …
Un exemple pour illustrer la chose. Ici on a deux box similaires (cas particulier : elles sont identiques). Hors si vous regardez le code, on observe comme sur cette capture 3 classes : box, left et right.. Pour la droite et une autre pour la gauche. Mais ce n’était pas une solution vraiment pertinente d’où cette structure actuelle. (qui peut encore être optimisé)
On combine les classes et on obtient la disposition souhaitée. On peut imaginer quelques exemples plus parlant, dans une sidebar par exemple :
<div class="blogoliste box right"></div>
Voilà dans cette div qui contiendra une liste de liens (la Blogoliste) on appliquera le style global d’une box et on la place à droite. Par exemple la personnalisation peut être ensuite un fond spécial… Je vous laisse imaginer.
On parle de box, mais on peut faire des classes pour regrouper les ombres du css3 si elles sont tout le temps les mêmes, une classe pour les annuler si nécessaire (par exemple j’ai une noshad pour mes images), une classe pour les coins arrondies…
Voilou, (je me doute bien que ce n’est pas du neuf pour certains 
)
PS : comme vous pouvez le constater sur ce template, ce n’est pas encore ça. Pourquoi ? Parce que je ne le fais pas systématiquement
C’est exactement comme ça que je fais perso, je balance plein de classes communes, ça permet d’alléger considérablement mes thèmes
Wep je fais ça en ce moment sur mon nouveau thème aussi, ça rend le code plus agréable je trouve. Le plus chiant c’est qu’on code plein de petites classes^^
En effet cette technique n’est pas neuve, mais elle est trop souvent délaissé. Pourtant il est bien plus simple de préparer quelques classes de bases, que l’on réutilise ensuite dans toutes nos feuilles de style. C’est un peu comme quand on programme en objet : ça permet de faire du code réutilisable et au final d’avoir un gain de temps, et de taille du code.
Pour moi ça a bien plus de sens de chercher à éviter la redondance, que de chercher à minifier son CSS.
Sinon c’est un bon article et j’espère que ça montrera la voie à suivre à certains
Ping : Tweets that mention Que ton CSS soit simple et logique – Le Colibri Libre -- Topsy.com
@z0va Wep ça fait un bon gain de temps, et de lisibilité du code aussi je trouve.
Merci