CSS kan een extreem krachtige opmaaktaal zijn voor ontwerpers.
De CSS die wordt geproduceerd, is echter slechts zo goed als de principes die worden gevolgd door de ontwerper die de code maakt.
Hoewel je misschien denkt dat iedereen CSS kan uitdrijven, is er een groot verschil tussen het schrijven van CSS en het produceren van eersteklas CSS.
Om ervoor te zorgen dat u op de goede weg bent, zijn hier acht CSS-principes die elke webontwerper zou moeten volgen.
Als je de tijd gaat investeren in het coderen van CSS, is het alleen zinvol om de tijd te nemen bevestigen de code die u maakt. Het blijft echter verbazen hoeveel ontwerpers deze cruciale stap overslaan. Als u uw code valideert, kunt u eventuele problemen opruimen en ervoor zorgen dat deze goed werken voor uw bezoekers.
Naast het valideren van uw CSS-bestand, moet u ook uw HTML- of XHTML-bestanden valideren. Voordat u deze bestanden valideert, moet u ervoor zorgen dat u de tijd hebt genomen om de juiste HTML- of XHTML-DOCTYPE te declareren. Het aangeven van je DOCTYPE lijkt misschien een alledaags detail, maar ik kan niet tellen hoeveel discussies ik heb gehad met gefrustreerde ontwerpers die nog steeds problemen hadden met een ontwerp, om erachter te komen dat het kwam omdat ze een verouderde DOCTYPE (of in het geheel geen DOCTYPE had verklaard).
Of u nu alleen aan een project werkt of met een team van ontwerpers, het is belangrijk om het werk dat u maakt te documenteren. Je kunt waarschijnlijk begrijpen waarom dit belangrijk zou zijn in de context van een ontwerpteam, maar je vraagt je misschien af waarom het ertoe doet als je aan een soloproject werkt. Wel, er is altijd een kans dat je soloproject uiteindelijk evolueert naar een groepsproject. Als dit gebeurt, is het veel gemakkelijker om documentatie bij de hand te hebben dan te proberen terug te komen en het te maken. Maar zelfs in het geval dat uw project een one-man-show blijft, zult u misschien verbaasd zijn hoe nuttig documentatie is wanneer u besluit een project opnieuw te bezoeken nadat u er een jaar lang niet naar hebt gekeken.
Als het gaat om het maken van documentatie voor CSS-code, is de natuurlijke impuls van de meeste ontwerpers om het direct aan hun code toe te voegen door het tussen / * en * / te plaatsen. Zoals veel van de principes in deze lijst, is er niets technisch onjuists aan het nemen van deze benadering. Als u echter rechtstreeks opmerkingen aan uw CSS-code toevoegt, wordt het bestand groter, wat op zijn beurt de laadtijden kan verlengen en de algemene prestaties van een website kan vertragen. Als je serieus bent over het schrijven van eersteklas CSS-code, moet je je code documenteren, maar in een apart bestand.
Hoewel ik eerlijk geloof dat het effectiever is om in een apart bestand te documenteren, weet ik dat er veel bestanden zijn die het eenvoudigweg niet eens zijn met deze praktijk. Als u weigert om te documenteren in een apart bestand, is het beste wat u kunt doen is het gebruik van een CSS-compressor (in feite, zelfs als u ervoor kiest om een afzonderlijk bestand te gebruiken voor documentatie, kunt u nog steeds profiteren van een CSS-compressor). Je kunt dit gebruiken CSS-compressor van CSS Drive Gallery, of zoek gewoon op Google om een alternatieve CSS-compressor te vinden.
Hoewel hacks binnen de CSS-gemeenschap een acceptabele praktijk is geworden voor velen, betekent dit niet dat 'CSS-hacking' een principe is dat u moet volgen. Het probleem met deze benadering van ontwerpen is dat het betekent dat je opzettelijk op zoek bent naar een gecompliceerde oplossing voor problemen. Hoewel je misschien denkt dat een of twee hacks zo nu en dan geen kwaad zullen doen, kan het beginnen met het doordenken van problemen die je tegenkomt een negatief effect hebben op je algehele ontwerpmentaliteit.
Het vermijden van hacks is een advies dat experts al een tijdje uitdelen. Je kunt helemaal teruggaan naar 2003 en dat zien Peter-Paul Koch (die een volleerd ontwikkelaar en auteur is) waarschuwt ontwerpers al een tijdje over de implicaties van CSS-hacks: "Het complexiteitsmonster is teruggekeerd, midden in de moderne webontwikkeling. Tegenwoordig manifesteert het zich niet als een eindeloos geneste tafel, maar als een eindeloos gecompliceerde CSS-hack. "
Omdat div's een hoge mate van flexibiliteit bieden, kan het eenvoudig zijn ze te veel te gebruiken. In feite is dit probleem zo gewoon geworden onder ontwerpers dat de CSS-gemeenschap een eigen term heeft gemaakt om dit probleem te benoemen: divitus. Om te voorkomen dat u het slachtoffer wordt van deze aandoening, moet u, voordat u automatisch een div-tag gebruikt, uzelf altijd afvragen of er een echte HTML-tag is die de klus voor u zal klaren. Bijvoorbeeld, in plaats van het creëren van meerdere header divs, waarom gebruik je dan niet de HTML-heading-tags die al beschikbaar zijn, zoals H1 en H2?
Zodra u de kwestie van divs in overweging neemt, ziet u snel de voordelen van het gebruik van de juiste HTML-tag in plaats van automatisch een nieuwe div te maken. Dit kan niet alleen de hoeveelheid code verminderen die u moet maken (waardoor u tijd bespaart, en tegelijkertijd de laadtijd van uw website vermindert), maar het geeft uw code ook een meer logische structuur.
Als je een nieuwe of onervaren ontwerper vraagt hoe ze hun klassen een naam geven, kunnen ze zeggen dat het er niet echt toe doet. Hoewel dit technisch waar is, is dit een zeer kortzichtige weergave van het benoemen van CSS-klassen. Hoewel er ontwerpers zijn die behoren tot de categorie van het niet geven om CSS-klassenamen, zijn er ook ontwerpers die wel degelijk nadenken over hun klassenamen, maar ze nemen de verkeerde aanpak.
Omdat ik je niet simpelweg wil verslaan met theoretische voorbeelden, wil ik dit in concrete bewoordingen uitleggen. Stel dat u een klasse maakt om een van de vakken op uw pagina te beheren. Het vak bevindt zich onderaan de pagina, het bevat opmerkingen van lezers en u gebruikt CSS om het een kleurige achtergrond te geven en de opvulling te regelen. In plaats van deze .tan-box te benoemen (wat veel goedbedoelende ontwerpers zouden doen), noem het maar .com-box. De reden dat .comment-box een betere klassenaam is dan .tan-box is omdat als je besluit de achtergrondkleur te veranderen in blauw op de weg (of besluit de doos van de onderkant van de pagina naar een ander gebied te verplaatsen) , het zal u of een andere ontwerper die de CSS voor die website bekijkt niet verwarren.
Hoewel stenografie verwarrend kan zijn voor ontwerpers die net begonnen zijn met het schrijven van hun eigen CSS-code, wordt het een van de meest effectieve methoden die je als ontwerper kunt volgen als je eenmaal gewend bent aan de stijl van steno .
Er zijn meerdere voordelen aan het gebruik van steno. Ten eerste worden uw bestanden kleiner, waardoor de laadtijd van uw website afneemt. Bovendien maakt het het niet alleen eenvoudiger om uw code te ordenen, maar wordt het ook eenvoudiger als u in de toekomst wijzigingen in uw code moet aanbrengen. Terwijl je je aan steno begint aan te passen, moet je ook in de praktijk komen om je code op één regel te schrijven (in plaats van declaraties over meerdere regels te verspreiden).
Als ontwerper ben je veel technischer geneigd dan wie dan ook in de reguliere populatie. Omdat je deel bent van een minderheid die leeft en de technologie ademt, zijn er veel gewoonten die je hebt waar de meeste andere mensen nog nooit over hebben nagedacht. Je hebt bijvoorbeeld waarschijnlijk je best gedaan om zoveel mogelijk van de "papieren sporen" in je leven te elimineren. Het is echter belangrijk om te onthouden dat de meerderheid van de bevolking nog steeds dingen op regelmatige basis afdrukt. Terwijl u een item met del.icio.us waarschijnlijk tagt wanneer u het wilt opslaan voor toekomstig gebruik, zal de gemiddelde internetgebruiker diezelfde pagina afdrukken.
Omdat mensen nog steeds informatie van internet afdrukken, is het belangrijk om CSS te gebruiken om uw inhoud printervriendelijk te maken . Bezoekers zullen al het werk waarderen dat u heeft besteed aan het maken van een prachtige lay-out voor de website die ze bezoeken, maar wanneer zij besluiten een pagina van die website af te drukken, zullen zij u zelfs meer waarderen wanneer zij zich realiseren dat hun afdruk alleen de tekst die ze willen hebben (en geen van de verbluffende grafische afbeeldingen die er geweldig uitzien op hun computer, maar een hoop inkt van hun printer zouden verspillen). Omdat CSS het vrij eenvoudig maakt om ervoor te zorgen dat inhoud correct wordt opgemaakt wanneer deze wordt afgedrukt, is er geen excuus voor een echte ontwerper om deze stap van het ontwerpproces te verwaarlozen.
Je zou kunnen denken dat dit laatste principe cliché klinkt, maar het is misschien wel de belangrijkste van de hele lijst. Als je toegewijd bent om de best mogelijke ontwerper te zijn, moet je ervoor zorgen dat je altijd bezig bent om je kennis van CSS uit te breiden . Gelukkig is dit eenvoudig te doen als je het verlangen en de wil hebt om je in te zetten voor het voortzetten van je CSS-opleiding. Hoewel permanente educatie een moeilijke taak kan zijn voor individuen in veel branches die niet-technisch van aard zijn, omdat internet letterlijk de basis is voor CSS, is de hoeveelheid gratis bronnen waar je van kunt leren letterlijk eindeloos. Als u denkt dat ik overdrijf, typt u 'CSS' in Google en ziet u dat er 483.000.000 resultaten zijn om door te bladeren.
Naast het leren van online bronnen (en afdrukbronnen als u dat wilt), kunt u veel leren van andere CSS-ontwerpers. Of je nu hun werk analyseert, luistert naar het advies dat ze online geven of met ze praten in face-to-face situaties, je kunt veel waarde krijgen door samen te werken en mogelijk samen te werken met andere ontwerpers die zich committeren aan het volgen van de principes van eersteklas CSS-ontwerp en het produceren van geweldige stukken werk.