CSS kan være et ekstremt kraftig oppslagsspråk for designere.
Men CSS som er produsert, er bare like god som prinsippene som blir fulgt av designeren som lager koden.
Mens du kanskje tror at noen kan veksle ut CSS, er det en stor forskjell mellom å skrive CSS og produsere topp hakk CSS.
For å sikre at du er på rett spor, er det åtte CSS-prinsipper som hver webdesigner bør følge.
Hvis du skal investere tiden i koding av CSS, er det bare fornuftig å ta deg tid til validere koden du lager. Men det slutter aldri å forbløffe meg hvor mange designere hopper over dette viktige trinnet. Ved å validere koden kan du rydde opp eventuelle problemer og sørge for at det kommer til å fungere bra for de besøkende.
I tillegg til å validere CSS-filen din, bør du også validere HTML- eller XHTML-filene dine. Før du validerer disse filene, må du sørge for at du har tatt deg tid til å erklære riktig HTML eller XHTML DOCTYPE. Deklarering av DOCTYPE kan virke som en verdslig detalj, men jeg kan ikke telle hvor mange diskusjoner jeg har hatt med frustrert designere som fortsatt har problemer med et design, bare for å finne ut at det var fordi de hadde oppgitt en utdatert DOCTYPE (eller hadde ikke deklarert en DOCTYPE i det hele tatt).
Enten du jobber med et prosjekt alene eller med et team av designere, er det viktig å dokumentere arbeidet du lager. Du kan sikkert se hvorfor dette ville være viktig innenfor konteksten til et designteam, men du lurer kanskje på hvorfor det ville ha betydning hvis du jobber med et soloprosjekt. Vel, det er alltid en sjanse for at soloprojektet ditt etter hvert vil utvikle seg til et gruppeprosjekt, og hvis dette skjer, er det mye lettere å ha dokumentasjon på plass enn å prøve å backtrack og lage den. Men selv om prosjektet ditt forblir et ettmanshow, kan du bli overrasket over hvor nyttig dokumentasjon er når du bestemmer deg for å besøke et prosjekt etter ikke å se på det i et år.
Når det gjelder å lage dokumentasjon for CSS-koden, er den naturlige impulsen til de fleste designere å legge den direkte til koden ved å plassere den mellom / * og * /. Som mange av prinsippene i denne listen, er det ikke noe teknisk feil for å ta denne tilnærmingen. Hvis du legger til kommentarer direkte til CSS-koden din, øker størrelsen på filen, som igjen kan øke innlastingstiden og redusere nettstedets samlede ytelse. Hvis du er seriøs om å skrive toppnøkkel CSS-kode, bør du dokumentere koden din, men i en egen fil.
Selv om jeg ærlig tror at det er mer effektivt å dokumentere i en egen fil, vet jeg at det er mange filer som bare ikke er enige med denne praksisen. Hvis du nekter å dokumentere i en egen fil, er det mulig å bruke en CSS-kompressor (selv om du velger å bruke en egen fil for dokumentasjon, kan du fortsatt ha fordel ved å bruke en CSS-kompressor). Du kan bruke dette CSS kompressor fra CSS Drive Gallery, eller bare søk Google for å finne en alternativ CSS kompressor.
Selv om hack har blitt en akseptabel praksis for mange i CSS-fellesskapet, betyr dette ikke at "CSS hacking" er et prinsipp som du bør følge. Problemet med denne tilnærmingen til design er at det betyr at du forsettlig leter etter en komplisert løsning på problemer. Mens du kanskje tror at en eller to hacks vil ogsà ¥ ikke skade noen, kommer du inn i tankegangen om â hack gjennom â noen problemer du opplever, kan ha en negativ innvirkning pà ¥ din generelle designmoralitet.
Å unngå hack er et råd som eksperter har dispensert for en stund. Du kan gå tilbake helt til 2003 og se det Peter-Paul Koch (som er en dyktig utvikler og forfatter) har advaret designere av implikasjonene av CSS hacks for en tid: "Kompleksitetsmonsteret har kommet tilbake, midt i sentrum av moderne webutvikling. I dag manifesterer han seg ikke som et uendelig nestet bord, men som en uendelig komplisert CSS-hack. "
Fordi divs gir et høyt nivå av fleksibilitet, kan det være lett å overuse dem. Faktisk er dette problemet blitt så vanlig blant designere at CSS-fellesskapet har opprettet sin egen betegnelse for å merke dette problemet: divitus. For å unngå å bli offer for denne tilstanden, før du automatisk bruker en div-tagg, bør du alltid spørre deg selv om det finnes en faktisk HTML-kode som vil få jobben gjort for deg. For eksempel, i stedet for å lage flere header div, hvorfor bruker du ikke HTML-overskriftskodene som allerede er tilgjengelige, for eksempel H1 og H2?
Når du begynner å ta spørsmålet om divs i betraktning, vil du raskt se fordelene ved å bruke riktig HTML-tag i stedet for å automatisk opprette en ny div. Ikke bare kan det redusere mengden kode du må opprette (som sparer tid, sammen med å redusere belastningstiden på nettstedet ditt), men det vil også gi koden din en mer logisk struktur.
Hvis du spør en ny eller uerfaren designer om hvordan de bestemmer seg for å navngi sine klasser, kan de kanskje si at det egentlig ikke betyr noe. Selv om dette er teknisk sant, er dette et veldig kortsynt syn på å navngi CSS-klasser. Selv om det er designere som faller inn i kategorien ikke bryr seg om CSS-klassenavn, er det også designere som tenker på klassenavnene, men de tar faktisk feil tilnærming.
Siden jeg ikke bare vil slå deg over hodet med teoretiske eksempler, la meg forklare dette konkret. La oss si at du lager en klasse for å kontrollere en av boksene på siden din. Boksen vil være plassert nederst på siden, den vil inneholde kommentarer fra leserne, og du vil bruke CSS for å gi den en brun bakgrunn og kontrollere polstringen. I stedet for å navngi denne .tan-boksen (som er det mange velsignede designere ville gjøre), nevner den. Kommentarkasse. Årsaken til at .kommentarer er et bedre klassenavn enn .tan-boksen er fordi hvis du bestemmer deg for å endre bakgrunnsfargen til blå nedover veien (eller bestemme å flytte boksen fra bunnen av siden til et annet område) , det vil ikke forvirre deg eller noen annen designer som ser over CSS for den nettsiden.
Mens shorthand kan være forvirrende for designere som nettopp har begynt å skrive sin egen CSS-kode, når du blir vant til stilen på shorthand, blir den en av de mest effektive metodene du kan følge som designer .
Det er flere fordeler ved bruk av stenografi. For det reduserer størrelsen på filene dine, noe som reduserer belastningstiden på nettstedet ditt. I tillegg gjør det ikke bare enklere å organisere koden din, men gjør det også enklere hvis du må gjøre endringer i koden din i fremtiden. Når du begynner å tilpasse seg stenografi, bør du også få i gang med å skrive koden på en linje (i stedet for å spre ut deklarasjoner over flere linjer).
Som designer er du mye mer teknisk tilbøyelig enn noen andre i den vanlige befolkningen. Fordi du er en del av en minoritet som lever og puster teknologi, er det mange vaner du har som de fleste andre aldri har tenkt på. For eksempel har du sannsynligvis gått ut av veien for å eliminere så mye av "papirsporet" som mulig i livet ditt. Imidlertid er det viktig å huske at flertallet av befolkningen fremdeles skriver ut ting regelmessig. Mens du sannsynligvis merker et element med del.icio.us når du vil lagre det for fremtidig referanse, vil den gjennomsnittlige Internett-brukeren skrive ut den samme siden.
Siden folk fremdeles skriver ut informasjon fra Internett, er det viktig å bruke CSS for å gjøre innholdet ditt skrivervennlig . Besøkende vil sette pris på alt arbeidet du har satt inn for å skape en vakker layout for nettstedet de besøker, men når de bestemmer seg for å skrive ut en side fra den nettsiden, vil de sette pris på deg enda mer når de innser at deres utskrifter bare inneholder tekst som de vil ha (og ingen av de fantastiske grafikkene som ser bra ut på datamaskinen sin, men vil kaste bort massevis av blekk fra skriveren). Fordi CSS gjør det ganske enkelt å sikre at innholdet er riktig formatert når det skrives ut, er det ingen unnskyldning for en ekte designer å forsømme dette trinnet i designprosessen.
Du tror kanskje at dette siste prinsippet lyder cliche, men det er uten tvil den viktigste av hele listen. Hvis du er dedikert til å være den beste designeren mulig, må du sørge for at du alltid jobber for å utvide din kunnskap om CSS . Heldigvis er dette lett å gjøre hvis du har lyst og vilje til å forplikte seg til å fortsette din CSS-utdanning. Mens videreutdanning kan være en vanskelig oppgave for enkeltpersoner i mange bransjer som ikke er teknisk, fordi Internett er bokstavelig talt grunnlaget for CSS, er mengden gratis ressurser du kan lære av, bokstavelig talt uendelige. Hvis du tror jeg overdriver, bare skriv "CSS" til Google, og du vil se at det er 483 000 000 resultater for deg å bla gjennom.
I tillegg til å lære av online ressurser (og skrive ut ressurser hvis du foretrekker), kan du lære mye fra andre CSS-designere. Enten du analyserer sitt arbeid, hører på rådene de gir ut online eller snakker med dem i ansikt til ansikt, kan du få mye verdi ved å samhandle og potensielt samarbeide med andre designere som er forpliktet til å følge prinsippene for topp CSS-design og produserer fantastiske arbeidsstykker.