CSS kan vara ett extremt kraftfullt markup språk för designers.
Den CSS som produceras är dock bara lika bra som de principer som följs av designern som skapar koden.
Medan du kanske tror att vem som helst kan vrida ut CSS, är det en stor skillnad mellan att skriva CSS och att producera toppnotera CSS.
För att säkerställa att du är på rätt spår är här åtta CSS-principer som varje webbdesigner ska följa.
Om du ska investera tiden i kodning av CSS, är det bara meningsfullt att ta sig tid till bekräfta koden som du skapar. Men det slutar aldrig att förvåna mig hur många designers hoppa över detta viktiga steg. Genom att validera din kod kan du städa upp eventuella problem och se till att det fungerar bra för dina besökare.
Förutom att validera din CSS-fil bör du också validera dina HTML- eller XHTML-filer. Innan du validerar dessa filer, se till att du har tagit dig tid att deklarera rätt HTML eller XHTML DOCTYPE. Att förklara din DOCTYPE kan verka som en vardaglig detalj, men jag kan inte räkna hur många diskussioner jag har haft med frustrerade designers som fortfarande har problem med en design, för att bara få reda på att det var för att de hade förklarat en föråldrad DOCTYPE (eller hade inte förklarat en DOCTYPE alls).
Oavsett om du arbetar på ett projekt ensamt eller med ett team av designers är det viktigt att dokumentera det arbete du skapar. Du kan noga se varför det här skulle vara viktigt inom ramen för ett designteam, men du kanske undrar varför det skulle vara viktigt om du arbetar med ett soloprojekt. Tja, det finns alltid en chans att ditt soloprojekt kommer att utvecklas till ett gruppprojekt, och om det händer är det mycket lättare att ha dokumentation till hands än att försöka backtracka och skapa den. Men även om ditt projekt förblir en enmansvisning kan du bli förvånad över hur användbar dokumentation är när du bestämmer dig för att återkomma till ett projekt efter att du inte tittat på det i ett år.
När det gäller att skapa dokumentation för CSS-kod, är den naturliga impulsen hos de flesta designers att lägga till den direkt till sin kod genom att placera den mellan / * och * /. Liksom många av principerna i denna lista finns det inget tekniskt felaktigt att ta detta tillvägagångssätt. Om du lägger till kommentarer direkt till din CSS-kod kommer dock storleken på filen att öka, vilket i sin tur kan öka laddningstiden och sakta ner en webbplatss övergripande prestanda. Om du är seriös om att skriva CSS-kod, bör du dokumentera din kod, men i en separat fil.
Även om jag ärligt tror att det är mer effektivt att dokumentera i en separat fil, vet jag att det finns många filer som helt enkelt inte håller med med den här praxisen. Om du vägrar att dokumentera i en separat fil, kan du använda en CSS-kompressor (även om du väljer att använda en separat fil för dokumentation, kan du fortfarande dra nytta av att använda en CSS-kompressor). Du kan använda detta CSS kompressor från CSS Drive Gallery, eller sök bara på Google för att hitta en alternativ CSS-kompressor.
Även om hack har blivit en acceptabel praxis för många inom CSS-samhället, betyder det inte att "CSS hacking" är en princip som du bör följa. Problemet med detta tillvägagångssätt för design är att det innebär att du avsiktligt letar efter en komplicerad lösning på problem. Medan du kanske tror att en eller två hackar då och då inte kommer att skada någon, kommer du in i tanken att "hacka igenom" några problem du stöter på kan ha en negativ inverkan på din övergripande design mentalitet.
Att undvika hackor är en rådgivning som experter har dispenserat under en tid. Du kan gå tillbaka hela vägen till 2003 och se det Peter-Paul Koch (som är en fulländad utvecklare och författare) har länge varnat för designers av konsekvenserna av CSS hackar: "Komplexitetsmonstret har återkommit, mitt i centrum för modern webbutveckling. Numera framstår det inte som ett oändligt nestat bord, men som ett oändligt komplicerat CSS hack. "
Eftersom divs ger en hög grad av flexibilitet kan det vara lätt att överanvända dem. Faktum är att denna fråga har blivit så vanligt bland konstruktörer att CSS-gemenskapen har skapat en egen term för att märka detta problem: divitus. För att undvika att bli offer för detta tillstånd, innan du automatiskt använder en div-tagg, bör du alltid fråga dig om det finns en faktisk HTML-tagg som får jobbet gjort för dig. Till exempel, istället för att skapa flera rubrikavsnitt, varför använder du inte HTML-rubrikkoderna som redan är tillgängliga, till exempel H1 och H2?
När du väl har tagit del av frågan om divs kommer du snabbt se fördelarna med att använda rätt HTML-tagg istället för att automatiskt skapa en ny div. Det kan inte bara minska den mängd kod du måste skapa (vilket sparar tid, tillsammans med att minska din webbplatss laddningstid), men det kommer också att ge din kod en mer logisk struktur.
Om du frågar en ny eller oerfaren designare om hur de bestämmer sig för att namnge sina klasser, kanske de säger att det inte spelar någon roll. Även om detta är tekniskt sant, är detta en mycket kortfattad syn på namngivna CSS-klasser. Även om det finns designers som faller i kategorin om att inte bry sig om CSS-klassnamn, finns det också designers som tycker om sina klassnamn, men de tar faktiskt fel inställning.
Eftersom jag inte bara vill slå dig över huvudet med teoretiska exempel, låt mig förklara det konkret. Låt oss säga att du skapar en klass för att styra en av rutorna på din sida. Lådan kommer att ligga längst ner på sidan, den kommer att innehålla kommentarer från läsare och du kommer att använda CSS för att ge den en brun bakgrund och styra vadderingen. Istället för att namnge den här .tan-boxen (vilket är vad många välsignade designers skulle göra), namnge den .comment-box. Anledningen till att .comment-box är ett bättre klassnamn än .tan-boxen är att om du bestämmer dig för att ändra bakgrundsfärgen till blå på vägen (eller besluta att flytta rutan från undersidan av sidan till ett annat område) , det kommer inte att förvirra dig eller någon annan formgivare som tittar över CSS för den webbplatsen.
Medan stenografi kan vara förvirrande för designers som precis börjat skriva sin egen CSS-kod, blir du en gång till när du vänder dig till stilen av stenografi, och blir en av de mest effektiva metoderna du kan följa som designer .
Det finns flera fördelar med att använda stenografi. För en, det minskar storleken på dina filer, vilket minskar belastningstiden för din webbplats. Det gör det inte bara lättare att organisera din kod utan gör det också enklare om du behöver göra ändringar i din kod i framtiden. När du börjar anpassa dig till shorthand bör du också träna i att skriva din kod på en rad (i stället för att sprida ut deklarationer över flera linjer).
Som designer är du mycket mer tekniskt benägen än någon annan i den vanliga befolkningen. Eftersom du är en del av en minoritet som lever och andas tekniken finns det många vanor du har som de flesta andra aldrig har tänkt på. Till exempel har du förmodligen gått iväg för att eliminera så mycket av "pappersspåret" som möjligt i ditt liv. Det är dock viktigt att komma ihåg att majoriteten av befolkningen fortfarande skriver ut saker regelbundet. Medan du antagligen taggar ett objekt med del.icio.us när du vill spara det för framtida referens kommer den genomsnittliga Internetanvändaren att skriva ut samma sida.
Eftersom människor fortfarande skriver ut information från Internet är det viktigt att använda CSS för att göra ditt innehåll skrivarvänligt . Besökare kommer att uppskatta allt arbete du har skapat för att skapa en vacker layout för webbplatsen de besöker, men när de bestämmer sig för att skriva ut en sida från den webbplatsen kommer de att uppskatta dig ännu mer när de inser att deras utskrift bara innehåller text som de vill ha (och ingen av den fantastiska grafiken som ser bra ut på sin dator men skulle slösa bort en massa bläck från sin skrivare). Eftersom CSS gör det ganska enkelt att se till att innehållet är korrekt formaterat när det skrivs ut, finns det ingen ursäkt för en sant designer att försumma detta steg i konstruktionsprocessen.
Du kanske tror att den här sista principen låter cliche, men det är förmodligen den viktigaste av hela listan. Om du är dedikerad till att vara den bästa designern, måste du se till att du alltid arbetar för att utöka din kunskap om CSS . Lyckligtvis är det lätt att göra om du har lust och vilja att begå dig att fortsätta din CSS-utbildning. Medan fortbildning kan vara en svår uppgift för individer i många branscher som inte är tekniska i naturen, eftersom Internet är bokstavligen grunden för CSS, är den mängd gratis resurser som du kan lära av bokstavligen oändliga. Om du tror att jag överdriver, skriv bara "CSS" i Google och du kommer att se att det finns 483.000.000 resultat för dig att bläddra.
Förutom att lära av online-resurser (och skriva ut resurser om du föredrar) kan du lära dig mycket av andra CSS-designers. Oavsett om du analyserar sitt arbete, lyssnar på de råd som de ger ut online eller pratar med dem i ansikte mot ansikte, kan du få mycket värde genom att interagera och eventuellt samarbeta med andra designers som är engagerade i att följa principerna om topp CSS-design och producerar fantastiska arbetsstycken.