5 étapes pour écrire CSS Better Part II
Il s'agit de la deuxième partie de 5 étapes pour mieux rédiger les CSS. Il ya plein de tutoriels CSS sont disponibles sur Internet, mais peu sont les tutoriels utiles. Dans ce didacticiel, vous trouverez 5 étapes pour écrire un meilleur code CSS pour votre projet de site Web suivant. J'espère que vous apprécierez ce didacticiel.
1. Conservez les déclarations CSS dans une ligne
Vous devriez toujours garder déclarations CSS dans une ligne droite, elle aide à garder votre fichier CSS propre et plus petits. Il contribue également à supprimer les espaces non désirées et des caractères.
Bon Code
; color : # 333333 ; background : #cccccc ; } h2 (font-size: 18px; color: # 333333; background: # cccccc;)
Bad Code
h2 ( font-size: 18px; ; color: # 333333; ; background: # cccccc; )
2. Combiner des éléments
L'une des meilleure façon d'économiser lignes de code en regroupant les sélecteurs. Il existe quelques exemples ci-dessous de ce que je fais allusion.
Bon Code
h1, h2, h3 ( ; color : # 333 ; font-family: Arial, Helvetica, sans-serif; color: # 333; )
Bad Code
h1 ( ; color : # 333 ; font-family: Arial, Helvetica, sans-serif; color: # 333; ) h2 ( ; color : # 333 ; font-family: Arial, Helvetica, sans-serif; color: # 333; ) h3 ( ; color : # 333 ; font-family: Arial, Helvetica, sans-serif; color: # 333; )
3. Utilisez "marge" aux Layout Center
Beaucoup de débutants à la CSS ne peuvent pas comprendre pourquoi vous ne pouvez pas simplement utiliser float: centre pour arriver à cet effet centré sur éléments de niveau bloc. Si seulement c'était aussi facile! Malheureusement, vous devrez utiliser.
Code
# Container ( ; /* top, bottom - and left, right*/ margin: 0 auto; / * haut, en bas - et à gauche, à droite * / width: xxxpx; )
4. Votre commentaire CSS
C'est une excellente idée de commenter son code dans des sections. Pour ajouter un commentaire, ajouter simplement / * Derrière le commentaire, et * / pour le fermer, comme ceci:
Code
/******** START CODE ICI ********/
5. Utiliser les CSS Compress Outils
Si vous ne voulez pas perdre votre temps dans la modification de vos feuilles de style ancien, vous pouvez simplement utiliser les CSS en ligne des outils de compression, il rendre votre travail en quelques secondes.
Cochez cette CSS en ligne des outils de compression ...
CSS Tidy
Clean CSS
Css Optimiser
Flumpcakes optimiseur Css
cssdrive Css Comperasor
W3C CSS Validator
Conclusion
Ce ne sont que quelques-uns des conseils qui m'aident à mieux écrire de code. J'espère que ce tutorial vous aidera également à mieux écrire et propre code. Appliquez ces conseils pour vos projets en cours et la prochaine, et vous apprécierez sûrement les efforts.
Si vous croyez que le tutoriel peut être plus mieux, S'il vous plaît partagez avec nous. Commentaire nous
Si vous souhaitez recevoir d'autres didacticiels de nous, s'il vous plaît inscrivez-vous à notre flux par RSS ou par e-mail.
Nous promouvoir
Articles connexes:
Si vous avez apprécié la lecture de cet article, s'il vous plaît consulter d'autres articles connexes ci-dessous:
Revell dit le: Novembre 27, 2009 à 9:05 Said:
Salut,
Tout d'abord, l'article de Nice! Il n'y a pas beaucoup d'articles qui abordent le style d'écriture de CSS. J'ai quelques réflexions sur le premier point, cependant. À mon avis, il est préférable d'utiliser le style d'écriture de long tout en développant et avoir un script "rapetisser" votre CSS lors de son utilisation sur un environnement réel.
Dave dit le: Novembre 27, 2009 à 10:06 Said:
Je suis entièrement en désaccord avec le point 1. Quand vous avez 3 déclarations, 1 ligne de code est grande, mais quand il ya 6 ou 7, cela devient vraiment difficile à lire.
Tout cela pour sauver peut-être 1KB? Je ne comprends pas.
Autre que celui-là, quelques idées décent ici.
Dernier blog de Dave .. 2 plus must-have CMS permettant aux plugins pour WordPress
Fasce Nicolo 'dit le: Novembre 27, 2009 à 10:34 Said:
Je suis d'accord avec Dave, le point 1 est injuste, tout simplement parce que si vous travaillez dans une équipe, il est très difficile de lire un code d'une ligne.
Vous devriez également écrire le code dans l'ordre alphabétique pour le même but.
EJ Semeijn dit le: Novembre 27, 2009 à 10:57 Said:
Pourquoi avons-nous cesser d'afficher ces conseils? Internet est déjà plein de conseils à ces bases. Et je suis également en désaccord avec # 1. Il ne rend pas votre code plus facile à comprendre, elle fait juste plus difficile.
Mes conseils serait de mettre la structure de la page dans votre CSS, faire des sections pour la réinitialisation, rubriques, FORMULAIRES, les éléments HTML, les polices, etc De cette façon, votre code CSS sera plus facile à comprendre.
dit safetycopy le: Novembre 27th, 2009 à 9:38 pm Said:
Je suis d'accord avec plusieurs commentaires d'autres personnes - point 1 de l'exemple du mauvais code est un code pas mal - c'est juste un style. Ce poste ne serait utile de compléter les débutants et nous ne voulons pas commencer à enseigner les mauvaises hypothèses déjà!
dernier blog safetycopy's .. Photo
Josh dit le: Novembre 29, 2009 à 4:38 Said:
Je fais tous, sauf la dernière. Je ne trouve pas qu'il soit utile pour compresser mes css, mais contrairement à tous les lecteurs précédents, je suis d'accord fortement sur le point # 1. J'ai juste commencé à écrire mon CSS dans une ligne et ça a été formidable. Le défilement a été beaucoup réduit. Je suppose que cela est une préférence personnelle. Quelque chose qui aide est que l'éditeur que j'utilise encapsule le code à la ligne suivante il n'y a donc pas de défilement horizontal.
Dernier blog de Josh .. Addicted to Flickr
FAQPAL dit le: Novembre 29th, 2009 at 4:06 pm Said:
Conseils pour débutants Bon, je ne rapetisser pas mon CSS non plus, peut-être un projet beaucoup plus important bénéficieraient de minifying, mais le site en moyenne n'a pas vraiment besoin d'.
Pour ce qui est # 1 va, je pense que la formulation est ce que l'on jeter les gens off, au lieu de dire, "Bad Code», il conviendrait peut-safetycopy dire comme l'a suggéré, «Autre code».
Dernier blog FAQPAL's .. effet de bulles avec les CSS
favSHARE dit le: Novembre 30th, 2009 à 12:49 am Said:
Cet article a été partagé sur favSHARE.net. Aller voter le!
dernier blog favSHARE's .. 25 Tutoriels Mise en page Web
Jean-Patrick Smith affirme le: Décembre 11, 2009 à 11:15 Said:
Je crée généralement un fichier PHP qui inclut tous mes fichiers CSS, minifies elle, et ajoute de compression + expire en-têtes.
De cette façon, je n'ai pas d'accord avec le point # 1 ...
Quoi de plus important que d'avoir tous vos CSS sur une ligne est de réduire le nombre d'appels HTTP avec les sprites CSS et combinant toutes vos CSS / JS dans un seul fichier.