Share
Natuurlijk kan iedereen CSS schrijven. Zelfs programma's doen het nu voor jou. Maar is de CSS goed? Hier zijn 5 tips om de jouwe te verbeteren.
Ernstig, gebruik altijd een reset van een bepaald type. Of u nu de Eric Meyer-reset, de YUI-reset of uw eigen aangepaste reset gebruikt, gebruik gewoon iets.
Het kan zo simpel zijn als het verwijderen van de marge en opvulling van alle elementen:
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, vorm, veldset, tabel, th, td margin: 0; opvulling: 0;
De Eric Meyer en YUI Resets zijn geweldig, maar voor mij gaan ze gewoon te ver. Ik heb het gevoel dat je uiteindelijk alles opnieuw instelt en vervolgens heel wat eigenschappen op de elementen opnieuw definieert. Dit is de reden waarom Eric Meyer aanbeveelt om niet alleen zijn reset stylesheet te nemen en het in uw projecten te laten vallen als er een effectievere manier is om het te gebruiken. Tweak het. Bouw erop. Maak het je eigen.
Oh en alsjeblieft, stop dit:
* marge: 0; opvulling: 0;
Het kost meer tijd om te verwerken en wat denk je dat er moet gebeuren met een keuzerondje wanneer je de opvulling verwijdert? Vormelementen kunnen soms funky dingen doen, dus het is het beste om sommige van hen met rust te laten.
Welk voorbeeld zou volgens jou sneller zijn? zoek de eigenschap marge-rechts?
div # header h1 z-index: 101; kleur: # 000; positie: relatief; regelhoogte: 24 px; margin-right: 48px; border-bottom: 1px solid #dedede; lettergrootte: 18px;
div # header h1 border-bottom: 1px solid #dedede; kleur: # 000; lettergrootte: 18px; regelhoogte: 24 px; margin-right: 48px; positie: relatief; z-index: 101;
Je kunt me niet vertellen dat voorbeeld 2 niet sneller is. Door uw eigenschappen te alfabetiseren, maakt u deze consistentie waarmee u minder tijd kwijt bent aan het zoeken naar een specifieke eigenschap.
Ik ken enkele mensen die zich op een manier organiseren en anderen die een andere organisatie organiseren, maar in mijn bedrijf hebben we een consensusbeslissing genomen om iedereen alfabetisch te organiseren. Het heeft zeker geholpen bij het werken met andermans code. Ik kruip ineen als ik in een stylesheet ga waar de eigenschappen niet alfabetisch gesorteerd zijn.
U moet uw stylesheet zo organiseren dat het gemakkelijk is om dingen te vinden en gerelateerde items staan dicht bij elkaar. Gebruik opmerkingen effectief. Dit is bijvoorbeeld de manier waarop ik mijn stylesheets structureer:
/ ***** Reset ***** / marge en opvulling uit elementen verwijderen / ***** Basiselementen ***** / Definieer stijlen voor basiselementen: body, h1-h6, ul, ol, a , p, etc. / ***** Generieke klassen ***** / Definieer stijlen voor eenvoudige dingen zoals zwevend opzij, verwijderen van een ondermarge op elementen, enz. Ja, deze zijn misschien niet zo semantisch als we zouden allemaal zoals, maar ze zijn noodzakelijk voor een efficiënte codering / ***** Basisindeling ***** / Definieer de basissjabloon: koptekst, voettekst, etc. Elementen die helpen bij het definiëren van de basislay-out van de site / **** * Header ***** / Definieer alle elementen in de kop / ***** Inhoud ***** / Definieer alle elementen in het inhoudsgebied / ***** Voettekst ***** / Definieer alle elementen in het voettekst / ***** Etc ***** / Ga door met het definiëren van de andere secties één voor één
Door opmerkingen te gebruiken en vergelijkbare elementen te groeperen, wordt het veel sneller om te vinden wat u zoekt.
Welke kant je ook kiest om te coderen, blijf erbij. Ik ben het zat met de hele 1-lijn versus meerdere regels voor je CSS-debat. Er is geen debat! Iedereen heeft zijn eigen mening, dus kies wat voor jou werkt en blijf bij het hele stylesheet.
Persoonlijk gebruik ik een combinatie van beide. Als een selector meer dan 3 eigenschappen heeft, verbreek ik deze naar meerdere regels:
div # header float: left; breedte: 100%; div # header div.column border-right: 1px solid #ccc; zweven: rechts; margin-right: 50px; opvulling: 10px; breedte: 300 px; div # header h1 float: left; positie: relatief; breedte: 250 px;
Het werkt voor mij omdat 3 eigenschappen gaat over wat op 1 regel in mijn teksteditor past voordat het naar een andere regel wordt gewikkeld. Dus zoek gewoon uit wat voor u werkt en wees consistent.
Durf niet je stylesheet aan te raken totdat je je markup hebt geschreven!
Wanneer ik me voorbereid op het snijden van een site, doorloop ik het hele document van de opening body-tag naar het afsluitende body-tag voordat ik zelfs een CSS-bestand maak. Ik voeg geen overtollige divs, id's of klassen toe. Ik zal enkele generieke divs toevoegen zoals koptekst, inhoud en voettekst omdat ik weet dat deze dingen zullen gaan bestaan.
Door eerst het document te markeren, zult u niet tegen ziekten zoals divitis en classitis aanlopen, die soms fataal kunnen zijn! Je hoeft alleen dat spul toe te voegen zodra je de CSS bent gaan schrijven en beseft dat je nog een haak nodig hebt om te bereiken wat je probeert te bereiken.
Gebruik CSS-afstammelende selectors om kinderenelementen te targeten; voeg niet alleen automatisch een klasse of ID toe aan het element. Denk eraan, CSS is waardeloos zonder een goed opgemaakt document.
* Noot van de redactie: ik kan dit punt niet genoeg benadrukken. Zoals Trevor zei, raak je CSS-bestand niet aan totdat de markup voor 100% voltooid is.
Dit zijn slechts enkele tips die me helpen om betere code te schrijven. Dit is geenszins het einde van de lijst. Terwijl ik anderen bedenk, zal ik het delen.
Welke tips heb je voor het schrijven van betere CSS?
Accentsconagua