Am auzit că mulți dezvoltatori spun că urăsc CSS. Din experiența mea, acest lucru vine ca urmare a faptului că nu ați luat timp pentru a învăța CSS.

Coreeană ??

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

CSS nu este cel mai frumos „limbaj”, dar a alimentat cu succes stilul web de peste 20 de ani. Nu te descurcă prea rău, nu?

Cu toate acestea, pe măsură ce scrieți mai multe CSS, vedeți rapid un mare dezavantaj.

Este foarte greu să întreții CSS.

ad-banner

CSS slab scris se va transforma rapid într-un coșmar.

Iată câteva convenții de numire care vă vor economisi un pic de stres și nenumărate ore în jos.

Conventii de denumire CSS care va vor economisi ore de
ai mai fost acolo, nu-i așa?

Utilizați șiruri delimitate cu cratimă

Dacă scrieți o mulțime de JavaScript, atunci scrierea variabilelor în caz de cămilă este o practică obișnuită.

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

Super, nu?

Problema este că această formă de denumire nu este potrivită pentru CSS.

Nu face asta:

.redBox {  border: 1px solid red;}

În schimb, faceți acest lucru:

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

Aceasta este o convenție destul de standardă de denumire CSS. Este, fără îndoială, mai lizibil.

De asemenea, este în concordanță cu numele proprietăților CSS.

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

Convenția de numire BEM

Echipele au abordări diferite pentru a scrie selectoare CSS. Unele echipe folosesc delimitatori de cratime, în timp ce altele preferă să utilizeze convenția de denumire mai structurată numită BEM.

În general, există 3 probleme pe care convențiile de denumire CSS încearcă să le rezolve:

  1. Să știți ce face un selector, doar uitându-vă la numele acestuia
  2. Pentru a avea o idee despre locul în care un selector poate fi folosit, doar privindu-l
  3. Pentru a cunoaște relațiile dintre numele clasei, doar privindu-le

Ați văzut vreodată nume de curs scrise astfel:

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

Aceasta este convenția de numire BEM.

Explicați BEM unui copil de 5 ani

BEM încearcă să împartă interfața generală a utilizatorului în componente mici reutilizabile.

Luați în considerare imaginea de mai jos:

Conventii de denumire CSS care va vor economisi ore de
Este o imagine premiată a unui om-băț 🙂

Nu, nu este premiat 🙁

Omul-stick reprezintă o componentă, cum ar fi un bloc de design.

Este posibil să fi ghicit deja că B din BEM înseamnă „Block”.

În lumea reală, acest „bloc” ar putea reprezenta o navigație a site-ului, antet, subsol sau orice alt bloc de design.

Urmând practica explicată mai sus, ar fi un nume de clasă ideal pentru această componentă stick-man.

Componenta ar trebui să fie astfel:

.stick-man {   }

Aici am folosit șiruri delimitate. Bun!

1611765669 820 Conventii de denumire CSS care va vor economisi ore de

E pentru Elements

E în „BEM” înseamnă Elements.

Blocurile generale de design rareori trăiesc izolate.

De exemplu, omul-băț are un head, două superbe arms, și feet.

1611765669 249 Conventii de denumire CSS care va vor economisi ore de

head , feet, și arms sunt toate elementele din cadrul componentei. Ele pot fi văzute ca componente copil, adică copii ai componentei părinte generale.

Folosind convenția de denumire BEM, numele claselor de elemente sunt derivate prin adăugare două sublinieri, urmat de numele elementului.

De exemplu:

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

M pentru modificatori

M din „BEM” înseamnă Modificatori.

Ce se întâmplă dacă omul-băț a fost modificat și am putea avea un blue sau a red stick-man?

1611765669 352 Conventii de denumire CSS care va vor economisi ore de

În lumea reală, acesta ar putea fi un red buton sau blue buton. Acestea sunt modificări ale componentei în cauză.

Folosind BEM, numele claselor modificatoare sunt derivate prin adăugarea a două cratime urmat de numele elementului.

De exemplu:

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

Ultimul exemplu a arătat modificarea componentei părinte. Nu este întotdeauna cazul.

Ce-ar fi dacă am avea bărbați diferiți head marimi?

1611765669 598 Conventii de denumire CSS care va vor economisi ore de

De data aceasta elementul a fost modificat. Amintiți-vă, elementul este o componentă secundară din cadrul blocului global care conține.

.stick-man reprezintă Block , .stick-man__head elementul.

După cum se vede în exemplul de mai sus, cratimele duble pot fi, de asemenea, utilizate astfel:

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

Din nou, rețineți utilizarea dublei cratime în exemplul de mai sus. Acesta este folosit pentru a indica un modificator.

Acum o ai.

Practic, așa funcționează convenția de numire BEM.

Personal, tind să folosesc numai denumirile claselor de delimitare cu cratime pentru proiecte simple și BEM pentru interfețe de utilizator mai implicate.

Poti Citeste mai mult despre BEM.

BEM – Block Element Modifier
BEM – Block Element Modifier este o metodologie care vă ajută să realizați componente reutilizabile și partajarea codului în …getbem.com

De ce să folosiți convențiile de denumire?

Există doar două probleme dure în informatică: invalidarea cache-ului și denumirea lucrurilor – Phil Karlton

Numirea lucrurilor este grea. Încercăm să ușurăm lucrurile și să economisim timp în viitor cu un cod mai ușor de întreținut.

Numirea corectă a lucrurilor în CSS va face codul dvs. mai ușor de citit și întreținut.

Dacă alegeți să utilizați convenția de denumire BEM, va deveni mai ușor să vedeți relația dintre componentele / blocurile de proiectare doar uitându-vă la marcaj.

Te simți încrezător?

Numele CSS cu cârlige JavaScript

Astăzi este prima zi de lucru a lui John.

El este predat un HTML cod care arată astfel:

<div class="siteNavigation">
</div>

John a citit acest articol și își dă seama că este posibil să nu fie cel mai bun mod de a numi lucrurile CSS. Deci, el merge mai departe și refactorizează baza de cod așa:

<div class="site-navigation">
</div>

Arată bine, nu?

Necunoscut lui John, el a rupt baza de cod ???

Cum?

Undeva în codul JavaScript, a existat o relație cu numele clasei anterioare, siteNavigation:

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

Deci, odată cu schimbarea numelui clasei, nav variabilă a devenit null.

Ce trist.

Pentru a preveni astfel de cazuri, dezvoltatorii au venit cu strategii diferite.

1. Folosiți numele clasei js

O modalitate de a atenua astfel de bug-uri este utilizarea unui js-* numele clasei pentru a indica o relație cu elementul DOM în cauză.

De exemplu:

<div class="site-navigation js-site-navigation">
</div>

Și în codul JavaScript:

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

Ca o convenție, oricine vede js-site-navigation numele clasei ar înțelege că există o relație cu acel element DOM în codul JavaScript.

2. Folosiți atributul Rel

Nu folosesc eu însămi această tehnică, dar am văzut cum o fac.

Recunoști asta?

<link rel="stylesheet" type="text/css" href="https://www.freecodecamp.org/news/css-naming-conventions-that-will-save-you-hours-of-debugging-35cea737d849/main.css">

Practic, atribut rel definește relația pe care o are resursa legată cu documentul din care face trimitere.

În exemplul anterior cu John, susținătorii acestei tehnici ar face acest lucru:

<div class="site-navigation" rel="js-site-navigation">
</div>

Și în JavaScript:

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

Am îndoielile mele cu privire la această tehnică, dar probabil că o veți întâlni în unele baze de coduri. Afirmația aici este, „Ei bine, există o relație cu Javascript, așa că folosesc atributul rel pentru a indica asta”.

Web-ul este un loc mare, cu o mulțime de „metode” diferite pentru rezolvarea aceleiași probleme.

3. Nu utilizați atribute de date

Unii dezvoltatori folosesc atribute de date ca cârlige JavaScript. Nu este corect. Prin definiție, sunt folosite atributele de date pentru a stoca date personalizate.

1611765669 308 Conventii de denumire CSS care va vor economisi ore de
Utilizarea bună a atributelor de date. După cum se vede pe Twitter

Ediția nr. 1: După cum sa menționat de unii oameni uimitori în secțiunea de comentarii, dacă oamenii folosesc atributul „rel”, atunci este probabil în regulă să folosiți atribute de date în anumite cazuri. Este apelul tău după toate.

Sfat bonus: scrieți mai multe comentarii CSS

Acest lucru nu are nicio legătură cu convențiile de denumire, dar vă va economisi și ceva timp.

În timp ce mulți dezvoltatori web încearcă să NU scrie comentarii JavaScript sau să se mențină la câteva, cred că ar trebui să scrieți mai multe comentarii CSS.

Deoarece CSS nu este cel mai elegant „limbaj”, comentariile bine structurate pot economisi timp când încercați să vă înțelegeți codul.

Nu doare.

Uitați-vă la cât de bine a comentat Bootstrap-ul cod sursa este.

Nu trebuie să scrieți comentarii pentru a spune color: red va da o culoare roșie. Dar, dacă utilizați un truc CSS care este mai puțin evident, nu ezitați să scrieți un comentariu.

Sunteți gata să deveniți Pro?

Am creat un ghid CSS gratuit pentru a vă oferi imediat abilitățile dvs. CSS. Obțineți cartea electronică gratuită.

1611765669 157 Conventii de denumire CSS care va vor economisi ore de
Șapte secrete CSS despre care nu știați