Utvikle effektiv, strømlinjeformet CSS
CSS kan sammenlignes med en skulptørens verktøysett; Som skulptører på jobb, bruker vi designere CSS til å lage strukturerte layouter av nettsteder.
Gjennom årene har denne prosessen blitt mer organisert; Det er satt opp regler for å skape beste praksis for koding.
I denne artikkelen tar vi en titt på noen ideer du kan bruke når du skriver stilark for å øke koden din.
Effektiv CSS er enkel å administrere og lett å lese og kan være en ressurs for webdesignere. Å organisere er et stort skritt, men bruk av CSS kan være litt mer komplisert enn det.
Når du leser denne artikkelen, behold dine egne preferanser i tankene; Det beste rådet du kan få fra enhver utvikler er å finne din egen arbeidsform. Kombiner noen av teknikkene her med dine egne metoder for å få mest mulig nytte.
Hvorfor bry deg om å effektivisere CSS?
Mange designere forvirrer front-end og back-end språk når man snakker om parsing kode. CSS og HTML er front-end design språk som brukes til å formatere og stil elementer på et nettsted. Filer lastes ned og analyseres av den besøkende nettleser, noe som betyr at front-end-koden har en betydelig belastningstid.
Koden lastet ned og analysert av nettleseren tar tid å lese og beregne, akkurat som kode skrevet på backend-språk (for eksempel PHP eller Ruby). Strømlinjeformet CSS kan i stor grad være til nytte for et nettsted, fordi det kan forkorte lastetider og øke hastigheten på sideelementstrukturering.
Fordelene kan ikke være åpenbare med dagens høyhastighetsforbindelser og avanserte operativsystemer. Du vil kanskje se på nettstedet ditt på en mobilbrowser for å sammenligne belastningstider og se hvordan nettstedet laster.
Når CSS er kodet effektivt, bør du se skjemaet og stilen på nettsider som de blir behandlet. Dette kan se annerledes ut fra nettleseren til nettleseren, men det skjer fortsatt. Jo mer du tester nettstedets kode, desto mer ser du det.
Hold koden din standard og enkel. Hvis du oppdaterer bloggen din eller din personlige nettside et par måneder etter den første utviklingen, er det lettere å håndtere CSS-stiler som du er kjent med. Tilpasse til etablerte standarder hjelper i det lange løp.
Hvordan jobbe med effektiv kode
For å begynne kodingsstiler med størst effektivitet må du vedta noen nye ideer. Disse er grunnleggende CSS-teknikker som brukes i dag av toppnytte Internett-nettsteder og app-utviklere.
Hold koden din enkel
Dette kan lett overses. Når du kartlegger et sett med data for stilene dine, må du holde det enkelt. Opprett datasett i en kolonnestabel hvis du trenger det.
Begynn med å lage en liste over ulike seksjoner som skal fungere i stilene dine. Du kan inkludere tekst, skjemaer, oppsettbokser, overskrifter, footers og alt annet du trenger. For virkelig å bli organisert, kan du bryte den ned i noen få kjente stilarter, for eksempel en id eller class for navigasjonskoblinger.
Dette første trinnet bidrar til å skape en blueprint for nettstedet ditt ved hjelp av vanlige ord, før du kommer inn på hvilket stil som helst. Etterpå vil sitte ned for å skrive kode bli mye enklere; Å ha ressurslisten foran deg, vil hjelpe deg med å hente ut kode med nesten overmenneskelig pris.
Hold blokker av kode avgrenset og sparsom
Det går en pågående debatt om hvordan CSS-kode skal skrives. Da jeg først startet, brukte jeg blokknotering fordi det var alt jeg noensinne hadde sett. Men enkeltlinjemerking er mye raskere når det gjelder å tolke tekst og gjøre det leselig.
Jeg gjør ikke et tilfelle for å ignorere CSS-blokker-langt fra det. Når du har å gjøre med et viktig element eller id som holder seks eller sju store egenskaper, vil det være lettere å holde det i blokkert form. Du vil isolere de viktige delene av din stil, noe som gjør dem enklere å finne på et øyeblikk.
Å lese lange stiler i blokknotering er også lettere fordi de fleste tekstredaktører bryter sammen lange linjer, og lesing av eiendomsverdipar kan bli forvirrende når du har 10 eller flere til å gå gjennom. Å være webdesigner, må du ringe på hvordan du plasserer ut CSS-koden. Hold effektivitet i tankene, og bruk din beste dømmekraft.
Arbeider med andre utviklere
Hvis du er en profesjonell webdesigner eller ønsker å være en, er det sjanse for at du skal jobbe med et lag før eller senere. Dette kan være en velsignelse eller en forbannelse, avhengig av laget.
Designere er ofte motvillige til å gjøre store endringer i arbeidet deres. CSS-koden er litt annerledes fordi du prøver å lage et vakkert layout ved hjelp av bare eiendomsverdier, og filer kan bli rotete når det går mellom noen få hender. Så vær organisert.
Kommentarer er en stor hjelp. Hvis linjer eller blokker med kode kan forvirre eller villede andre, vil kommentarer spare timer. Forklar alt du legger inn i stilarket så elegant som mulig.
Pass på at ingen dupliserte eller vedlagte stiler overskrives. Tenk deg at h1 til h4 overskriftene er utformet høyt oppe i et CSS-dokument, men så endrer noen kode nedover endringene deres skrifter. Dette kan være utrolig forvirrende for noen som ikke skrev koden og nå må gå gjennom og fikse feilen.
Kommunikasjon er også kritisk. Du kan skrive den mest effektive koden rundt, men mangel på kommunikasjon vil dømme laget ditt. Fokus på oppgaven ved hånden, og arbeid med de kreative ideene som er samlet av laget (ikke bare din egen).
Hold styr på separate CSS-dokumenter
En annen måte å holde koden ren og organisert, er å holde stilstyper skilt. Dette fungerer bra for store nettsteder som holder alle stilene i et enkelt dokument urealistisk.
Facebook er et godt eksempel. Det har sannsynligvis mange forskjellige stiler for alle sine ulike sider: profil, søk, registrering, bilder, etc. Hvis stilene ble konsolidert i en fil, ville jeg ikke være fyren som må sortere gjennom koden bare for å fikse en enkel feil.
Facebook får mye mer trafikk enn nettstedet ditt, men prinsippene er de samme. Hvis organisasjonen er en bekymring, kan separate stilark gå langt. Webdesignere organisere ofte kode basert på aspektet av dokumentet som det strukturerer (f.eks. Layout.css , text.css , forms.css ).
Ikke alle stiler må lastes på hver side. Og her ligger fordelene: Metoden gir bedre tilpasning når du bygger nettstedet ditt. Du vil kutte ned på parsingstid enormt bare ved å opprette separate visninger og stiler.
Testing Support for IE
Webutviklere har alltid malt Internet Explorer som skurken, spesielt med CSS. Heldigvis kan du bruke betingede kommentarer (som ser ut som vanlige kommentarer til de fleste nettlesere) til HTML.
Du kan bruke disse til å bruke stiler i Internet Explorer. Sjekk ut betingede kommentarer hvis du ikke er kjent med dem; de kan vise seg uvurderlig når CSS-egenskaper ikke fungerer riktig, og du trenger et alternativ.
Med utgivelsen av Internet Explorer 9 Beta , vi blir litt nærmere en samlet internasjonal opplevelse. Det eneste problemet er antall personer som fortsatt kjører nettlesere like gamle som IE6 og IE7, som har alvorlige prosesseringsfeil (på grunn av feil gjengivelsesmotorer) og noen ganger krever eksterne stiler. Heldigvis har støtten blitt bedre, og Microsoft ser ut til å snu ting rundt.
Legge til en innholdsfortegnelse
Dette trinnet er valgfritt, men jeg finner det fungerer underverk for stilarkene mine. Du kan lagre bordet utenfor selve CSS-dokumentet, men jeg har funnet dette til å være noe motproduktivt, spesielt fordi det er så enkelt å legge til kommentarer inline.
Hovedgrunnene til å legge inn innholdsfortegnelse i stilene dine er at det letter tilgangen og strømlinjer redigeringsprosessen. Sett markører i begynnelsen av dokumentet for å skille koden til logiske divisjoner.
Å lage dine egne nøkler er en god tilnærming. For eksempel, hvis du planlegger å dele bordet ditt i henhold til hovedområdene i dokumentet (layout, skrift, header, navigasjon, etc.), kan du taste inn seksjonene med unike tegn.
Du kan bruke =!layout og =!font å avgrense layout og skriftdeler, henholdsvis. Du vil sannsynligvis ikke løpe inn i de nøyaktige sekvensene av tegn hvor som helst i koden, så det må være trygt å legge dem til både bordet ditt og begynnelsen av hver kommentar. Bruk deretter søkefunksjonen i tekstredigeringsprogrammet til å hoppe ned til ønsket seksjon.
Dette er også en god strategi for prosjekter der mange mennesker vil se på koden. Det holder alt organisert og tilgjengelig.
Det er mange måter å optimalisere kode på og gjøre det mer effektivt, og disse tipsene er en god start. CSS utvikler seg, og mange nye ideer om det blir bygget opp.
Du trenger lidenskap og dedikasjon til å gjøre det i designbransjen. Hvis du kan holde fast i din lidenskap for digital design, bør det ikke være vanskelig å holde følge med CSS beste praksis. Å komme ut til andre i dette store globale samfunnet av webdesignere kan være en stor hjelp; industrieksperter er vanligvis glade for å dele sine teknikker og innovasjoner.
Dette innlegget ble skrevet utelukkende for Webdesigner Depot by Jake Rocheleau , en lidenskapelig webdesigner og sosial media-entusiast. Jake elsker å lese og skrive om de nyeste digitale og Internett-trender og nettverk med design samfunnet. For å høre mer om sitt arbeid, finn ham på Twitter @ jakerocheleau .
Hva er metodene dine for å effektivisere CSS? Eventuelle forslag til nybegynner CSS utviklere? Hvilke nye funksjoner eller tilleggsstøtte vil du se i fremtidige iterasjoner av CSS?