Tout le monde peut écrire du code CSS, même si celui-ci fonctionne actuellement pour votre projet. Mais CSS pourrait-il être meilleur ? Bien que webjx.com présente une variété de techniques dans ce domaine, commencez à utiliser ces cinq aspects pour améliorer votre CSS, ce qui vous donnera une apparence plus professionnelle et améliorera votre code !
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, champs, 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 à le créer, que pensez-vous qu'il arrivera 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. Tri
Un petit test : Cet exemple vous fera réfléchir à comment 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#header h1 { border-bottom : 1px solid #dedede ; couleur : #000 ; taille de la police : 18px ; marge-droite : 48px ;
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 :
/*****Reset*****/Supprime le remplissage et la marge de l'élément.
/*****Éléments de base*****/Définir le style des éléments de base : body, h1-h6, ul, ol, a, p, etc.
/*****Classes génériques*****/ Définir des styles simples, comme flotter d'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 que nous souhaitons, mais ils sont Il est nécessaire de traiter le code efficacement.
/*****Basic Layout*****/Définir les modèles de base : en-tête, pied de page, etc. Aide à définir les éléments de base de la mise en page d'une page Web
/*****Header*****/Définir tous les éléments Hearder
/*****Content*****/Définir tous les éléments dans la zone de contenu
/*****Footer*****/Définir tous les éléments du pied de page
/*****Etc*****/Définir 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 sur plusieurs lignes. 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 une façon dont vous aimez travailler et restez cohérent.
5. Commencez du bon endroit
N'essayez pas de vous rapprocher de votre feuille de style tant que le langage de balisage n'est pas terminé.
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 de divities1 et classes2 /*Vous n'aurez besoin d'ajouter ces éléments qu'une fois que vous aurez commencé à écrire le CSS et réalisé que vous aurez besoin d'un autre hook pour le faire ! accomplir ce que vous essayez d’accomplir.*/(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é.
Résumer
Ceux-ci peuvent m'aider à mieux écrire du code CSS. Mais cela ne signifie pas la fin de cette liste. Ensuite, j'en apporterai d'autres à partager avec vous. Vous êtes invités à prêter attention à webjx.com.