CSS kan være et ekstremt kraftfuldt markupsprog for designere.
Den CSS, der er produceret, er dog kun så god som de principper, der følges af designeren, der skaber koden.
Mens du måske tror, at nogen kan skrue ud CSS, er der stor forskel på at skrive CSS og producere top notch CSS.
For at sikre at du er på rette spor, er her otte CSS principper, som hver webdesigner skal følge.
Hvis du vil investere tid i kodning af CSS, er det kun fornuftigt at tage tid til validere Koden, du opretter. Men det ophører aldrig med at forbløffe mig, hvor mange designere springe over dette vigtige skridt. Ved at validere din kode kan du rydde op for eventuelle problemer og sikre, at det fungerer godt for dine besøgende.
Udover at validere din CSS-fil, bør du også validere dine HTML- eller XHTML-filer. Før du validerer disse filer, skal du sørge for at have taget tid til at erklære den korrekte HTML eller XHTML DOCTYPE. At afklare din DOCTYPE kan virke som en dagligdags detaljer, men jeg kan ikke tælle, hvor mange diskussioner jeg har haft med frustrerede designere, som fortsat har problemer med et design, for kun at finde ud af, at det var fordi de havde erklæret en forældet DOCTYPE (eller ikke havde erklæret en DOCTYPE overhovedet).
Uanset om du arbejder alene på et projekt eller med et team af designere, er det vigtigt at dokumentere det arbejde, du opretter. Du kan sikkert se hvorfor dette ville være vigtigt inden for rammerne af et designteam, men du kan måske undre sig over, hvorfor det ville have betydning, hvis du arbejder på et soloprojekt. Nå er der altid en chance for, at dit soloprojekt i sidste ende vil udvikle sig til et gruppeprojekt, og hvis det sker, er det meget lettere at have dokumentation til rådighed end at forsøge at backtrack og oprette den. Selv hvis dit projekt forbliver et etmanshow, kan du dog være overrasket over, hvor nyttig dokumentation er, når du beslutter dig for at genoptage et projekt efter ikke at se det i et år.
Når det drejer sig om at oprette dokumentation for CSS-koden, er den naturlige impuls for de fleste designere at tilføje den direkte til deres kode ved at placere den mellem / * og * /. Ligesom mange af principperne i denne liste er der intet teknisk forkert at tage denne tilgang. Hvis du tilføjer kommentarer direkte til din CSS-kode, øges størrelsen på filen, som igen kan øge indlæsningstiderne og sænke et websteds generelle præstationer. Hvis du er seriøs om at skrive top notch CSS-kode, skal du dokumentere din kode, men i en separat fil.
Selvom jeg ærligt tror, at det er mere effektivt at dokumentere i en separat fil, ved jeg, at der er masser af filer, der simpelthen ikke er enige med denne praksis. Hvis du nægter at dokumentere i en separat fil, er det næste bedste, du kan gøre, at bruge en CSS kompressor (faktisk, selvom du vælger at bruge en separat fil til dokumentation, kan du stadig få fordel ved at bruge en CSS kompressor). Du kan bruge dette CSS kompressor fra CSS Drive Gallery, eller søg blot Google for at finde en alternativ CSS-kompressor.
Selvom hacks er blevet en acceptabel praksis for mange inden for CSS-samfundet, betyder det ikke, at "CSS hacking" er et princip, som du bør følge. Problemet med denne tilgang til design er, at det betyder, at du forsætligt søger en kompliceret løsning på problemer. Mens du måske tror, at en eller to hacks hver gang og da ikke vil skade nogen, kommer man i tankerne om at "hacke igennem" eventuelle problemer, du oplever, kan have en negativ indvirkning på din overordnede design mentalitet.
At undgå hack er et råd, som eksperter har dispenseret i nogen tid. Du kan gå helt tilbage til 2003 og se det Peter-Paul Koch (som er en veludviklet udvikler og forfatter) har advaret designere af konsekvenserne af CSS hacks i nogen tid: "Kompleksitetsmonsteret er kommet tilbage lige midt i moderne webudvikling. I dag manifesterer man sig ikke som et uendeligt indlejret bord, men som en uendelig kompliceret CSS hack. "
Fordi divs giver en høj grad af fleksibilitet, kan det være nemt at overan bruge dem. Faktisk er dette problem blevet så almindeligt blandt designere, at CSS-samfundet har oprettet sin egen betegnelse for at mærke dette problem: divitus. For at undgå at blive offer for denne betingelse, skal du altid spørge dig selv, om der er en egentlig HTML-kode, der får jobbet til dig, før du automatisk bruger en div-tag. For eksempel, i stedet for at oprette flere overskriftsdele, hvorfor bruger du ikke de HTML-overskriftstag, der allerede er tilgængelige, f.eks. H1 og H2?
Når du først begynder at tage spørgsmålet om divs i betragtning, vil du hurtigt se fordelene ved at bruge den relevante HTML-tag i stedet for automatisk at oprette en ny div. Det kan ikke kun reducere mængden af kode, du skal oprette (hvilket sparer tid sammen med at reducere belastningstiden på dit website), men det vil også give din kode en mere logisk struktur.
Hvis du spørger en ny eller uerfarne designer om, hvordan de beslutter sig for at navngive deres klasser, kan de måske sige, at det ikke rigtig betyder noget. Selvom dette er teknisk sandt, er dette en meget kortsynt visning af navngivning af CSS-klasser. Selv om der er designere, der falder ind under kategorien ikke bekymrer sig om CSS klassenavne, er der også designere, der tænker på deres klassenavne, men de tager faktisk den forkerte tilgang.
Da jeg ikke bare vil slå dig over hovedet med teoretiske eksempler, lad mig forklare det konkret. Lad os sige, at du opretter en klasse for at kontrollere en af felterne på din side. Kassen vil være placeret nederst på siden, den vil indeholde kommentarer fra læsere, og du vil bruge CSS til at give den en brun baggrund og kontrollere polstring. I stedet for at navngive denne .tan-boks (hvilket er, hvad mange velmenende designere ville gøre), navngiv det .comment-box. Årsagen til at .comment-box er et bedre klassenavn end .tan-box er fordi hvis du beslutter dig for at ændre baggrundsfarven til blå ned ad vejen (eller beslutte at flytte kassen fra bunden af siden til et andet område) , det vil ikke forvirre dig eller nogen anden designer, der kigger over CSS for den pågældende hjemmeside.
Mens stenografi kan være forvirrende for designere, der lige er begyndt at skrive deres egen CSS-kode, når du er vant til stilen i stenografi, bliver det en af de mest effektive metoder, du kan følge som designer .
Der er flere fordele ved brugen af stenografi. For det mindsker det størrelsen af dine filer, hvilket vil reducere belastningstiden på dit websted. Det gør det ikke bare lettere at organisere din kode, men gør det også lettere, hvis du skal ændre dine kode i fremtiden. Som du begynder at tilpasse til stenografi, bør du også få i gang med at skrive din kode på en linje (i stedet for at udbrede deklarationer over flere linjer).
Som designer er du meget mere teknisk tilbøjelig end nogen anden i den almindelige befolkning. Fordi du er en del af et mindretal, der lever og indånder teknologi, er der mange vaner du har, som de fleste andre aldrig har tænkt på. For eksempel har du sandsynligvis gået ud af din måde for at fjerne så meget af "papirsporet" som muligt i dit liv. Det er dog vigtigt at huske, at størstedelen af befolkningen stadig udskriver tingene regelmæssigt. Mens du sikkert tagger et emne med del.icio.us, når du vil gemme det til fremtidig reference, udskriver den gennemsnitlige internetbruger den samme side.
Da folk stadig udskriver information fra internettet, er det vigtigt at bruge CSS til at gøre dit indhold printervenligt . Besøgende vil sætte pris på alt det arbejde, du har lagt på, for at skabe et smukt layout til den hjemmeside, de besøger, men når de beslutter at udskrive en side fra denne hjemmeside, vil de sætte pris på dig endnu mere, når de indser, at deres udskrift kun indeholder tekst, som de vil have (og ingen af de fantastiske grafik, der ser godt ud på deres computer, men vil spilde et ton blæk fra deres printer). Fordi CSS gør det ganske enkelt at sikre, at indholdet er korrekt formateret, når det udskrives, er der ingen undskyldning for en ægte designer til at forsømme dette trin i designprocessen.
Du tror måske, at dette sidste princip lyder cliche, men det er uden tvivl det vigtigste af hele listen. Hvis du er dedikeret til at være den bedste designer muligt, skal du sikre dig, at du altid arbejder for at udvide din viden om CSS . Heldigvis er det nemt at gøre, hvis du har lyst og vilje til at forpligte sig til at fortsætte din CSS-uddannelse. Selv om efteruddannelse kan være en vanskelig opgave for enkeltpersoner i mange industrier, der ikke er tekniske, fordi Internettet er bogstaveligt grundlag for CSS, er mængden af gratis ressourcer, du kan lære af, bogstaveligt talt uendelige. Hvis du tror, at jeg overdriver, skal du blot skrive "CSS" til Google, og du vil se, at der er 483.000.000 resultater, du kan gennemse.
Udover at lære af online ressourcer (og udskrive ressourcer, hvis du foretrækker), kan du lære meget af andre CSS designere. Uanset om du analyserer deres arbejde, lytter til de råd, de udsender online eller taler med dem i ansigt til ansigt, kan du få en masse værdi ved at interagere og potentielt samarbejde med andre designere, der er forpligtet til at følge principperne om top notch CSS design og producerer fantastiske stykker arbejde.