Conventions HTML et CSS

Il est important dans un projet que les développeurs adoptent un style d’écriture identique. Ceci favorise la relecture du code par tout le monde et facilite grandement le débogage.

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 : 
nav.dynamic-menu li ul li a,
nav.dynamic-menu li ul li span { color: #0578CC; }
On distingue bien les deux cas où l'on applique la couleur.

Lorsque nous n'avons pas besoin d'identifier les éléments, nous n'utilisons pas de retour à la ligne :
Code CSS : 
img, table, td, blockquote, code, pre, textarea, input, video, object, .video-player { max-width: 100%; }
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.



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 : 
background: #C4CED6;
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.



Le nom des classes


Les règles sont simples :

Pour le reste, les noms restent cohérents avec la fonction d'utilisation.

La classe header est faite pour l'en-tête du site, la classe content pour le contenu du site.

Il reste encore quelques underscore "_" dans certains noms de classes, mais ils seront remplacés dans les versions futures. Ce choix permet de distinguer un nom de classe CSS et d'une variable PHP