5 Stappen het schrijven van betere CSS-Deel II
Dit is het tweede deel van de 5 stappen het schrijven van betere CSS. Er zijn tal van CSS tutorials zijn beschikbaar op internet, maar de paar tutorials zijn nuttig. In deze handleiding vind je 5 stappen om betere CSS-code voor uw volgende project website schrijven. Ik hoop dat u deze tutorial genieten.
1. Houd CSS aangiften in een lijn
je moet altijd CSS aangiften in een lijn, het helpt bij het houden van uw CSS-bestand schoon en kleiner. Het helpt ook om ongewenste spaties en tekens.
Goede Code
; color : # 333333 ; background : #cccccc ; } h2 (font-size: 18px; color: # 333333; background: # cccccc;)
Bad Code
; color : # 333333 ; background : #cccccc ; } h2 (font-size: 18px; color: # 333333; background: # cccccc;)
2. Combineer Elements
Een van de beste manier om lijnen van de code op te slaan is door groepering selectors. Er zijn enkele voorbeelden van wat ik bedoelde.
Goede 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. Gebruik "Marge" naar Center Layout
Veel beginners tot CSS kan niet achterhalen waarom je niet gewoon kunt gebruiken float: center die gecentreerd effect op block-level elementen te bereiken. Was het maar zo eenvoudig! Helaas moet je gebruiken.
Code
# Container ( ; /* top, bottom - and left, right*/ margin: 0 auto; / * boven, onder - en links, rechts * / width: xxxpx; )
4. Je commentaar CSS
Het is een geweldig idee om commentaar te leveren uw code in secties. Om een commentaar, voegt / * achter de opmerking, en * / om, sluit als volgt:
Code
/******** CODE START HIER ********/
5. Gebruik CSS Compress Tools
Als u niet wilt dat uw tijd te verspillen met het bewerken van je oude style sheets kun je gewoon gebruik maken van online tools css comprimeren, maken het uw werk in seconden.
check deze online CSS-gereedschappen comprimeren ...
Css Tidy
Schoon Css
Css Optimizer
Flumpcakes Css optimizer
cssdrive Css Comperasor
W3C CSS Validator
Conclusie
Dit zijn slechts enkele van de tips die mij helpen om betere code te schrijven. Ik hoop dat ook tutorial zal je helpen om beter en schone code schrijven. Pas deze tips om uw huidige en volgende projecten, en u zal zeker waardering voor de inspanningen.
Als u denkt dat tutorial kan meer beter, U kunt met ons deelt. Reactie ons
Als u wilt meer tutorials van ons te ontvangen, kunt u overwegen een abonnement op onze feed met RSS of per e-mail.
Promoot ons
Verwante artikelen:
Als je genoten hebt van het lezen van dit artikel, kijk dan op andere aanverwante artikelen hieronder:
Revell zegt op: 27 november 2009 om 9:05 Said:
Hoi,
Allereerst leuk artikel! Er zijn niet veel artikelen die betrekking hebben op de schrijfstijl van CSS. Ik heb enkele gedachten over het eerste punt wel. Naar mijn mening is het beter om de lange schrijfstijl gebruiken terwijl de ontwikkeling en hebben een script "kleineren" je CSS bij gebruik op een live omgeving.
Dave zegt op: 27 november 2009 om 10:06 Said:
Ik ben het volledig eens met punt 1. Wanneer u 3 verklaringen, 1 regel code heb is groot, maar als er 6 of 7, het wordt echt moeilijk om te lezen.
Het enige dat misschien te 1KB redden? Ik snap het niet.
Anders dan dat een, een fatsoenlijke ideeën hier.
Dave's laatste blog .. 2 meer must-have CMS waarmee plugins voor WordPress
Nicolo 'Fasce zegt op: 27 november 2009 om 10:34 Said:
Ik ben het met Dave, het punt 1 verkeerd is, simpelweg omdat als je werkt in een team is het heel moeilijk om een een regel code te lezen.
Je moet ook schrijven van de code in alfabetische volgorde voor hetzelfde doel.
EJ Semeijn zegt op: 27 november 2009 om 10:57 Said:
Waarom doen we stoppen met het posten van deze tips? Internet is al vol van deze basics tips. En ik ook niet eens met # 1. Het maakt niet uw code gemakkelijker te begrijpen, maakt het gewoon moeilijker.
Mijn tips zou zijn om de pagina structuur in je CSS, afdelingen voor RESET, POSTEN, formulieren, HTML-elementen, lettertypes, enz. Op die manier maak je CSS gemakkelijker zal zijn om te begrijpen.
safetycopy zegt op: 27 november 2009 om 9:38 pm Said:
Ik ben het eens met de opmerkingen van een aantal andere mensen - punt 1's voorbeeld van slechte code is niet slecht code - het is gewoon een andere stijl. Dit bericht zou alleen nuttig zijn voor beginners compleet en we willen niet te beginnen met het onderwijzen hen slechte aannames al!
safetycopy's laatste blog .. Foto
Josh zegt op: 29 november 2009 om 4:38 Said:
Ik heb al die behalve de laatste. Ik vind het niet nuttig om comprimeren mijn css, maar in tegenstelling tot alle voorgaande lezers Ik ben er eens op punt # 1. Ik ben begonnen met het schrijven van mijn CSS in een lijn en het is enorm geweest. Het scrollen is veel verminderd. Ik denk dat dit een persoonlijke voorkeur. Iets dat helpt is dat de editor gebruik ik wikkelt de code naar de volgende regel, zodat er geen horizontaal scrollen.
Josh's laatste blog .. Addicted to Flickr
FAQPAL zegt op: 29 november 2009 at 4:06 pm Said:
Goede tips voor beginners, weet ik niet kleineren mijn CSS ofwel, misschien wel een veel groter project zouden profiteren van minifying, maar de gemiddelde site niet echt nodig is.
Wat # 1 gaat, denk ik dat de tekst is wat gooien mensen af, in plaats van te zeggen: "slechte code", misschien moeten zeggen als safetycopy heeft voorgesteld, "Alternate Code".
FAQPAL's laatste blog .. Bubble Effect met CSS
favSHARE zegt op: 30 november 2009 at 12:49 am Said:
Dit artikel is gedeeld op favSHARE.net. Ga en stem op!
favSHARE's laatste blog .. 25 Web Layout Tutorials
Jean-Patrick Smith zegt op: 11 december 2009 om 11:15 Said:
Ik meestal maak een PHP-bestand dat al mijn css-bestanden bevat, minifies het, en voegt compressie + verloopt headers.
Op die manier heb ik niet eens te zijn met punt # 1 ...
Wat is er belangrijker dan het hebben van al je CSS op een lijn is het aantal HTTP-vermindering gesprekken met CSS sprites en het combineren van al uw CSS / JS in een dossier.