Innhold
- 01. Legg til rekkefølge og struktur i filer
- 02. Bygg en grunnleggende CSS-fil
- 03. Separer oppsettet ditt fra andre CSS
- 04. Skriv CSS modulært
- 05. Unngå lange kjeder
- 06. Ikke glem prinsippene dine
Vi har alle vært der. Når du sakte åpner styles.css-filen til den nyeste CSS-spektakulæren din, ser du at den er 2000 linjer lang, og klassen du trenger å endre, er en smell i midten.
Du er alene, redd og aner ikke om det er greit å redigere den klassen fordi det kan velte noe på en helt annen side. Som en siste utvei går du til slutten av filen og oppretter en ny klasse for å takle elementet som allerede har syv andre klasser. Dette er en vanlig opplevelse for alle utviklere som har jobbet med CSS lenge nok (se våre favoritteksempler på CSS-animasjon for litt CSS-inspirasjon).
Så, la oss snakke om hva målet skal være når du skriver god CSS. Målet er ikke å lage smarte og komplekse regler. Det er ikke å konstruere en velgerstreng slik at den er så bredt anvendelig som mulig. Målet med god CSS skal være å skrive enkle, modulære og, aller viktigst, lett vedlikeholdbare regler. Her gir vi deg noen enkle og smarte regler som hjelper deg med å skape og opprettholde en sunn kodebase.
Hvis du er ute etter flere råd om webdesign, ikke gå glipp av sidene våre om nettstedlayout, webhotelltjenester og de beste verktøyene for webdesign. Har du et nytt nettsted i horisonten, men vil ikke kode? Velg den perfekte nettstedbyggeren.
01. Legg til rekkefølge og struktur i filer
Først bør du vurdere å bryte opp stiler i sine egne CSS-filer basert på en avtalt struktur mellom utviklere og deretter holde deg til den. Å åpne en dårlig organisert stilmappe er en fryktelig opplevelse. Du aner ikke hvilke stiler det er i hvilke filer og hvordan endring av en stil vil påvirke en annen. Husk at serveren din ikke bryr seg mindre om du ga hver stil hver sin fil og deretter koblet dem alle sammen eller minifiserte dem til en på slutten.
Nettstedet ditt lastes veldig sakte, men serveren takler å lese dem helt fint. Filstrukturen er bare for mennesker, og hvis filstrukturen ikke gir noen verdi, bør den tenkes på nytt.
En av de minst forvirrende måtene å strukturere filer på er side.Hvis du jobber med en om-side og noe må løses, går du til filen about.css. Dette unngår problemet med å påvirke stiler utenfor about.css. Så er alt du trenger å gjøre å se etter endringer i filen about.css.
Dette løser imidlertid ikke problemet med fillengde. En betydelig lang side kan lett ha over 1000 linjer med CSS. Å strukturere filene dine internt er en måte å redusere dette på. Å sortere alfabetisk i en fil betyr at hvis du søker etter noe som begynner med C og det ikke er der, så vet du at det ikke er inkludert.
Dette fungerer også for stiler som allerede eksisterer. Ved å gruppere alt alfabetisk kan du se om en stil er skrevet tre eller fire ganger gjennom en fil.
.boundingBox {padding: 1rem; } / * .contactHeader vil gå her hvis den eksisterte Siden den ikke kan vi trygt anta at den ikke eksisterer * / .headerChildren {padding: 10px 5px; bakgrunn: #ccc; }
02. Bygg en grunnleggende CSS-fil
Ikke alle stiler tilhører bare en enkelt side, og det er vanlig å ha stiler som finnes på flere sider. Det er også vanlig å ha stiler som gjelder virksomheten generelt, og ikke bare nettstedet. Dette er hvor du vil skrive veldig generelle stiler som egentlig ikke hører til noe. For eksempel de forskjellige fargene du bruker, skrifttyper, typografi, samt tilbakestillinger som er spesifikke for nettstedet ditt.
Det kan også være lurt å inkludere grunnleggende komponentlignende stiler i denne delen, for eksempel knapper, skjemaelementer og varslingsstiler. Tenk på denne delen som stilguiden for nettstedet ditt. Ikke bare vil dette gi nettstedet ditt en enklere måte å vedlikeholde CSS, det vil også sikre at stilene blir brukt jevnt.
Dette er et sted der det kan være lurt å inkludere stiler som tilhører deler av nettstedet som gjentar seg på flere sider, for eksempel en topptekst eller en bunntekst. Hvis du har en betydelig mengde stiler i disse seksjonene, kan det hjelpe å dele dem ut i sine egne filer som header.css og footer.css.
Bare vær forsiktig så du ikke begynner å inkludere stiler i filene som ikke hører hjemme. Husk at en rotete mappestruktur er en fin måte å gjøre vedlikehold av CSS vanskelig.
03. Separer oppsettet ditt fra andre CSS
De av dere som er kjent med SMACSS, kan være kjent med ideen om at layoutstiler kan skilles fra de mer generelle stilene du vil bruke på nettstedet ditt. Ved å skille disse stilene fra resten av CSS-en din, betyr det at du lettere kan fokusere på hvordan forskjellige seksjoner skal se ut og mindre på hvordan de skal oppføre seg i forhold til seksjoner nær dem.
Dette kan oppnås ved å legge til et rutenett som det populære Bootstrap-biblioteket eller ved å implementere et selv. Det er en god ide å snakke med designeren av nettstedet på dette tidspunktet, da mange designere vil bruke et rutenett når de oppretter et nettsted, og du vil komme så nær det som mulig.
04. Skriv CSS modulært
Å skille layout CSS avslører en annen måte å forenkle CSS på. Det er mange forskjellige metoder relatert til CSS. Det er SMACSS, BEM, OOCSS for å nevne noen, men om du kaller dem seksjoner, deler, moduler, komponenter eller blokker, har de alle en ting til felles. Det er de prøver å legge til gjenbrukbare og spesialiserte deler i stilarket ditt.
Ved å gjøre dette holder vi stilene våre så TØRRE (ikke gjenta deg selv) som mulig og lager innkapsling. Bivirkninger i CSS er en stor avtale. Nettleseren bruker CSS på en sann eller falsk måte: hvis en stil samsvarer med den, hvis ikke, hoppes den over. Dette gjør det mulig for en stil som ikke var ment å brukes av forfatteren, til fortsatt å matche og endre hvordan en side ser ut. Når vi skriver CSS mer modulært, reduserer vi disse bivirkningene ved å kapsle inn stilene.
En komponent eller modul er en seksjon av HTML som er gruppert sammen og hvis stiler påvirker hverandre. Å lage modulær CSS handler om å identifisere når noe tilhører en gruppe og deretter skille den fra omgivelsene. Det betyr at du ikke trenger å bekymre deg for utsiden og sannsynligvis ikke trenger å bekymre deg for noen moduler i den også.
Vi kan skrive klassene som lager dette slik:
.aboutHeader {} .aboutHeader_topMenu {} .aboutHeader_bottomMenu {}
Det som faktisk går i disse stilene er uviktig, men hva det gjør er å gi kontroll over hva som skjer i hele toppteksten, topplinjen i toppteksten og bunnlinjen. Ved å navngi dem med .aboutHeader klasse sørger for at ingen andre stiler blir brukt på dem.
div class = ”aboutHeader”> div class = ”aboutHeader_topMenu”> ul> / ul> / div> div class = ”aboutHeader_bottomMenu”> ul> / ul> / div> / div>
05. Unngå lange kjeder
Når du skriver komponenter, er det lett å holde dem relativt grunne og ikke gå mer enn to til tre lag dypt i klassevalg. Noen komponenter kan imidlertid føre til at du når fem, seks eller enda flere lag ned før du når elementet du vil målrette mot.
Husk at CSS ikke har muligheten til å abstrahere problemer som JavaScript; den har ingen kontrollflyt eller funksjonsevne. Det er en god ting, så ikke prøv å etterligne det ved å lage lange velgerkjeder, dypt nestede stiler eller høyt generaliserte stiler.
Her er et eksempel på hvordan du ikke gjør det:
.homeCTA .titleContainer .title .subheader .list {}
Slik skal du skrive det:
Gi nytt navn til subheader-klasser for å være deres egen komponent
.subheaderCTA .list {}
En velgerkjede som eksempelet 'hvordan ikke gjøres' ovenfor indikerer at du målretter mot feil stil. Det er ikke ofte en slik kjede faktisk er nødvendig. I stedet betyr det sannsynligvis at du har en komponent inne i en komponent, og at du bør målrette den direkte. Modulær CSS-innkapsling går i stykker hvis du prøver å kapsle for mye inne i den, noe som betyr at du begynner å se bivirkninger igjen.
06. Ikke glem prinsippene dine
Det er mange måter å lage CSS på, og hvert prosjekt du jobber med vil være litt forskjellige. Selv om det nesten er uunngåelig at en hvilken som helst kodebase til slutt vil trenge en overhaling, kan du bruke disse prinsippene for å bremse det fra å skje. Og hvis du jobber som en del av et team, må du holde designfilene dine i sikker skylagring, som alle kan få tilgang til.
Du bør til enhver tid fokusere på å sørge for at stilene dine er tørre, innkapslede, lesbare og søkbare. Å initiere prinsippene som er diskutert, vil bidra til at ting lettere kan vedlikeholdes og endres i fremtiden.
Så husk å holde litt orden på filsystemet og filene dine. Navngjør og moduler stilene dine. Separer grunnleggende stiler, layoutstiler og generelle stiler for å holde separate bekymringer.
Til slutt, hold stilene dine så enkle og grunne som mulig. Første gang du skriver en ny stil, bør det ikke være vanskelig, og hvis du synes det er, bør du vurdere om du gjør den delen for komplisert. For hvis det er vanskelig første gang, kan du bare forestille deg hva en revisjon av hodepine vil være.
Denne artikkelen ble opprinnelig publisert i nummer 323 av nett, verdens mest solgte magasin for webdesignere og utviklere. Kjøpe utgave 323 eller abonnere til netto i dag.
