Dernière mise à jour : 05/03/2016 à 16h07
Table des matières
Depuis l'intégration du cache CSS, il n'est plus question d'optimiser le fichier CSS pour accélérer le chargement web (le cache CSS s'en occupe), mais plutôt de gagner en lisibilité dans le développement.
Afin de simplifier le travail de tous, nous avons choisi un style similaire à l'affichage des fonctions "examiner l’élément" des navigateurs web.
Ces règles ne sont pas obligatoire, mais très fortement recommandée pour vos développements.
Indentation
Le style d'indentation adopté sur PHPBoost permet de gagner en lisibilité et en clarté du code.
L'utilisation des tabulations et des espaces est très importante dans le code. Il faut aérer votre code pour le rendre plus lisible.
Nous allons voir plusieurs exemples ci-dessous.
Un seul attribut
Lorsque des classes similaires ne possèdent qu'un seul attribut, nous privilégions un affichage sur une seule ligne.
Code CSS :
.inline { display: inline !important; } .center { text-align: center !important; } .left { text-align: left !important; } .right { text-align: right !important; } .justify { text-align: justify !important; }
Plusieurs attributs
Lorsqu'une classe possèdent un certain nombre d'attributs, nous privilégions le retour à la ligne pour chaque attribut.
Code CSS :
body { position: relative; min-height: 100%; height: auto; background: url(images/body.jpg) no-repeat fixed top center; color: #555555; font-size: 13px; font-family: "Trebuchet MS", Verdana, 'Bitstream Vera Sans', Times, serif; }
Les attributs pour plusieurs classes
Dans le cas où nous souhaitons appliquer un attribut à plusieurs classes, nous avons deux façons de coder en fonction de l'utilisation des fonctions.
Lorsque nous avons besoin de les identifier simplement, nous utilisons un retour à la ligne :
Code CSS :
On distingue bien les deux cas où l'on applique la couleur.nav.dynamic-menu li ul li a, nav.dynamic-menu li ul li span { color: #0578CC; }
Lorsque nous n'avons pas besoin d'identifier les éléments, nous n'utilisons pas de retour à la ligne :
Code CSS :
Ce type d'écriture est privilégié dans le fichier default.css qui n'a pas pour but d’être modifié de façon régulière.img, table, td, blockquote, code, pre, textarea, input, video, object, .video-player { max-width: 100%; }
Les espaces dans les attributs
Pour faciliter les copier-coller des navigateurs, nous intégrons un espace après les ":" mais pas avant.
Code CSS :
De cette manière, si vous réalisez des tests avec votre navigateur, un simple copier-coller vous permet de le mettre dans votre fichier CSS.background: #C4CED6;
Le nom des classes
Les règles sont simples :
- Pas de majuscule
- Utilisation du tiret du 6 "-"
La classe header est faite pour l'en-tête du site, la classe content pour le contenu du site.