Bon usage
CSS | Comme tout langage, la maîtrise du code CSS passe par de bonne pratique. Voici des exemples de cas. Amélioration du code |
ClasseL'utilisation de sélecteurs de classes CSS vous permet de configurer des règles pour formater des classes entières, des éléments spécifiques dans une classe ou des éléments uniques sur de nombreuses classes. Son usage est très frequent. En voici un exemple simple :
Dans le code précédent, la classe folder semble mal structurée ! En effet, en observant que la classe file ne diffère en rien de folder, sauf pour la propriétée background, une première amélioration consiste à déclarer deux classes : une classe item et une classe folder. La classe item regroupe tous les points communs entre les icones (taille, position …), l'idée est ici de factoriser les propriétés communes à différents éléments. Voici le code en action. AméliorationEtudier le code qui structure mieux le code précédent. La class item regroupe l’ensemble des propriétés communes. Chaque div possède une seconde class permettant de spécifier le fond en fonction du type du fichier. AméliorationL’usage des classes en CSS semble facile à maîtriser, mais attention, nous pourrions aller un cran plus loin. Nous pouvons grâce au CSS3 rendre notre code moins verbeux ! Mais comment ! En évitant de réécrire ce que l’on a déjà écrit ; à savoir qu’il suffit de connaître l'extension du fichier (par exemple .doc) pour en déduire le type d’icône à associer. Il est inutil d’ajouter une classe (par exemple word). Etudier le code qui réduit l’ecriture non seulement du CSS mais aussi du HTML Le CSS3 permet de prendre en compte l'extension pour déterminer l’icône. First LastEtudier ce code. L’utilisation d’un identifiant pour spécifier le premier et le dernièr élément du menu interdit toutes modifications de la structure du menu (ajouter ou supprimer un item du menu). En laissant le CSS determiner le premier et le dernier li, on réduit le code et on permet la modification du menu. Code en action
|
|