Nous avons soigneusement sélectionné certaines des plus intéressantes et utiles astuces, conseils, idées, méthodes, techniques et solutions de codage CSS et les avons listées ci-dessous. Nous avons également inclus certaines techniques de base, utilisables dans un projet de développement, mais souvent difficiles à trouver quand on en a besoin. Le résultat est un aperçu de plus de 70 conseils-experts susceptibles d’améliorer votre efficacité dans le CSS. Vous trouverez, si vous le souhaitez, à la fin de cet article, la liste des références et des articles liés.
WORKFLOW : GETTING START
Après avoir un design, commencez par une page vide de contenu. "Incluez vos en-têtes, votre navigation, un exemple du contenu, et votre pied de page. Ensuite, commencez à insérer votre balises html dans le code. Enfin commencez à ajouter votre CSS. Cela fonctionnera beaucoup mieux."
Initialisez en premier vos styles CSS. "Il est souvent possible d’éviter d’être obligé de spécifier la valeur d’une propriété, en tirant avantage de cette valeur par défaut. Certaines personnes aiment faire un espace blanc Global réinitialiser en mettant à zéro la valeur du margin et du padding en tête de leurs feuilles de style. Eric Meyer’s Global Reset, Christian Montoya initiale de la feuille de style, Mike Rundle initiale de la feuille de style, Ping Mag initiale de la feuille de style. [Roger Johansson]
Utilisez une feuille de style "maître". "Une des erreurs les plus communes des débutants et développeurs intermédiaires est de ne pas supprimer les styles par défaut du navigateur. Cela conduit inévitablement à des incohérences dans l’affichage de vos pages selon les navigateurs, ce qui fait que beaucoup de concepteurs sont amené à critiquer le navigateur. Critique infondée, bien sûr. Avant de faire quoi que ce soit pour coder un site Web, vous devriez réinitialiser les styles. "[Maître de style : La plupart utiles CSS Technique], [Ryan Parr]
1. master.css
2. @import url("reset.css");
3. @import url("global.css");
4. @import url("flash.css");
5. @import url("structure.css");
1. <style type="text/css" media="Screen">
2. /*\*/@import url("css/master.css");/**/
3. </style>Faites-vous une bibliothèque de classes CSS utiles. Utiles pour le débogage, mais il faudrait éviter dans la version (séparé de marquage et de présentation). Puisque vous pouvez utiliser plusieurs noms de classes (par ex. <p class="floatLeft alignLeft width75"> ...</ p>), faites-en usage pour mieux debugger votre code. (Mise à jour) [Richard K. Miller]
1. CSS:
2. .width100 { width: 100%; }
3. .width75 { width: 75%; }
4. .width50 { width: 50%; }
5. .floatLeft { float: left; }
6. .floatRight { float: right; }
7. .alignLeft { text-align: left; }
8. .alignRight { text-align: right; }ORGANISEZ VOTRE CODE CSS
Organisez votre style CSS, en utilisant des feuilles de style "maîtres". "Organisez votre CSS aide à la maintenance future du site. Commencez par un feuille maître. Dans le cadre de cette feuille de style importez vos reset.css, global.css, flash.css (si nécessaire) et structure.css et à l’occasion une feuille de style typographie. Voici un exemple d’un feuille de style "maître" et comment elle est intégré au document : "
Assfor
