Udvikling af effektiv, strømlinet CSS
CSS kan sammenlignes med en billedhuggeres værktøjssæt; som billedhugger på arbejde, bruger vi designere CSS til at skabe strukturerede layouter af hjemmesider.
Gennem årene er denne proces blevet mere organiseret; Der er indført regler for at skabe bedste praksis med kodning.
I denne artikel tager vi et kig på nogle ideer, du kan bruge, når du skriver stilark for at fremskynde din kode.
Effektiv CSS er nem at administrere og nem at læse og kan være en ressource for webdesignere. At organisere er et stort skridt, men at bruge CSS kan være lidt mere kompliceret end det.
Når du læser denne artikel, skal du holde dine egne præferencer i tankerne; Det bedste råd, du kan få fra enhver udvikler, er at finde din egen måde at arbejde på. Kombiner nogle af teknikkerne her med dine egne metoder for at få mest udbytte.
Hvorfor gider strømline CSS?
Mange designere forvirrer front-end og back-end sprog, når man taler om parsing kode. CSS og HTML er front-end design sprog bruges til at formatere og style elementer på en hjemmeside. Filer downloades og analyseres af den besøgendes browser, hvilket betyder at front-end-koden har en betydelig læsetid.
Kode, der downloades og analyseres af browseren, tager tid at læse og beregne, ligesom kode skrevet på back-end-sprog (f.eks. PHP eller Ruby). Strømlinet CSS kan i høj grad være til gavn for en hjemmeside, fordi den kan forkorte indlæsningstider og fremskynde sideelementstrukturering.
Fordelene er måske ikke indlysende med dagens højhastighedsforbindelser og avancerede operativsystemer. Du kan måske se på dit websted på en mobilbrowser for at sammenligne belastningstider og se, hvordan hjemmesiden indlæses.
Når CSS er kodet effektivt, skal du se formularen og stilen på webstedselementerne, når de behandles. Dette kan se anderledes ud end browser til browser, men det sker stadig. Jo mere du tester dit websites kode, desto mere ser du det.
Hold din kode standardiseret og enkel. Hvis du opdaterer din blog eller personlige hjemmeside et par måneder efter den første udvikling, er det lettere at håndtere CSS-stilarter, end du har at gøre med nye. Tilpasning til etablerede standarder hjælper i det lange løb.
Sådan arbejder du med effektiv kode
For at begynde kodning stilarter med yderste effektivitet, skal du vedtage nogle nye ideer. Disse er grundlæggende CSS-teknikker, der bruges i dag af top-notch internet-websteder og app-udviklere.
Hold din kode enkel
Dette kan let overses. Når du kortlægger et sæt data for dine stilarter, skal du holde det nemt. Opret datasæt i en kolonnestabel, hvis du har brug for det.
Start med at oprette en liste over forskellige sektioner for at arbejde i dine stilarter. Du kan inkludere tekst, formularer, layoutkasser, overskrifter, footers og alt andet du måske har brug for. For virkelig at blive organiseret kan du bryde det ned i et par kendte stilarter, som f.eks id eller class til navigationskoblinger.
Dette første skridt hjælper med at oprette en blueprint for dit websted ved hjælp af klare ord, inden du kommer ind på et hvilket som helst stilsprog. Bagefter vil det være meget enklere at sidde ned for at skrive kode. at have ressource listen foran dig vil hjælpe dig med at udhente kode ved en næsten superhuman sats.
Hold blokke af kode afgrænset og sparsom
Der er en løbende debat om, hvordan CSS kode skal skrives. Da jeg først startede, brugte jeg bloknotation, fordi det var alt, jeg nogensinde havde set. Men single-line notation er meget hurtigere, når det kommer til at analysere tekst og gøre det læseligt.
Jeg gør ikke en sag for at ignorere CSS-blokke-langt fra det. Når du har at gøre med et vigtigt element eller id der holder seks eller syv store ejendomme, vil det være lettere at holde det i blokeret form. Du vil isolere de vigtige dele af din stil, hvilket gør dem lettere at finde på et overblik.
Det er også lettere at læse lange stilarter i bloknotering, fordi de fleste tekstredaktører omslutter lange linjer, og læsning af ejendomsværdipar kan blive forvirrende, når du har 10 eller mere til at gå igennem. At være webdesigner, skal du ringe på, hvordan man sparer ud CSS-koden. Hold effektivitet i tankerne, og brug din bedste dømmekraft.
Arbejder med andre udviklere
Hvis du er en professionel webdesigner eller stræber efter at være en, er chancerne for, at du vil arbejde sammen med et team før eller senere. Dette kan være en velsignelse eller en forbandelse, afhængigt af holdet.
Designere er ofte tilbageholdende med at foretage store ændringer i deres arbejde. CSS-koden er lidt anderledes, fordi du forsøger at oprette et smukt layout ved kun at bruge ejendomsværdier, og filer kan blive rodet, når de passerer mellem nogle få hænder. Så hold dig organiseret.
Kommentarer er en stor hjælp. Hvis linjer eller blokke af kode kan forvirre eller vildlede andre, vil kommentarer gemme timer. Forklar alt, hvad du sætter i stilarket så elegant som muligt.
Sørg for, at der ikke overskrives nogen duplikat eller tilføjet stilarter. Forestil dig at h1 til h4 overskrifterne er højt opstillet i et CSS-dokument, men så ændrer nogle kode ned ned deres skrifttyper. Dette kunne være forvirrende for en person, der ikke skrev koden og nu skal gennemgå og rette fejlen.
Kommunikation er også kritisk. Du kunne skrive den mest effektive kode rundt, men en mangel på kommunikation vil dømme dit team. Fokus på opgaven ved hånden og arbejde med de kreative ideer, der produceres kollektivt af holdet (ikke kun din egen).
Hold styr på separate CSS-dokumenter
En anden måde at holde kode ren og organiseret er at holde stiltyperne adskilte. Dette fungerer godt for store hjemmesider, hvor det er urealistisk at holde alle stilarter i et enkelt dokument.
Facebook er et godt eksempel. Det har sandsynligvis mange forskellige stilarter for alle dens forskellige sider: profil, søgning, registrering, fotos osv. Hvis stilarterne blev samlet i en fil, ville jeg ikke være den fyr, der skal sortere gennem koden bare for at lave en simpel fejl.
Facebook får meget mere trafik end dit websted, men principperne er de samme. Hvis organisationen er en bekymring, kan separate stilark gå langt. Webdesignere organiserer ofte kode baseret på det aspekt af dokumentet, som det strukturerer (f.eks. Layout.css , text.css , forms.css ).
Ikke alle stilarter skal indlæses på hver side. Og her ligger fordelene: Metoden giver mulighed for større tilpasning, når du bygger dit website. Du vil skære ned på parsingstid uhyre bare ved at oprette separate visninger og stilarter.
Testing Support for IE
Webudviklere har altid malet Internet Explorer som skurken, især med CSS. Heldigvis kan du anvende betingede kommentarer (som ligner regelmæssige kommentarer til de fleste browsere) til HTML'en.
Du kan bruge disse til at anvende stilarter i Internet Explorer. Tjek betingede kommentarer, hvis du ikke er bekendt med dem; de kan vise sig uvurderlige, når CSS egenskaber ikke virker rigtigt, og du har brug for et alternativ.
Med udgivelsen af Internet Explorer 9 Beta , bliver vi tættere på en samlet internetoplevelse. Det eneste problem er antallet af personer, der stadig kører browsere lige så gamle som IE6 og IE7, som har alvorlige behandlingsfejl (på grund af fejlfri gengivelsesmotorer) og nogle gange kræver eksterne stilarter. Heldigvis er support blevet forbedret, og Microsoft synes at vende om ting.
Tilføjelse af en indholdsfortegnelse
Dette trin er valgfrit, men jeg finder det virker undere for mine stilark. Du kan gemme bordet uden for selve CSS-dokumentet, men jeg har fundet det at være noget modproduktivt, især fordi det er så nemt at tilføje kommentarer inline.
Hovedårsagerne til at sætte indholdsfortegnelsen i dine stilarter er, at det letter adgangen og strømlinierer redigeringsprocessen. Sæt markører i begyndelsen af dit dokument for at adskille koden i logiske divisioner.
Oprettelse af dine egne nøgler er en god tilgang. For eksempel, hvis du planlægger at opdele dit bord i henhold til hovedområderne i dokumentet (layout, skrifttype, overskrift, navigation osv.), Kan du taste sektionerne med unikke tegn.
Du kunne bruge =!layout og =!font at afgrænse henholdsvis layout og skrifttyper. Du vil sandsynligvis ikke løbe ind i de nøjagtige sekvenser af tegn, hvor som helst i koden, så det er sikkert at tilføje dem til både dit bord og begyndelsen af hver kommentar sektion. Brug derefter søgefunktionen i din teksteditor til at springe ned til det ønskede afsnit.
Dette er også en god strategi for projekter, hvor mange mennesker vil se på koden. Det holder alt organiseret og tilgængeligt.
Der er mange måder at optimere kode på og gøre det mere effektivt, og disse tips er en god start. CSS udvikler sig, og mange nye ideer om det bliver opbygget.
Du har brug for lidenskab og dedikation til at gøre det i designbranchen. Hvis du kan holde fast i din passion for digitalt design, bør det ikke være svært at holde styr på CSS bedste praksis. At nå ud til andre i dette store globale samfund af webdesignere kan være en stor hjælp; industri eksperter er normalt glade for at dele deres teknikker og innovationer.
Dette indlæg blev udelukkende skrevet til Webdesigner Depot af Jake Rocheleau , en passioneret webdesigner og social media entusiast. Jake elsker at læse og skrive om de nyeste digitale og internettendenser og netværk med design samfundet. For at høre mere om hans arbejde, find ham på Twitter @ jakerocheleau .
Hvad er dine metoder til at strømline CSS? Eventuelle forslag til newbie CSS udviklere? Hvilke nye funktioner eller yderligere support vil du gerne se i fremtidige iterationer af CSS?