Utiliser un CMSPour créer le design du site web, le CSS possède tous les avantages. Il est facile à comprendre, des tutoriels complets sont disponibles gratuitement sans oublier les livres et les vidéos. Même un webmestre débutant peut apprendre les bases du CSS en quelques semaines à raison de quelques heures par jour. Mais il y a certaines pratiques qu'on doit appliquer pour bénéficier d'une bonne lisibilité dans le code. La première est de toujours utiliser des fichiers de CSS externes. Même si cela paraît évident à première vue, on voit encore des sites qui intègrent le CSS dans leurs pages HTML. Sachez que cela va à l'encontre de la philosophie CSS. En effet, la force de ce langage est de permettre la modification de tout le design à partir d'un seul fichier. En mettant le code dans chaque page, vous créez des problèmes inutiles pour l'avenir. Ensuite, il faut toujours commenter son code tel que dans l'exemple suivant :
/*Couleurs pour les liens principaux
a {
color:#000666;
}
Un fichier de style CSS sans des commentaires est comme un labyrinthe sans lumière ou carte... Vous perdrez beaucoup à vous rappeler des différents styles, notamment pour les gros sites qui peuvent inclure des milliers de définitions.
Les dimensions et le positionnement
Quand on crée des styles CSS, on est parfois perdu devant les dimensions et le positionnement des éléments. Pour la dimension, le CSS possède plusieurs mesures telles que le pica, le pixel, l'em, le pourcentage, le point, le centimètre, le pouce et le millimètre. On utilise principalement l'em qui représente la dimension de la police de caractère de l'élément actuel. Le pixel est un point sur l'affichage d'un moniteur et enfin le pourcentage se passe d'explication. Pour la dimension des éléments, on utilise le pourcentage ou le pixel ce qui nous amène au concept des dimensions fluides ou fixes. Si vous utilisez un style
ci-dessous :
Principal {
width:965px;
margin:auto;
}
Vous créez un style avec une dimension fixe. Ainsi, le conteneur principal sera toujours de 965 pixels indépendamment de la résolution du moniteur. En revanche, le même code en pourcentage nous donne une mise en forme relative :
Principal {
width:90%;
margin:auto;
}
Dans cet exemple, nous demandons à ce que le contenu s'affiche sur 90 % de la surface disponible en centrant les marges. La mise en forme relative est plus difficile, car on doit tenir compte des différentes résolutions. Cependant, cette pratique permet de créer des sites avec le concept de Responsive Design qui permet d'adapter le site pour différentes résolutions.
Le positionnement d'un élément peut être relatif ou absolu. On définit une position absolue en indiquant précisément les coordonnées de position par rapport aux 4 coins de la page. Ainsi, le code CSS qui suit :
Bloc {
position:absolute;
left;200px;
top:10px:
width:300px;
height:200px;
}
Permet de créer un bloc d'une dimension de 300 x 200 pixels qui est positionné précisément à 10 pixels en dessous du haut de la page et à 200 pixels à gauche de la page. Une alternative au positionnement absolu est la forme fixe. Par exemple, si nous avions mis position:fixed dans le code précédent, le bloc resterait à la même place même si on défile la page ce qui n'est pas le cas du positionnement absolu. Cette technique de position fixe est parfois utilisée pour afficher des publicités sur un site.
Optimiser le code CSS
Il existe deux manières d'écrire le code CSS et la première se base sur les exemples de cet article. Ainsi, on déclare le style CSS et on ouvre une accolade, on écrit le code et on ferme l'accolage avec un retour de chariot. Cette pratique est pour les novices en CSS, car cela permet d'améliorer la visibilité du code, mais il est parfois nécessaire de compresser le code en utilisant une forme compacte.
p {color:#000, margin:5px;}
Cette forme permet d'accélérer le traitement du CSS et donc du chargement des pages par la même occasion. Au début, vous pouvez utiliser la forme structurée pour vos styles CSS, mais il faut également pratiquer le CSS optimisé pour accélérer le site.