2

Organiser ses CSS

Salut les amis, aujourd’hui je vais vous parler de l’importance d’avoir des fichiers CSS propres et bien rangés.

L’apocalypse

Rien ne m’insupporte plus (à part peut être de devoir écouter un morceau de Sexion d’Assaut) que de passer après un intégrateur non-soucieux de l’état dans lequel il laisse son code. Imaginez, un fichier ou les déclarations se succèdent sans logique. Le menu se trouve entre deux liens du footer eux mêmes « rangés » dans un ordre improbable. Je vous vois ricaner d’ici mais sachez que CSS bien rangées et documentées = optimisation de votre temps pour les prochaines modifications.

Documentez votre code !

Personne ne vous interdit de définir un plan histoire d’organiser un peu votre fichier (ou vos fichiers). Personnellement, j’aime bien le structurer en plusieurs parties. Une pour les éléments de base tels que le body, le container, … Une autre concernant tous les éléments de typographie comme les niveaux de titre, paragraphes et autres liens. Ensuite peuvent venir les classes réutilisables et enfin les éléments de customisation.

Il s’agit en définitive de définir d’abord les éléments qui ne changeront pas et aller vers ceux que vous rajouterez pour personnaliser votre site. De cette manière vous savez exactement où est susceptible de se trouver le sélecteur que vous recherchez et d’avoir simplement un code hiérarchisé et maintenable. N’hésitez pas à créer un sommaire en début de fichier et de vous y tenir. Vous retrouverez plus facilement vos différentes parties.

/*
 * Exemple d'un sommaire
 *
 * == Nom d'une grande partie
 *  -- Nom d'une sous-partie
 *
 * == Autre grande partie
 *  -- Une sous-partie
 *  -- Une autre sous-partie
*/

Ceci n’est bien entendu possible que si vous êtes maître de votre projet (projet perso, création d’un thème pour un CMS, …) où si vous avez beaucoup de temps à passer à tout ranger.

Organisez vos propriétés !

Allons maintenant plus loin et pensez à classer également vos propriétés au sein de vos sélecteurs. Vous y gagnerez en logique, en maintenabilité et vous perdrez moins de temps quand il vous faudra remettre le nez dedans.

Tel que nous l’explique Kaelig Delourmeau-Prigent dans son livre CSS Maintenables avec Sass et Compass que je vous conseille fortement d’acquérir, il existe plusieurs méthodes.

div {
    /* CSS non rangés */
    position: relative;
    display: block;
    margin: auto;
    left: 20px;
    width: 900px;
    color: black;
    top: 50px;
    background-color: white;
    height: 400px;
}

Par ordre alphabétique

C’est la méthode que j’utilise. Je la trouve plus claire et plus lisible. Elle vous permet d’identifier rapidement vos propriétés et de cibler directement les doublons.

div {
    /* CSS rangées par ordre alphabétique */
    background-color: white;
    color: black;
    display: block;
    height: 400px;
    left: 20px;
    margin: auto;
    position: relative;
    top: 50px;
    width: 900px;
}

Par type de déclaration

Libre à vous d’utiliser une autre méthode. Vous pouvez classer vos propriétés par leur action et avoir une logique d’organisation directement liée à votre code. Vous pouvez ainsi ranger en premier tout ce qui touche au positionnement, ensuite les dimensions, les couleurs, etc.

div {
    /* CSS classées par thème */
    display: block;
    position: relative;
    top: 50px; left: 20px;
    margin: auto;
    height: 400px;
    width: 900px;
    background-color: white;
    color: black;
}

Tentez différentes méthodes et choisissez celle qui vous convient le mieux. Dès l’instant qu’il existe une logique, elle sera facilement identifiable par vos collègues et tout le monde y trouvera son compte.

Sur ce, les amis, je vous laisse vous amuser avec vos CSS ! :)

A propos de Gaëtan

Gaëtan a écrit 3 articles sur le blog.

Les amis de nos amis sont nos amis, alors partageons !

Laissez un commentaire





Si vous êtes un vrai développeur, vous devez savoir compter.
Alors on vous met au défi !
Si vous réussissez cette épreuve, nous nous ferons une joie de lire votre commentaire.