Conventions HTML et CSS - Wiki

Cet article a été mis à jour, vous consultez ici une archive de cet article!

Dernière mise à jour : 12/07/2014 à 15h50

Table des matières

Indentation

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 exemple ci-dessous.

Un seul attribut

Lorsque la classe ne possède qu'un seul attribut, nous privilégions une affichage sur une seule.

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 certains nombre d'attribut, 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 ou 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 ou 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égier dans le fichier default.css qui na pas pour but d’être modifier 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éaliser des tests avec votre navigateurs, un simple copier coller vous permet de le mettre dans votre fichier CSS.