Share
Bien sûr, tout le monde peut écrire des CSS. Même les programmes le font pour vous maintenant. Mais le CSS est-il bon? Voici 5 conseils pour commencer à améliorer le vôtre.
Sérieusement, toujours utiliser une réinitialisation. Que vous utilisiez la réinitialisation Eric Meyer, la réinitialisation YUI ou votre propre réinitialisation personnalisée, utilisez quelque chose.
Cela peut être aussi simple que de supprimer la marge et le remplissage de tous les éléments:
html, corps, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, jj, p, blockquote, pre, formulaire, champs, tableau, th, td marge: 0; rembourrage: 0;
Les réinitialisations Eric Meyer et YUI sont géniales, mais pour moi, elles vont trop loin. J'ai l'impression que vous finissez par tout réinitialiser, puis par redéfinir de nombreuses propriétés sur les éléments. C'est pourquoi Eric Meyer vous recommande de ne pas simplement prendre sa feuille de style de réinitialisation et de la laisser tomber dans vos projets s'il existe un moyen plus efficace de l'utiliser. Tweak le. Construire dessus. Faites le vôtre.
Oh et s'il te plait, arrête ça:
* marge: 0; rembourrage: 0;
Le traitement prend plus de temps et, selon vous, que devrait devenir un bouton radio lorsque vous supprimez le rembourrage? Les éléments de forme peuvent parfois faire des choses géniales, alors il vaut peut-être mieux laisser certaines d'entre elles seules.
Quel exemple pensez-vous est le plus rapide à trouver la propriété margin-right?
div # en-tête h1 z-index: 101; couleur: # 000; position: relative; hauteur de ligne: 24px; marge droite: 48px; border-bottom: 1px solid #dedede; taille de police: 18px;
div # header h1 border-bottom: 1px solid #dedede; couleur: # 000; taille de police: 18px; hauteur de ligne: 24px; marge droite: 48px; position: relative; z-index: 101;
Vous ne pouvez pas me dire que l'exemple 2 n'est pas plus rapide. En alphabétisant vos propriétés, vous créez cette cohérence qui vous aidera à réduire le temps que vous passez à chercher une propriété spécifique..
Je connais des gens qui en organisent d’une manière et d’autres qui en organisent une autre, mais dans mon entreprise, nous avons pris la décision par consensus de tout organiser en ordre alphabétique. Cela a certainement aidé lorsque je travaillais avec le code d'autres personnes. Je grince des dents chaque fois que je vais dans une feuille de style où les propriétés ne sont pas triées par ordre alphabétique.
Vous devez organiser votre feuille de style de sorte qu'il soit facile de trouver des éléments et que les éléments associés soient proches les uns des autres. Utilisez les commentaires efficacement. Par exemple, voici comment je structure mes feuilles de style:
/ ***** Réinitialiser ***** / Supprimer la marge et le remplissage des éléments / ***** Éléments de base ***** / Définir les styles des éléments de base: body, h1-h6, ul, ol, a , p, etc. / ***** Classics génériques ***** / Définir les styles pour des choses simples telles que flotter sur les côtés, supprimer une marge inférieure sur des éléments, etc. Oui, elles peuvent ne pas être aussi sémantiques que nous le ferions tous. mais ils sont nécessaires pour coder efficacement / ***** Disposition de base ***** / Définir le modèle de base: en-tête, pied de page, etc. Eléments permettant de définir la disposition de base du site / **** * En-tête ***** / Définir tous les éléments dans l'en-tête / ***** Contenu ***** / Définir tous les éléments dans la zone de contenu / ***** Pied de page ***** / Définir tous les éléments dans le pied de page / ***** Etc ***** / Continuez à définir les autres sections une par une
En utilisant des commentaires et en regroupant des éléments similaires, il devient beaucoup plus rapide de trouver ce que vous recherchez..
Quelle que soit la façon dont vous décidez de coder, respectez-le. Je suis malade et fatigué de la ligne entière contre plusieurs lignes pour votre débat CSS. Il n'y a pas de débat! Chacun a sa propre opinion, alors choisissez ce qui vous convient et respectez-le tout au long de la feuille de style.
Personnellement, j'utilise une combinaison des deux. Si un sélecteur doit avoir plus de 3 propriétés, je le divise en plusieurs lignes:
div # header float: left; largeur: 100%; div # header div.column border-right: 1px solid #ccc; Flotter à droite; marge droite: 50px; rembourrage: 10px; largeur: 300px; div # header h1 float: left; position: relative; largeur: 250px;
Cela fonctionne pour moi parce que 3 propriétés est ce qui correspond à 1 ligne dans mon éditeur de texte avant de passer à une autre ligne. Donc, juste comprendre ce qui fonctionne pour vous et être cohérent.
N'osez pas toucher votre feuille de style avant d'avoir écrit votre balisage!
Lorsque je me prépare à découper un site, je passe en revue et marque le document entier de la balise d'ouverture du corps à la balise de fermeture du corps avant même de créer un fichier CSS. Je n'ajoute pas de divs, ids ou classes superflus. Je vais ajouter quelques div génériques comme en-tête, contenu, pied de page parce que je sais que ces choses vont exister.
En marquant d'abord le document, vous ne rencontrerez pas de maladies telles que la divitis et la classite, qui peuvent parfois être fatales! Il vous suffit d'ajouter ces éléments une fois que vous avez commencé à écrire le code CSS et à vous rendre compte que vous aurez besoin d'un autre crochet pour accomplir ce que vous essayez d'atteindre..
Utiliser les sélecteurs de descendant de CSS pour cibler les éléments enfants; n’ajoutez pas simplement une classe ou un identifiant à l’élément. Rappelez-vous juste, CSS ne vaut rien sans un document bien formaté.
* Note de la rédaction: je ne saurais trop insister sur ce point. Comme Trevor l'a dit, ne touchez même pas votre fichier CSS tant que le balisage n'est pas terminé à 100%.
Ce ne sont que quelques-uns des conseils qui m'aident à rédiger un meilleur code. Ce n'est en aucun cas la fin de la liste. Comme je viens avec d'autres, je vais partager.
Quels conseils avez-vous pour écrire de meilleurs CSS?
Accentsconagua