Å holde CSS-filene dine små og organisert er svært viktig, spesielt hvis du skal tilbringe tid på å redigere nettstedet ditt i fremtiden, (eller hvis andre skal bruke koden, dvs klienter).

Hjelpsomt, det finnes en rekke forskjellige teknikker som kan brukes til å hjelpe organisasjonen og størrelsen på dine CSS-filer for å gjøre dem mer strømlinjeformede.

Å ha mer strømlinjeformet CSS vil spare deg tid og stress i det lange løp, så det er viktig å få det riktig.

For det første, å holde et enkelt stilark, vanligvis kalt style.css, er et godt sted å starte i organisasjonen av CSS. Å ha et enkelt stilark for flertallet (hvis ikke alt) av nettstedet ditt holder alt sammen på et sted som gjør redigeringsprosessen mer strømlinjeformet.

Kode i stil

Code in Style

For å holde CSS-filene mer strømlinjeformet, er det viktig å starte med å bruke en god kodeditor, for eksempel TextWrangler på Mac, eller Notepad ++ på Windows. Dette har en rekke viktige fordeler. I tillegg til at det er enkelt å bruke, farger et program som TextWrangler også forskjellige koder som bidrar til kodingsprosessen. Dette er veldig nyttig for å sikre at alle stilene du har definert er stavet riktig som stilen ikke vil endre farge med mindre den er gjenkjent av TextWrangler som en CSS-stil. Faner er en annen god funksjon av TextWrangler, slik at du kan åpne mer enn én fil om gangen som gjør kryssjekk enklere.

For å effektivisere CSS-filene dine er det en god ide å etablere et sett oppsett som brukes i alle CSS-stilarkene dine. Kanskje den mest brukte teknikken er å definere ID eller klasse (ved hjelp av henholdsvis # eller.) Og deretter en åpen brakett {etterfulgt av en innrykket ny linje for å begynne styling, slik:

#header {width:500px;height:250px;}

Ved å følge denne vanlige teknikken vil stilarket være mer organisert og enklere å kode. Følgende teknikker vil alle bli hjulpet ved å sørge for at layoutet ditt er konsekvent gjennom alle CSS-filene dine.

Organiser etter sted

Organize by Location

Med et hvilket som helst nettsted kan antall CSS ID og klasser som brukes enkelt nå et stort antall, så det er viktig at CSS-stilarket er godt organisert. En av de teknikkene som er ekstremt nyttig, er å bestille dine IDer og klasser av hvor de vises på nettstedet selv. For eksempel; plasserer CSS-styling for toppteksten mot toppen av stilarket og styling for bunnteksten mot bunnen. Ved å holde dette konsistent på alle nettstedene du kodes når du åpner et stilark du har opprettet, vil du vite nøyaktig hvor du skal se for å finne stilen du ønsker å redigere.

Det er også lurt å nevne elementene dine med åpenbare navn som Header, Footer, Sidebar, Main Content etc., som gjør at du kan finne ut hva hvert stykke styling refererer til, og hjelpe organisasjonen videre. Hvis elementene endrer hensikt, må du sørge for at navnene deres reflekterer endringene; Å ha et element som heter Header som er nederst på siden, kan bli veldig forvirrende og gjør bestilling på stedet til en mer skremmende oppgave.

CSS Kommentarer

CSS Comments

Dette fører til bruk av CSS-kommentarer i stilarkene dine. Selv om det ikke alltid er brukt, anbefaler CSS at det er svært nyttig å skille forskjellige deler av stilarket. Hvis du har strukturert stilarkene dine med stiler knyttet til toppteksten mot toppen og omvendt, kan du bruke CSS-kommentarer til å markere starten og slutten av ulike seksjoner som topptekst og bunntekst eller hovedinnholdselementene.

Bruk av CSS-kommentarer er enkelt. Hvor som helst i stilarket, starter kommentaren med /* og vær så sikker på å avslutte kommentaren med */ . Viktigst, hva som helst i kommentaren, det være seg koden eller teksten, vil ikke bli analysert av nettleseren, noe som gjør CSS-kommentarer veldig nyttige for å forlate notater og beskrivelser knyttet til ulike deler av stilarket.

Kanskje ytterligere to bruksområder for CSS-kommentarer kan være å legge igjen kommentarer til dine kunder, så skulle de ønske å gjøre ytterligere endringer til deres nettsted i fremtiden har de en veiledning på plass for å hjelpe. Det kan også være forskjellige stiler for samme ID eller klasse som du ønsker å bevare for potensiell bruk eller for testing. I stedet for å merke ID og klasser med en 2 på slutten, f.eks header2 , stoppe den stylingen fra å bli analysert bare vikle det som ville være header2 i /* og */ .

I tillegg til å holde stilarket mer organisert, kan det med denne teknikken også være å gjøre det vanskelig å omorganisere (kopiere og lime istedenfor å bruke "2-teknikken", slik at du kan lage forskjellige versjoner av styling i stilarket på en unobstructiv måte. endring av tall og sletting av gammel styling).

Men mens CSS-kommentarene er svært nyttige, er det også viktig å huske størrelsen og lengden på stilarket og balansere tilsvarende. Kommentarer bør ikke ta opp mer plass enn den faktiske CSS; de burde være korte og til poenget. Det er også viktig å huske dette i forhold til forskjellige versjoner. Trenger du virkelig alle versjoner du har lagret i stilarket? Kan du lagre et duplikat stilark andre steder? Å ha flere versjoner av stiler i stilarket ditt, kan bli forvirrende, slik at behandling av alternativer er avgjørende, for eksempel lagring av dupliserte filer.

Unngå duplisering

Når stilarket er strukturert på en tilgjengelig måte, kan det være enkelt å velge ut unødvendige duplikasjoner innen styling. På grunn av arten av CSS, armerer ID og klasser automatisk styling fra foreldrene deres, som fjerner behovet for å doble opp på styling. Kanskje den enkleste teknikken er å definere et antall nøkkelformer ved starten av stilarket. Definere universelle stiler for koblinger og tekst er nyttig og fjerner behovet for stadig å definere styling for hver ID og klasse. Spesielt er dette også en effektiv måte å opprettholde en konsistent stil på et nettsted, og har en positiv innvirkning på å redusere størrelsen på stilarket også.

Ved hjelp av et verktøy som Google Chromes inspektør, er det mulig å se hvilke stilarter som blir arvet og hvorfra, noe som ytterligere bidrar til å eliminere uønskede duplikasjoner i stilarket.

Bruk det du trenger

Følg videre, for å effektivisere CSS-koden mer, vurder hvilke CSS-klasser du implementerer. Trenger du å bruke dem alle? Det er lett å bli båret og definere klasser som du ikke trenger direkte, men tror du kan gjøre i fremtiden; For å holde CSS-stilarket strømlinjeformet, bruker små og organiserte kun CSS-klasser som er integrert i ditt nettsteds funksjon. Bare kode hva som trengs. For å oppnå dette, unngå duplisering av stiler, som nevnt, og husk å slette ubrukte stilarter og de som ikke lenger er relevante.

Konklusjon

Ved å følge disse enkle teknikkene er det mulig å skape bedre organisert og mindre CSS-filer som er enkle å navigere og redigere, både nå og i fremtiden for deg selv og dine kunder.

Har du gode tips for å holde CSS organisert og strømlinet? Gi oss beskjed i kommentarene!