(S) CSS beste praksis som du ennå ikke har kjent

Illustrasjon av Paula Jenda

Selv om du nå bygger applikasjonene dine med et populært rammeverk, som React, Angular eller Vue.js, må du fortsatt legge til noen stiler i dem. Avhengig av teknologien du bruker, må du skrive stiler på en bestemt måte. På grunn av komponentens art er det for eksempel for React bedre å skrive stiler ved å bruke CSS-moduler. Hvis du vil bruke helt nye CSS-funksjoner, vil det være lurt å bruke CSSNext. Ikke glem gode CSS-forbehandlere, som Sass eller MINDRE. Du tenker kanskje - så mange verktøy, jeg vedder på at skrivestiler er forskjellige for hver av dem. Ja du har rett. Men det grunnleggende er det samme.

I denne artikkelen vil jeg presentere et par fine tips for å skrive robust og vedlikeholdbar CSS, uansett om du er fan av å bruke CSS-moduler eller Sass / LESS. Disse tipsene presenteres i SCSS-syntaks, så hvis du trenger en introduksjon til Sass, er her et bra sted å starte. Hvis du bruker vanlig CSS, utvidet med CSS Next, er denne artikkelen også for deg. Disse grunnleggende konseptene kan enkelt brukes i andre CSS-verktøy eller forbehandlere.

Strukturér stilene dine

Gjennomtenkt mappestruktur hjelper deg med å opprettholde prosjektet ditt. Det samme gjelder stilene dine. Det er viktig å dele koden din i henhold til elementer de refererer til. Å lagre alle reglene dine i en enorm stil.scss-fil vil føre til problemer sikkert. Spesielt hvis du vil skalere opp prosjektet og legge til nye komponenter.

Når det gjelder skalering av prosjektet, er det viktig å sette riktig stilstruktur. Du bør fokusere på å tilby struktur, som vil bestille filene dine i henhold til komponenter du bruker i prosjektet ditt. Jeg foreslår at du skiller basestiler fra komponent- og temastiler. Det er også fornuftig å kombinere alle mixins og variabler i en mappe, avhengig av deres rolle.

Nedenfor er et eksempel på mappestruktur:

Og main.scss:

Gi fargene navn

Så, du har et nettsteddesign, og du vil starte med kodingslayout. Hva ville være en klok tilnærming for å håndtere farger i prosjektet ditt? Du kan ganske enkelt skrive fargeverdier direkte i stilregler. Men denne tilnærmingen kan være plagsom i fremtiden. Heldigvis gir både CSS og Sass oss variabler.

I Sass kan du lagre hvilken som helst verdi som variabel, så det er rimelig å lagre fargeverdi som variabel. Stort sett bruker vi HEX (hexadecimals) for å definere fargeverdi. For mennesket ser HEX ut som cyper, fordi det er et format designet for datamaskiner. Det er vanskelig å si hvilken farge som er skrevet som # 7fffd4 eller # ffd700 (hvis du forstår dem, er det mulig at du vil mislykkes CAPTCHA-testen). Den første er akvamarin og den andre er gull. Ville det ikke være lettere å ha navnene på fargene på den måten?

Noen av fargene har spesifikke roller i design av nettsteder. Den ene fargen kan brukes som merkefarge, den andre er ment som bakgrunn. Selv om vi skriver kode for nettleseren, bør vi bygge en robust struktur for fargene våre. Det er bra å ha litt hjelp fra designeren. Hvis du ikke kan overbevise ham om å beskrive fargepalett, kan du likevel gjøre det selv.

For det første bør du begynne med å navngi fargene. Definitivt er det vanskelig å oversette HEX-verdien til menneskelig lesbart navn. Heldigvis har vi riktige verktøy for det. Jeg bruker Name that Color-nettstedet, men du kan bruke et hvilket som helst annet verktøy du foretrekker.

Når du har navn på fargene dine, kan du tildele roller til dem. Du bør definere hvilken farge som brukes som primær, og hvilken som er en sekundær. Hvis du ikke er sikker på hvordan du angir roller for fargene dine, kan du hente litt inspirasjon fra Bootstraps fargeskjema.

Her er et eksempel på fargeoppsett:

Flatet nestede erklæringer

Å bruke CSS-forbehandler legger ikke bare noen nyttige funksjoner til verktøyet ditt, men hjelper også med kodeorganisering. Det beste eksemplet er stilserklæringen. I Sass er det mulig å hekke velger i andre velgere, slik at du kan se hva som er forholdet mellom dem. Det er virkelig kraftig funksjon, så det kan brukes over ganske enkelt.

Jeg foreslår at du ikke går mer enn tre nivåer dypt. Denne regelen gjelder både for selektors spesifisitet og selgere som hekker i CSS-forbehandlere. Hvis du går utover denne grensen, øker ikke bare styrken til velgeren, men det kan også gjøre det vanskelig å lese koden din.

Se et eksempel nedenfor:

Ikke bruk for mye av foreldrenes referanse

I Sass er det mulig å få referanse til velgerens overordnede. I kombinasjon med hekking kan du definere regler som trenger foreldrenes velger. For eksempel:

Noen ganger kan bruk av & være misvisende. Her er et eksempel på dårlig bruk av denne velgeren:

Som du kan se, kan forsterkervelgeren legge unødvendig kompleksitet til stilene dine og gjøre lesing av koden din vanskelig.

Skriv egenskaper i meningsfylt rekkefølge

Du trenger ikke å sortere eiendommene, men det bør du gjøre. Riktig sorterte egenskaper indikerer at kodestilen din er konsekvent. Dessuten gjør det skanning av koden din mer praktisk. Det er ingen kilde til sannhet når det gjelder sortering av eiendommer. Du kan sortere dem alfabetisk eller etter andre preferanser. Jeg bruker litt modifiserte regler som er inkludert i formateringsretningslinjer for SMACSS-metodikk. Her er min anbefalte bestilling:

  • Boks (posisjon, skjerm, bredde, margin osv.)
  • Tekst
  • Bakgrunn
  • Grense
  • Annet (alfabetisk)

Bruk klassens navnekonvensjon

Når prosjektet ditt vokser, kan stiler bli ganske rotete. Spesielt når du trenger å utvide eksisterende regler. Dessverre tilbyr CSS ingen nyttige mekanismer, noe som kan forhindre sammenstøt mellom navneområdet. Med andre ord, alle stiler skrevet i CSS er globale, så det er veldig mulig at du uventet kan overskrive noen egenskaper.

På grunn av CSS 'cascading natur, er det viktig å definere veldig spesifikke velgere. Det betyr ikke at du skal bruke velgere med høy spesifisitet. Du må unngå generelle velgere, som tagvelgere, når du vil legge til stiler for et bestemt element.

Her er et eksempel:

Forhåpentligvis er det ikke så vanskelig å skrive vedlikeholdbare stiler når vi kan bruke en av de populære navnekonvensjonene for klassen - BEM, OOCSS eller SMACSS. Jeg foretrekker BEM, som er en veldig populær metodikk laget av Yandex-utviklere. Navnet er et forkortelse av blokk-, modifiserings- og elementord. Hvis du ikke er kjent med BEM, foreslår jeg at du leser dokumentasjonen.

Her er vårt eksempel, etter beklagelse:

Skriv beskrivende mediesøk

Mediesøk er den viktigste delen av responsiv nettstedutvikling. Takket være dem kan vi definere stiler for forskjellige oppløsninger og endre layout i henhold til brukerens enhet. I CSS er mediesøk et sett med regler som testes mot brukerens nettleser. Når de er oppfylt, brukes stiler som er definert i mediesøkeblokken på nettstedet.

Du kan målrette deg mot forskjellige enheter ved å bruke spørsmål, som beskriver typer og funksjoner for medier. På grunn av de mange reglenes kombinasjoner, kan mediesøk bli ganske komplekse.

For å gjøre mediesøknader mer utviklingsvennlige kan vi tilordne regler til en variabel. I Sass er det mulig å bruke streng som vanlig CSS-kode ved å bruke interpolasjonsstolene # {}.

Det samme trikset vi kan bruke til andre at-regler. Det kan være nyttig for å definere komplekse @supports-regler.

Legg til modulære stiler

CSS har et sett med veldig nyttige velgere. I de fleste tilfeller bruker du klassevalg eller etterkommervelger. Men det er en annen velger, som er effektiv for å skrive modulære stiler. Det er den tilstøtende søskenvelgeren, også kjent som plussvelgeren.

La oss tenke oss at du ønsker å skrive stiler som bare brukes når noe element går foran velgerelementet. Du kan for eksempel legge til margin til artikkelteksten når den har en tittel. Slik kan du gjøre det:

Det er en veldig praktisk måte å definere stiler på, og favoritten min. Men det er noen avveininger. For det første er det ikke den mest utøvende velgeren. Hvis du bryr deg mer om ytelse snarere enn modularitet, bør du ikke bruke den. For det andre øker bruken av søskenvelger spesifiseringen, så det kan være vanskelig å overskrive stilene senere. Det er jo verdt å bruke det når du vil bruke stiler basert på elementers tilstedeværelse.

Videre lesning

Nå vet du hvordan du skriver lesbare, vedlikeholdbare og modulære stiler. Hvis du trenger flere råd om hvordan du skriver stiler å være stolt av, kan du se disse artiklene:

  • Sass fargevariabler som ikke suger av Landon Schropp
  • Avansert SCSS, eller 16 kule ting du kanskje ikke har kjent dine stilark kunne gjøre av Jarno Rantanen
  • Tilstøtende søskenvelger spesifikasjoner av W3C
  • Modulære CSS navnekonvensjoner av John W. Long
  • Responsive Web Design in Sass av Mason Wendell
  • Hvordan strukturere et Sass-prosjekt av John W. Long

Du likte det? Trykk på -knappen! Takk skal du ha!

Du kan finne meg på Twitter og Github.