Konvencije o imenovanju CSS-a koje će vam uštedjeti sate otklanjanja pogrešaka

Čuo sam da mnogi programeri kažu da mrze CSS. Prema mom iskustvu, to dolazi kao rezultat nenalaženja vremena za učenje CSS-a.

Korejski ??

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

CSS nije najljepši 'jezik', ali već više od 20 godina uspješno pokreće oblikovanje weba. Ne ide ti loše, ha?

Međutim, kako pišete više CSS-a, brzo vidite jedan veliki nedostatak.

Prokleto je teško održavati CSS.

Loše napisan CSS brzo će se pretvoriti u noćnu moru.

Evo nekoliko pravila imenovanja koja će vam uštedjeti malo stresa i nebrojene sate.

Upotrijebite znakove razgraničene crticom

Ako pišete puno JavaScript-a, tada je uobičajena praksa pisanje varijabli u slučaju deve.

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

Super, zar ne?

Problem je u tome što ovaj oblik imenovanja nije prikladan za CSS.

Nemojte to raditi:

.redBox { border: 1px solid red;}

Umjesto toga, učinite ovo:

.red-box { border: 1px solid red;}

Ovo je prilično standardna CSS konvencija imenovanja. Vjerojatno je čitljiviji.

Također je u skladu s CSS imenima svojstava.

// Correct
.some-class { font-weight: 10em}
// Wrong
.some-class { fontWeight: 10em}

Konvencija o imenovanju BEM

Timovi imaju različite pristupe pisanju CSS selektora. Neki timovi koriste se razdjelnicima crtica, dok drugi radije koriste strukturiraniju konvenciju imenovanja koja se naziva BEM.

Općenito postoje 3 problema koja CSS konvencije imenovanja pokušavaju riješiti:

  1. Da biste znali što selektor radi, samo gledajući njegovo ime
  2. Da biste imali ideju gdje se selektor može koristiti, samo gledajući ga
  3. Da biste znali odnos između imena razreda, samo gledajući ih

Jeste li ikada vidjeli ovako napisana imena razreda:

.nav--secondary { ...}
.nav__header { ...}

To je BEM konvencija o imenovanju.

Objašnjenje BEM-a 5-godišnjaku

BEM pokušava podijeliti cjelokupno korisničko sučelje na male komponente za višekratnu upotrebu.

Razmotrite donju sliku:

Ne, nije nagrađivano :(

Stick-man predstavlja komponentu, poput bloka dizajna.

Možda ste već pogodili da B u BEM znači "Blokiraj".

U stvarnom svijetu ovaj 'blok' može predstavljati navigaciju web stranicom, zaglavlje, podnožje ili bilo koji drugi blok dizajna.

Slijedeći prethodno objašnjenu praksu, idealno ime razreda za ovu komponentu bilo bi stick-man.

Komponenta bi trebala biti oblikovana ovako:

.stick-man { }

Ovdje smo koristili razgraničene nizove. Dobro!

E za elemente

E u 'BEM' označava Elemente.

Sveukupni blokovi dizajna rijetko žive izolirano.

Na primjer, stick-man ima headdva, prekrasna armsi feet.

head, feetTe armssu svi elementi unutar komponente. Mogu se promatrati kao podređene komponente, tj. Djeca ukupne roditeljske komponente.

Korištenjem BEM konvencije imenovanja, nazivi klasa elemenata izvode se dodavanjem dvije donje crte, nakon čega slijedi ime elementa.

Na primjer:

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

M za modifikatore

M u 'BEM' označava Modifikatore.

Što ako je stick-čovjek je izmijenjena i da bismo mogli imati blueili ima redStick čovjek?

U stvarnom svijetu ovo bi mogao biti redgumb ili bluegumb. To su preinake predmetne komponente.

Koristeći BEM, imena klasa modifikatora izvode se dodavanjem dvije crtice iza kojih slijedi ime elementa.

Na primjer:

.stick-man--blue {
}
.stick-man--red {
}

Posljednji primjer pokazao je da se nadređena komponenta mijenja. To nije uvijek slučaj.

Što bi bilo da imamo muškarce s headpalicama različitih veličina?

Ovaj je put element izmijenjen. Zapamtite, element je podređena komponenta unutar ukupnog bloka koji sadrži.

.stick-manPredstavlja Block, .stick-man__headelement.

Kao što se vidi u gornjem primjeru, dvostruke crtice također se mogu koristiti ovako:

.stick-man__head--small {
}
.stick-man__head--big {
}

Opet, imajte na umu upotrebu dvostrukih crtica u gornjem primjeru. Ovim se označava modifikator.

Sad ste shvatili.

U osnovi tako funkcionira BEM konvencija o imenovanju.

Osobno koristim samo nazive klasa crtica delimetar za jednostavne projekte, a BEM za više uključena korisnička sučelja.

Možete pročitati više o BEM-u.

BEM - Modifikator blokovnog elementa

BEM - Block Element Modifier je metodologija koja vam pomaže da postignete komponente za višekratnu upotrebu i dijeljenje koda u… getbem.com

Zašto koristiti konvencije o imenovanju?

U računarstvu postoje samo dva teška problema: poništavanje predmemorije i imenovanje stvari - Phil Karlton

Imenovanje stvari je teško. Pokušavamo olakšati stvari i uštedjeti vrijeme u budućnosti pomoću održivijeg koda.

Pravilno imenovanje stvari u CSS-u olakšat će čitanje i održavanje vašeg koda.

Ako odlučite koristiti konvenciju imenovanja BEM, postat će lakše vidjeti odnos između komponenata / blokova vašeg dizajna samo gledanjem oznaka.

Osjećate li se samopouzdano?

CSS imena s JavaScript kukama

Johnu je danas prvi dan na poslu.

Predaje mu se HTMLkod koji izgleda ovako:

John je pročitao ovaj članak i shvaća da ovo možda nije najbolji način za imenovanje stvari CSS. Dakle, on nastavlja i refaktorizira bazu koda ovako:

Izgleda dobro, ha?

Johnu nepoznato, razbio je šifru ???

Kako?

Negdje u JavaScript kodu postojala je veza s prethodnim nazivom klase siteNavigation:

//the Javasript code
const nav = document.querySelector('.siteNavigation')

Dakle, s promjenom imena klase, navvarijabla je postala null.

Kako je tužno.

Kako bi spriječili ovakve slučajeve, programeri su osmislili različite strategije.

1. Koristite imena klase js-

Jedan od načina za ublažavanje takvih grešaka je korištenje a js-*naziv klase za označavanje odnosa s predmetnim DOM elementom.

Na primjer:

I u JavaScript kodu:

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

Kao js-site-navigationdogovor , svatko tko vidi ime klase razumio bi da postoji veza s tim DOM elementom u JavaScript kodu.

2. Upotrijebite atribut Rel

I sam se ne koristim ovom tehnikom, ali vidio sam da ljudi to rade.

Prepoznajete li ovo?

U osnovi, atribut rel definira odnos povezanog resursa prema dokumentu iz kojeg je upućen.

U prethodnom primjeru s Johnom, zagovornici ove tehnike učinili bi ovo:

I u JavaScriptu:

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

Sumnjam u ovu tehniku, ali vjerojatno ćete je naići u nekim bazama kodova. Ovdje se tvrdi: "Pa, postoji veza s Javascriptom, pa koristim atribut rel da to označim" .

Web je veliko mjesto s puno različitih "metoda" za rješavanje istog problema.

3. Ne koristite atribute podataka

Neki programeri koriste atribute podataka kao JavaScript kuke. Ovo nije u redu. Po definiciji, atributi podataka koriste se za pohranu prilagođenih podataka .

Uredi # 1: Kao što su spomenuli neki nevjerojatni ljudi u odjeljku za komentare, ako ljudi koriste atribut 'rel', tada je možda u redu koristiti atribute podataka u određenim slučajevima. To je vaš poziv nakon svega.

Bonus savjet: Napišite više CSS komentara

To nema nikakve veze s konvencijama imenovanja, ali uštedjet ćete i malo vremena.

Iako se mnogi web programeri trude NE pisati JavaScript komentare ili se držati nekoliko, mislim da biste trebali napisati više CSS komentara.

Budući da CSS nije najelegantniji "jezik", dobro strukturirani komentari mogu uštedjeti vrijeme kada pokušavate razumjeti svoj kod.

Ne boli.

Pogledajte koliko je dobro komentiran izvorni kod Bootstrapa.

Ne trebate pisati komentare da biste rekli da color: redće dati crvenu boju. Ali ako koristite CSS trik koji je manje očit, slobodno napišite komentar.

Jeste li spremni postati profesionalci?

Stvorio sam besplatni CSS vodič kako biste odmah stekli vaše CSS vještine. Nabavite besplatnu e-knjigu.