CSS-navngivningskonventioner, der sparer dig timer med fejlfinding

Jeg har hørt mange udviklere sige, at de hader CSS. Efter min erfaring kommer dette som et resultat af ikke at tage sig tid til at lære CSS.

Koreansk?

알림: 한국인 독자 분들 을 위해 본 기사 는 한국어 로 번역 되었으며, 한국어 버전 은 여기 에서 보실 수 있습니다

CSS er ikke det smukkeste 'sprog', men det har med succes styret stylingen af ​​nettet i over 20 år nu. Ikke gør det for dårligt, ikke?

Efterhånden som du skriver mere CSS, ser du hurtigt en stor ulempe.

Det er vanskeligt at vedligeholde CSS.

Dårligt skrevet CSS vil hurtigt blive et mareridt.

Her er et par navnekonventioner, der sparer dig for lidt stress og utallige timer på linjen.

har du været der før, ikke?

Brug bindestreg afgrænsede strenge

Hvis du skriver en masse JavaScript, er det almindeligt at skrive variabler i kameltilfælde.

var redBox = document.getElementById ('...')

Fantastisk, ikke?

Problemet er, at denne form for navngivning ikke er velegnet til CSS.

Gør det ikke:

.redBox {
  kant: 1px massiv rød;
}

I stedet gør dette:

.red-box {
   kant: 1px massiv rød;
}

Dette er en temmelig standard CSS-navnekonvention. Det er nok mere læsbart.

Det er også i overensstemmelse med CSS-ejendomsnavne.

// Korrekt
. nogle klasse {
   font-vægt: 10em
}
// Forkert
. nogle klasse {
   fontWeight: 10em
}

BEM-navnekonventionen

Holdene har forskellige tilgange til at skrive CSS-vælgere. Nogle hold bruger bindestregsafgrænsere, mens andre foretrækker at bruge den mere strukturerede navnekonvention, der kaldes BEM.

Generelt er der 3 problemer, som CSS-navnekonventioner forsøger at løse:

  1. At vide, hvad en vælger gør, bare ved at se på navnet
  2. At få en idé om, hvor en vælger kan bruges, bare ved at se på den
  3. At kende forholdet mellem klassens navne bare ved at se på dem

Har du nogensinde set klassenavne skrevet sådan:

.nav - sekundær {
  ...
}
.nav__header {
  ...
}

Det er BEM-navnekonventionen.

At forklare BEM til en 5-årig

BEM forsøger at opdele den samlede brugergrænseflade i små genanvendelige komponenter.

Overvej billedet herunder:

Det er et prisvindende billede af en stick-man :)

Nej, det er ikke prisvindende :(

Stick-man repræsenterer en komponent, såsom en blok af design.

Du har måske allerede gættet, at B i BEM står for 'Blok'.

I den virkelige verden kunne denne 'blok' repræsentere en navigation på websteder, header, sidefod eller enhver anden blok af design.

Efter den praksis, der er forklaret ovenfor, ville et ideelt klassnavn for denne komponent være stick-man.

Komponenten skal være stil således:

.stick-man {
  
 }

Vi har brugt afgrænsede strenge her. Godt!

E til elementer

E i 'BEM' står for Elements.

Overordnede blokke af design lever sjældent isoleret.

For eksempel har pindemanden et hoved, to smukke arme og fødder.

Hovedet, fødderne og armene er alle elementer i komponenten. De kan ses som børnekomponenter, dvs. børn af den samlede forældrekomponent.

Ved hjælp af BEM-navnekonventionen afledes elementklassenavne ved at tilføje to understregninger, efterfulgt af elementnavnet.

For eksempel:

.stick-man__head {
}
.stick-man__arms {
}
.stick-man__feet {
}

M til modifikatorer

M i 'BEM' står for Modifiers.

Hvad hvis pindmanden blev ændret, og vi kunne have en blå eller en rød pindemand?

I den virkelige verden kan dette være en rød knap eller en blå knap. Dette er ændringer af den pågældende komponent.

Ved hjælp af BEM afledes modifikationsklassenavne ved at tilføje to bindestreger efterfulgt af elementnavnet.

For eksempel:

.stick-man - blå {
}
.stick-man - rød {
}

Det sidste eksempel viste, at den overordnede komponent blev ændret. Dette er ikke altid tilfældet.

Hvad hvis vi havde pindmænd i forskellige hovedstørrelser?

Denne gang er elementet blevet ændret. Husk, at elementet er en underordnet komponent i den samlede indeholdende blok.

.Stickmanden repræsenterer blokken, .stick-man__hovedet elementet.

Som det ses i eksemplet ovenfor, kan dobbelt bindestreger også bruges sådan:

.stick-man__head - lille {
}
.stick-man__head - stor {
}

Bemærk igen brugen af ​​de dobbelte bindestreger i eksemplet ovenfor. Dette bruges til at betegne en modifikator.

Nu har du det.

Det er dybest set, hvordan BEM-navnekonventionen fungerer.

Personligt har jeg en tendens til kun at bruge bindestreger, delimeter klasse-navne til enkle projekter, og BEM til mere involverede brugergrænseflader.

Du kan læse mere om BEM.

Hvorfor bruge navnekonventioner?

Der er kun to hårde problemer inden for datalogi: cache-ugyldighed og navngivning af ting - Phil Karlton

At navngive ting er svært. Vi forsøger at gøre tingene lettere og spare os tid i fremtiden med en mere vedligeholdelig kode.

At navngive ting korrekt i CSS vil gøre din kode lettere at læse og vedligeholde.

Hvis du vælger at bruge BEM-navnekonventionen, bliver det lettere at se forholdet mellem dine designkomponenter / blokke bare ved at se på markeringen.

Føler du dig selvsikker?

CSS-navne med JavaScript-kroge

I dag er Johns første dag på arbejde.

Han overleveres en HTML-kode, der ser sådan ud:

John har læst denne artikel og er klar over, at dette muligvis ikke er den bedste måde at navngive ting i CSS. Så han går videre og refaktorer codebase som sådan:

Ser godt ud, ikke?

Ukendt for John, han havde brudt codebase

Hvordan?

Et sted i JavaScript-koden var der et forhold til det forrige klassens navn, siteNavigation:

// Javasript-koden
const nav = document.querySelector ('. siteNavigation')

Så med ændringen i klassens navn blev nav-variablen nul.

Hvor trist.

For at forhindre sager som dette har udviklere fundet forskellige strategier.

1. Brug js- klasse-navne

En måde at afbøde sådanne fejl er at bruge et js- * -klassenavn til at betegne et forhold til det pågældende DOM-element.

For eksempel:

Og i JavaScript-koden:

// Javasript-koden
const nav = document.querySelector ('. js-site-navigation')

Som en konvention forstår enhver, der ser navnet på js-site-navigation class, at der er et forhold til det DOM-element i JavaScript-koden.

2. Brug attributten Rel

Jeg bruger ikke denne teknik selv, men jeg har set folk gøre det.

Kender du dette?

Grundlæggende definerer rel-attributten forholdet, som den tilknyttede ressource har til det dokument, hvorfra den er henvist.

I det forrige eksempel med John ville fortalere for denne teknik gøre dette:

Og i JavaScript:

const nav = document.querySelector ("[rel = 'js-site-navigation']")

Jeg er i tvivl om denne teknik, men du vil sandsynligvis komme over den i nogle kodebaser. Påstanden her er, "ja, der er et forhold til Javascript, så jeg bruger rel-attributten til at betegne det".

Internettet er et stort sted med masser af forskellige ”metoder” til at løse det samme problem.

3. Brug ikke dataattributter

Nogle udviklere bruger dataattributter som JavaScript-kroge. Dette stemmer ikke. Per definition bruges dataattributter til at gemme brugerdefinerede data.

God brug af dataattributter. Som set på Twitter

Redigering nr. 1: Som nævnt af nogle fantastiske mennesker i kommentarsektionen, hvis folk bruger attributten 'rel', så er det måske okay at bruge dataattributter i visse tilfælde. Det er dit opkald.

Bonustips: Skriv flere CSS-kommentarer

Dette har intet at gøre med navngivningskonventioner, men det sparer dig også lidt tid.

Mens mange webudviklere forsøger at IKKE skrive JavaScript-kommentarer eller holde sig til et par få, synes jeg, du skal skrive flere CSS-kommentarer.

Da CSS ikke er det mest elegante "sprog", kan velstrukturerede kommentarer spare tid, når du prøver at forstå din kode.

Det gør ikke ondt.

Se på hvor godt kommenteret Bootstrap-kildekoden er.

Du behøver ikke at skrive kommentarer for at sige farve: rød giver en rød farve. Men hvis du bruger et CSS-trick, der er mindre indlysende, er du velkommen til at skrive en kommentar.

Klar til at blive Pro?

Jeg har oprettet en gratis CSS-guide til straks at få dine CSS-færdigheder til at blusse. Hent den gratis e-bog.

Syv CSS-hemmeligheder, som du ikke vidste om