Share
CSS is een taal die bijna wordt gebruikt elk ontwikkelaar op een gegeven moment. Hoewel het een taal is die we soms als vanzelfsprekend beschouwen, is deze krachtig en heeft hij veel nuances die onze ontwerpen kunnen helpen (of pijn doen). Hier zijn dertig van de beste CSS-praktijken die ervoor zorgen dat je solide CSS blijft schrijven en kostbare fouten vermijdt.
Als je er niet zeker van bent dat je sommige van deze dingen zelf kunt uitvoeren, kun je CSS-experts vinden op Envato Studio om je te helpen. Ze kunnen fouten corrigeren of uw site aanpassen voor u, en zij zijn ervaren ontwikkelaars, zodat ze tijdens het voltooien van de werkzaamheden de beste werkwijzen volgen.
CSS-experts op Envato Studio De leesbaarheid van uw CSS is ongelooflijk belangrijk, hoewel de meeste mensen over het hoofd zien waarom het is belangrijk. Grote leesbaarheid van uw CSS maakt het veel gemakkelijker om te onderhouden in de toekomst, omdat u elementen sneller zult kunnen vinden. U zult ook nooit weten wie mogelijk later naar uw code moet kijken.
.someDiv background: red; opvulling: 2em; rand: 1px effen zwart;
.someDiv background: red; opvulling: 2em; rand: 1px effen zwart;
Beide oefeningen zijn perfect aanvaardbaar, hoewel je over het algemeen zult merken dat groep twee mishandelt groep één! Onthoud - kies de methode die het beste voor u is. Dat is het enige dat telt.
Langs de lijnen van het leesbaar houden van uw code is ervoor te zorgen dat de CSS consistent is. U moet beginnen met het ontwikkelen van uw eigen "subtaal" van CSS waarmee u snel dingen kunt benoemen. Er zijn bepaalde klassen die ik in bijna elk thema maak, en ik gebruik elke keer dezelfde naam. Ik gebruik bijvoorbeeld ".caption-right" om afbeeldingen te zweven die een bijschrift rechts bevatten.
Denk aan dingen zoals het wel of niet gebruiken van onderstrepingstekens of streepjes in de namen van uw ID's en klassen, en in welke gevallen u ze zult gebruiken. Wanneer u begint met het maken van uw eigen standaarden voor CSS, zult u veel vaardiger worden.
Sommige ontwerpers puristen spotten met de gedachte aan het gebruik van een CSS-framework bij elk ontwerp, maar ik geloof dat als iemand anders de tijd heeft genomen om een tool te behouden die de productie versnelt, waarom het wiel opnieuw uitvinden? Ik weet dat frameworks niet in alle gevallen moeten worden gebruikt, maar meestal kunnen ze helpen.
Veel ontwerpers hebben hun eigen raamwerk dat ze in de loop van de tijd hebben gemaakt, en dat is ook een geweldig idee. Het helpt de consistentie binnen de projecten te behouden.
Het is minder een kwestie van het wiel opnieuw uitvinden, en meer een kwestie van begrijpen hoe het wiel werkt.
Als je net aan de slag gaat met CSS, zou ik persoonlijk aanbevelen dat je minimaal een jaar wegblijft van deze frameworks. Anders verwissel je jezelf alleen. Leer CSS ... en neem vervolgens snelkoppelingen!
De meeste CSS-frameworks hebben een reset ingebouwd, maar als je er nog geen gaat gebruiken tenminste overweeg een reset te gebruiken. Met resets worden inconsistenties in de browser, zoals hoogtes, lettergroottes, marges, koppen, enzovoort, grotendeels geëlimineerd. Met de reset kan uw lay-out er consistent uitzien in alle browsers.
De MeyerWeb is een populaire reset, samen met de ontwikkelaarreset van Yahoo. Of u kunt altijd uw eigen reset uitvoeren, als dat uw verbeelding prikkelt.
Het is altijd verstandig om uw stylesheet zodanig op te stellen dat u snel onderdelen van uw code kunt vinden. Ik raad een top-down-indeling aan die stijlen aanpast zoals deze in de broncode voorkomen. Een voorbeeld van een stylesheet kan dus als volgt worden besteld:
/ ****** hoofdinhoud ********* / styles goes here ... / ****** footer ********* / styles ga hier ...
Elementen in een stylesheet delen soms eigenschappen. In plaats van de vorige code te herschrijven, waarom combineert u ze dan niet gewoon? Uw elementen h1, h2 en h3 kunnen bijvoorbeeld allemaal hetzelfde lettertype en dezelfde kleur delen:
h1, h2, h3 font-family: tahoma, colour: # 333
We zouden unieke kenmerken aan elk van deze kopstijlen kunnen toevoegen als we dat wilden (bijv. H1 size: 2.1em) later in de stylesheet.
Veel ontwerpers maken hun CSS op hetzelfde moment waarop ze de HTML maken. Het lijkt logisch om beide tegelijkertijd te maken, maar eigenlijk zul je zelfs nog meer tijd besparen als je de geheel HTML-mockup eerst. De redenering achter deze methode is dat u alle elementen van uw sitelay-out kent, maar u weet niet welke CSS u met uw ontwerp nodig heeft. Door eerst de HTML-lay-out te maken, kunt u de hele pagina als geheel visualiseren en kunt u uw CSS op een meer holistische, top-down manier bedenken.
Soms is het nuttig om meerdere klassen aan een element toe te voegen. Laten we zeggen dat je een hebt
Je kunt zoveel klassen toevoegen als je wilt (ruimte gescheiden) voor elke aangifte.
Als u naar uw HTML moet terugkeren om de presentatie (of stijl) van de pagina te wijzigen, doet u het verkeerd!
De doctype-verklaring is van groot belang voor het al dan niet valideren van uw markup en CSS. In feite kan het hele uiterlijk van uw site sterk veranderen, afhankelijk van de DOCTYPE die u declareert.
Meer informatie over welke DOCTYPE moet worden gebruikt bij A List Apart.
Ik gebruik het doctype van HTML5 voor al mijn projecten.
"Wat aardig is aan deze nieuwe DOCTYPE, is dat alle huidige browsers (IE, FF, Opera, Safari) ernaar kijken en de inhoud in de standaardmodus veranderen - ook al implementeren ze HTML5 niet. begin vandaag met het schrijven van webpagina's met HTML5 en laat ze heel, heel, heel lang mee. "
- John Resig
U kunt uw code aanzienlijk verkleinen door steno te gebruiken bij het maken van uw CSS. Voor elementen zoals opvulling, marge, lettertype en enkele andere, kunt u stijlen combineren op één regel. Een div heeft bijvoorbeeld de volgende stijlen:
#crayon margin-left: 5px; margin-right: 7px; margin-top: 8px;
Je zou die stijlen op één regel kunnen combineren, zoals:
#crayon margin: 8px 7px 0px 5px; // top, right, bottom en left values, respectievelijk.
Als u meer hulp nodig heeft, vindt u hier een uitgebreide gids over CSS-verkorte eigenschappen.
Net als elke andere taal is het een goed idee om je code in secties te becommentariëren. Als u een opmerking wilt toevoegen, voegt u / * achter de opmerking toe en * / om deze te sluiten, zoals:
/ * Zo geef je commentaar op CSS * /
Blokelementen zijn elementen die van nature elke regel wissen nadat ze zijn gedeclareerd, over de hele breedte van de beschikbare ruimte. Inline-elementen nemen alleen zoveel ruimte in als ze nodig hebben en dwingen een nieuwe regel niet af nadat ze zijn gebruikt.
Hier zijn de lijsten met elementen die inline of blok zijn:
span, a, strong, em, img, br, input, abbr, acronym
En de blokelementen:
div, h1 ... h6, p, ul, li, table, blockquote, pre, form
Hoewel dit meer een frivole tip is, kan het handig zijn om snel te scannen.
# suikerspin kleur: #fff; zweven: links; lettertype: hoogte: 200 px; marge: 0; opvulling: 0; breedte: 150 px;
CSS-compressors helpen de CSS-bestandsgrootte te verkleinen door regelafbrekingen, witte spaties en elementen te combineren. Deze combinatie kan de bestandsgrootte aanzienlijk verminderen, waardoor het laden van de browser wordt versneld. CSS Optimizer en CSS Compressor zijn twee uitstekende online tools die CSS kunnen verkleinen.
Opgemerkt moet worden dat het inkrimpen van je CSS prestaties kan opleveren, maar je verliest een deel van de leesbaarheid van je CSS.
U zult merken dat er bepaalde stijlen zijn die u steeds opnieuw toepast. In plaats van die specifieke stijl aan elke ID toe te voegen, kunt u generieke klassen maken en deze toevoegen aan de ID's of andere CSS-klassen (met tip # 8).
Ik merk bijvoorbeeld dat ik zweven gebruik: recht en zwevend: overgebleven in mijn ontwerpen. Dus ik voeg eenvoudig de klassen .links en .recht toe aan mijn stylesheet en verwijs ernaar in de elementen.
.links float: links .recht float: right...
Op deze manier hoef je niet constant "float: links" toe te voegen aan alle elementen die moeten worden gereden.
Veel beginners tot CSS kunnen niet achterhalen waarom je het niet eenvoudig kunt gebruiken zweven: midden om dat gecentreerde effect op elementen op blokniveau te bereiken. Was het maar zo eenvoudig! Helaas moet je gebruiken
marge: 0 auto; // top, bodem - en linker, juiste waarden, respectievelijk.
om divs, alinea's of andere elementen in je lay-out te centreren.
Als je begint, is de verleiding groot om een div te omwikkelen met een ID of klasse rond een element en er een stijl voor te maken.
Koptekst
Soms lijkt het misschien eenvoudiger om alleen unieke elementstijlen te maken, zoals het bovenstaande voorbeeld, maar je begint je stylesheet te vervuilen. Dit zou prima hebben gewerkt:
Koptekst
Dan kun je eenvoudig een stijl toevoegen aan de h1 in plaats van aan een parent-div.
Als je Firebug nog niet hebt gedownload, stop en ga het doen. Ernstig. Deze kleine tool is een moet hebben voor elke webontwikkelaar. Onder de vele functies die worden meegeleverd met de Firefox-extensie (foutopsporing JavaScript, HTML inspecteren, fouten zoeken), kunt u CSS ook in realtime visueel inspecteren, wijzigen en bewerken. Je kunt meer leren over wat Firebug doet op de officiële Firebug-website.
Vermijd zo weinig mogelijk browser-specifieke hacks. Er is een enorme druk om ervoor te zorgen dat ontwerpen in alle browsers consistent zijn, maar het gebruik van hacks maakt uw ontwerpen in de toekomst alleen maar moeilijker te onderhouden. Bovendien kan het gebruik van een resetbestand (zie # 4) bijna alle renderingonregelmatigheden tussen browsers elimineren.
Absolute positionering is een handig aspect van CSS waarmee u kunt definiëren waar precies een element moet op een pagina op de exacte pixel worden geplaatst. Vanwege de absolute veronachtzaming van absolute positionering voor andere elementen op de pagina, kunnen de lay-outs behoorlijk behaard worden als er meerdere absoluut gepositioneerde elementen rond de lay-out lopen.
Tekst-transformatie is een zeer nuttige CSS-eigenschap waarmee u kunt "standaardiseren" hoe tekst wordt geformatteerd op uw site. Stel dat u bijvoorbeeld een aantal kopteksten wilt maken die alleen kleine letters bevatten. Voeg gewoon de eigenschap text-transform toe aan de header-stijl, zoals:
tekst-transformatie: kleine letters;
Nu zijn alle letters in de kop standaard standaard kleine letters. Tekst-transformatie stelt u in staat om uw tekst (hoofdletters, hoofdletters of kleine letters) met een eenvoudige eigenschap te wijzigen.
Vaak zullen mensen een afbeelding gebruiken voor hun koptekst, en vervolgens display gebruiken: geen of een negatieve marge om de h1 van de pagina te laten zweven. Matt Cutts, hoofd van Google's Webspam-team, heeft officieel gezegd dat dit een slecht idee is, omdat Google denkt dat het spam is.
Zoals de heer Cutts expliciet zegt, vermijd het verbergen van de tekst van uw logo met CSS. Gebruik gewoon de alt-tag. Hoewel velen beweren dat je CSS nog steeds kunt gebruiken om een h1-tag te verbergen zolang de h1 hetzelfde is als de logontekst, geef ik er de voorkeur aan om zich aan de veilige kant te vergissen.
Validatie van uw CSS en XHTML biedt meer dan alleen een gevoel van trots: het helpt u snel fouten in uw code te herkennen. Als je aan een ontwerp werkt en om wat voor reden dan ook dingen gewoon niet goed uitzien, probeer dan de markup en CSS-validator uit te voeren en te zien welke fouten opduiken. Meestal zul je merken dat je bent vergeten om ergens een div te sluiten, of een gemiste puntkomma in een CSS-eigenschap.
Er is altijd een sterk debat geweest over de vraag of het beter is om pixels (px) of ems (em) te gebruiken bij het definiëren van lettergroottes. Pixels zijn een meer statische manier om lettergrootten te definiëren en ems zijn meer schaalbaar met verschillende browserformaten en mobiele apparaten. Met de komst van veel verschillende soorten webbrowsen (laptop, mobiel, etc.), worden ems steeds meer de standaard voor metingen van lettergrootte, omdat ze de grootste vorm van flexibiliteit bieden. Je kunt meer lezen over waarom je ems voor lettergroottes zou moeten gebruiken in deze doordachte forumthread. About.com heeft ook een geweldig artikel over de verschillen tussen de metingen.
Lijsten zijn een uitstekende manier om gegevens in een gestructureerd formaat weer te geven waarbij de stijl eenvoudig kan worden aangepast. Dankzij de eigenschap display hoeft u de lijst niet alleen als tekstattribuut te gebruiken. Lijsten zijn ook ideaal voor het maken van navigatiemenu's en dergelijke.
Veel beginners gebruiken divs om elk element in de lijst te maken, omdat ze niet begrijpen hoe ze op de juiste manier kunnen worden gebruikt. Het is de moeite waard om in de toekomst elementen uit de leerlijst op te poetsen om gegevens te structureren.
Je zult vaak navigatielinks zien zoals:
Home Over diensten Contact
Hoewel dit technisch gezien prima werkt na een beetje CSS, is het slordig. Als u een toevoegt lijst van links, gebruik een ongeordende lijst, gekke gans!
Het is gemakkelijk om onbewust extra selectors aan onze CSS toe te voegen die het stylesheet afbreekt. Een bekend voorbeeld van het toevoegen van extra selectors is met lijsten.
body #container .someclass ul li ...
In dit geval, alleen de .someclass li zou prima hebben gewerkt.
.someclass li ...
Het toevoegen van extra selectors brengt Armageddon of iets dergelijks niet met zich mee, maar ze zorgen ervoor dat je CSS niet zo eenvoudig en schoon mogelijk is.
Verschillende browsers geven elementen anders weer. IE geeft bepaalde elementen anders weer dan Firefox. IE 6 rendert elementen anders dan IE 7 en IE 8. Hoewel de browsers zich meer en meer aan de W3C-standaarden gaan houden, zijn ze nog steeds niet perfect (* hoest IE hoest *).
Een van de belangrijkste verschillen tussen versies van browsers is hoe opvulling en marges worden weergegeven. Als u nog geen reset gebruikt, kunt u de marge en opvulling voor alle elementen op de pagina definiëren, om aan de veilige kant te staan. U kunt dit snel doen met een globale reset, zoals:
* margin: 0; opvulling: 0;
Nu allemaal elementen hebben een opvulling en marge van 0, tenzij gedefinieerd door een andere stijl in het stijlblad.
Objectgeoriënteerd programmeren is de scheiding van elementen in de code zodat ze gemakkelijker hergebruik kunnen behouden. Object-Oriented CSS volgt hetzelfde principe van het scheiden van verschillende aspecten van de stylesheet (s) in meer logische secties, waardoor uw CSS modulair en herbruikbaarder wordt.
Hier is een diavoorstelling van hoe Object Oriented CSS werkt:
Van Nicole Sullivan.Als het CSS / XHTML-spel nieuw voor je is, is OOCSS in het begin misschien een uitdaging. Maar de principes zijn geweldig om te begrijpen voor object-georiënteerd programmeren in het algemeen.
Afhankelijk van de complexiteit van het ontwerp en de grootte van de site, is het soms gemakkelijker om kleinere, meerdere stylesheets te maken in plaats van één gigantisch stylesheet. Afgezien van het feit dat het voor de ontwerper gemakkelijker te beheren is, kunt u met meerdere stylesheets CSS weglaten op bepaalde pagina's die ze niet nodig hebben.
Ik zou bijvoorbeeld een polling-programma kunnen hebben met een unieke set stijlen. In plaats van de poll-stijlen op te nemen in het hoofdstijlblad, kon ik gewoon een maken poll.css en de stylesheet alleen naar de pagina's die de poll weergeven.
Als je merkt dat je ontwerp er een beetje wonkig uitziet, is de kans groot dat het is omdat je een afsluiting hebt achtergelaten
Accentsconagua