1.Réinitialiser
Tout d’abord, laissez-moi vous dire très sérieusement qu’il faut toujours réinitialiser certaines catégories. Que vous utilisiez Eric Meyer Reset, YUI Reset ou que vous écriviez votre propre code de réinitialisation, utilisez-le simplement.
Il peut facilement supprimer le remplissage et la marge de tous les éléments :
| html, corps, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pré, formulaire, champset, table, th, td { marge : 0 ; remplissage : 0 ; |
Eric Meyer Reset et YUI Reset sont tous deux très puissants, mais pour moi, ils vont trop loin. Je pense que vous devrez éventuellement tout réinitialiser, puis redéfinir les propriétés de tous les éléments. C'est pourquoi Eric Meyer recommande une utilisation plus efficace (réinitialisation de la feuille de style) et vous ne vous contentez pas d'utiliser sa feuille de style de réinitialisation, vous la faites glisser et déposez-la dans votre projet. Ajustez-le (la feuille de style de réinitialisation) et créez votre propre feuille de style de réinitialisation.
Oh, s'il te plaît, arrête d'utiliser :
| * { marge : 0 ; remplissage : 0 ; |
Passez plus de temps à travailler dessus et, à votre avis, qu'arrivera-t-il aux boutons radio lorsque vous retirerez le rembourrage ? Les éléments de formulaire peuvent parfois faire des choses géniales, le moyen le plus efficace est donc de les rendre indépendants.
2. Trier
un petit test
Cet exemple est pour vous faire réfléchir à la manière de trouver plus rapidement le bon attribut de marge ?
Exemple n°1
| div#en-tête h1 { indice z : 101 ; couleur : #000 ; position : relative ; hauteur de ligne : 24 px ; marge droite : 48 px ; bordure inférieure : 1px solide #dedede ; taille de police : 18 px ; } |
Exemple n°2
| div#en-tête h1 { bordure inférieure : 1px solide #dedede ; couleur : #000 ; taille de police : 18 px ; hauteur de ligne : 24 px ; marge droite : 48 px ; position : relative ; indice z : 101 ; } |
Vous ne pouvez pas me dire que l'exemple n°2 ne parvient pas à trouver la bonne propriété de marge plus rapidement. Triez les propriétés de vos éléments par ordre alphabétique. Créer votre CSS de manière cohérente vous aidera à gagner du temps dans la recherche d'une propriété spécifique.
Je sais que certaines personnes organisent leur code d'une manière et d'autres d'une autre, mais dans mon entreprise, nous avons pris une décision consensuelle selon laquelle tout le code serait organisé par ordre alphabétique. Cela aide certainement de travailler avec d’autres en organisant votre code de cette façon. Je grince des dents à chaque fois que je tombe sur une feuille de style en cascade dont les propriétés ne sont pas triées par ordre alphabétique.
3.Organisation
Vous devez organiser vos feuilles de style de manière à ce que le contenu associé soit rapproché, ce qui facilitera la recherche de ce que vous recherchez. Utilisez des annotations plus efficaces. À titre d'exemple, voici comment je structure ma feuille de style en cascade :
| /*****Réinitialiser*****/ Supprime le remplissage et la marge d'un élément. /*****Éléments de base*****/ Définissez des styles pour les éléments de base : body, h1-h6, ul, ol, a, p, etc. /*****Classes génériques*****/ Définir des styles simples, comme faire flotter un côté, supprimer la marge inférieure d'un élément, etc. Bien sûr, la plupart d'entre eux ne sont pas liés à la sémantique souhaitée, mais ils sont nécessaires pour traiter le code efficacement. /*****Mise en page de base*****/ Définir des modèles de base : en-tête, pied de page, etc. Aider à définir les éléments de base de la mise en page Web /*****En-tête*****/ Définir tous les éléments Hearder /*****Contenu*****/ Définir tous les éléments dans la zone de contenu /*****Pied de page*****/ Définir tous les éléments du pied de page /*****Etc*****/ Définissez d'autres sélecteurs. En annotant et en catégorisant les éléments similaires en groupes, vous trouverez plus rapidement ce que vous cherchez. |
4. Cohérence
Quelle que soit la manière dont vous décidez d’écrire du code, soyez cohérent. Je suis fatigué de tout le débat CSS sur une ligne ou multiligne. Il n’est pas nécessaire de discuter. Tout le monde a une opinion, alors choisissez une façon de travailler qui vous plaît et soyez cohérent dans toutes vos feuilles de style.
Personnellement, j'utiliserais une combinaison des deux. Si un sélecteur a plus de 3 attributs, je le tronquerai et l'écrirai sur plusieurs lignes.
| div#en-tête { float : gauche ; largeur : 100 % } div#en-tête div.colonne { bordure droite : 1px solide #ccc ; float : droitedroite ; marge droite : 50 px ; remplissage : 10 px ; largeur : 300 px ; } div#header h1 { float : gauche ; position : relative ; largeur : 250 px ; |
Alors trouvez comment vous aimez travailler et restez cohérent.
5. Commencez au bon endroit
N'essayez pas de vous rapprocher de votre feuille de style avant d'avoir terminé le langage de balisage.
Lorsque je me prépare à diviser une page Web, avant de créer le fichier CSS, je dois prévisualiser et marquer tous les documents entre la balise d'ouverture du corps et la balise de fermeture du corps. Je n'ajouterai pas de DIV, d'ID ou de sélecteurs de classe supplémentaires. Je vais ajouter quelques DIV généraux, comme l'auditeur, le contenu, le pied de page, car je sais que ces choses existent.
En marquant d'abord le document, vous ne rencontrerez pas les problèmes déjà voués à l'échec des divisions1 et des classes2 !
/*Vous n'avez besoin d'ajouter ces éléments qu'une fois que vous avez commencé à écrire le CSS et que vous réalisez que vous aurez besoin d'un autre hook pour accomplir ce que vous essayez de réaliser.*/(Texte original non traduit).
Utilisez des sélecteurs enfants CSS pour spécifier des éléments enfants ; n'ajoutez pas simplement mécaniquement un sélecteur de classe ou d'ID à un élément. N'oubliez pas : CSS ne sert à rien sans un document (ou une structure de balisage) bien formaté.