CSS-i nimetamine konventsioonidele, mis säästavad tunde silumist

Olen kuulnud, et paljud arendajad ütlevad, et nad vihkavad CSS-i. Minu kogemus tuleneb sellest, et CSS-i õppimiseks pole aega kulunud.

Korealane ??

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

CSS pole küll kõige ilusam „keel”, kuid on nüüdseks juba üle 20 aasta edukalt veebi stiili kujundanud. Ei lähe liiga halvasti, mis?

Kuid rohkem CSS-i kirjutades näete kiiresti ühte suurt miinust.

CSS-i hooldamine on paganama keeruline.

Halvasti kirjutatud CSS-st saab kiiresti õudusunenägu.

Siin on mõned nimetamisviisid, mis säästavad natuke stressi ja lugematuid tunde.

Kasutage sidekriipsuga eraldatud stringe

Kui kirjutate palju JavaScripti, on muutujate kirjutamine kaameli puhul tavaline tava.

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

Suurepärane, eks?

Probleem on selles, et see nimetamisvorm ei sobi CSS-i jaoks hästi.

Ärge tehke seda:

.redBox { border: 1px solid red;}

Selle asemel tehke järgmist:

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

See on üsna tavaline CSS-i nimetamiskord. See on vaieldamatult loetavam.

Samuti on see kooskõlas CSS-i omaduste nimedega.

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

BEMi nimetamise konventsioon

Meeskondadel on CSS-i valijate kirjutamisel erinev lähenemine. Mõni meeskond kasutab sidekriipsude eraldajaid, teised aga eelistavad kasutada struktureeritumat nimetamiskorda BEM.

Üldiselt on CSS-i nimetamiskonventsioonide abil lahendada 3 probleemi:

  1. Et teada saada, mida valija teeb, lihtsalt selle nime vaadates
  2. Et saada aimu, kus valijat saab kasutada, lihtsalt seda vaadates
  3. Et teada saada klassinimede vahelisi seoseid, lihtsalt neid vaadates

Kas olete kunagi näinud nii kirjutatud klasside nimesid:

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

See on BEM-i nimetamise konventsioon.

BEM-i selgitamine viieaastasele

BEM üritab üldise kasutajaliidese jagada väikesteks korduvkasutatavateks komponentideks.

Mõelge allolevale pildile:

Ei, see ei ole auhinnatud :(

Kepp-mees tähistab komponenti, näiteks kujundusplokki.

Võib-olla olete juba arvanud, et BEM-i B tähistab "Block".

Reaalses maailmas võib see "plokk" tähistada saidi navigeerimist, päist, jalust või muud kujundusplokki.

Järgides eespool selgitatud tava, oleks selle komponendi jaoks ideaalne klassi nimi stick-man.

Komponent peaks olema kujundatud järgmiselt:

.stick-man { }

Oleme siin kasutanud piiritletud stringe. Hea!

E elementide jaoks

'BEM' tähis E tähistab elemente.

Üldised disainiplokid elavad harva eraldatuna.

Näiteks on pulgamehel headkaks uhket armsja feet.

head, feetJa armskõik elemendid komponent. Neid võib vaadelda kui lapsekomponente, st vanema üldkomponendi lapsi.

Kasutades BEM-i nimetamiskonventsiooni, tuletatakse elementide klasside nimed, lisades kaks alakriipsu, millele järgneb elemendi nimi.

Näiteks:

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

M muutjate jaoks

'BEM' tähis M tähistab muutjaid.

Mis oleks, kui pulgameest muudetaks ja meil võiks olla pulgamees bluevõi redpulgamees?

Reaalses maailmas võib see olla rednupp või bluenupp. Need on kõnealuse komponendi modifikatsioonid.

BEM-i kasutades tuletatakse modifikaatorite klasside nimed, lisades kaks sidekriipsu, millele järgneb elemendi nimi.

Näiteks:

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

Viimane näide näitas, et vanemkomponenti muudeti. See pole alati nii.

Mis oleks, kui meil oleks erineva headsuurusega pulgamehi?

Seekord on elementi muudetud. Pidage meeles, et element on lapsekomponent kogu sisaldavas plokis.

.stick-manEsindab Block, .stick-man__headelement.

Nagu ülaltoodud näites näha, võib kahekordseid sidekriipse kasutada ka nii:

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

Jällegi pane kasutamise kahekordse sidekriipsud ülaltoodud näites. Seda kasutatakse modifitseerija tähistamiseks.

Nüüd olete selle saanud.

Põhimõtteliselt toimib BEM-i nimetamiskord.

Isiklikult kipun ma lihtsate projektide jaoks kasutama ainult sidekriipsude eraldaja klassi nimesid ja BEM rohkem kaasatud kasutajaliideste jaoks.

BEM-i kohta saate lugeda rohkem.

BEM - plokielemendi teisendaja

BEM - Block Element Modifier on metoodika, mis aitab teil saada korduvkasutatavaid komponente ja koodijagamist saidil

Miks kasutada nimetamiskonventsioone?

Arvutiteaduses on ainult kaks rasket probleemi: vahemälu tühistamine ja asjade nimetamine - Phil Karlton

Asjade nimetamine on raske. Püüame asju hõlpsamaks muuta ja säästame tulevikus hooldatavama koodiga aega.

Asjade õige nimetamine CSS-is muudab teie koodi hõlpsamaks lugemiseks ja hooldamiseks.

Kui otsustate kasutada BEM-i nimetamiskonventsiooni, on lihtsam lihtsalt märgistust vaadates oma disainikomponentide / plokkide vahelist suhet näha.

Kas tunnete end enesekindlalt?

CSS-i nimed JavaScripti konksudega

Täna on Johannel esimene tööpäev.

Talle antakse üle HTMLkood, mis näeb välja selline:

John on selle artikli läbi lugenud ja mõistab, et see ei pruugi olla parim viis asju nimetada CSS. Nii et ta läheb edasi ja refaktoreerib koodibaasi nii:

Tundub hea, ah?

Johnile teadmata oli ta koodibaasi lõhkunud ???

Kuidas?

Kusagil JavaScripti koodis oli seos eelmise klassi nimega siteNavigation:

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

Seega muutus klassi nimi navmuutujaks null.

Kui kurb.

Selliste juhtumite vältimiseks on arendajad välja pakkunud erinevad strateegiad.

1. Kasutage js-klassi nimesid

Üks viis selliste vigade leevendamiseks on kasutada a js-*klassi nimi, et tähistada suhet kõnealuse DOM-elemendiga.

Näiteks:

Ja JavaScripti koodis:

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

Tavapäraselt mõistab igaüks, kes näeb js-site-navigationklassi nime, et JavaScripti koodis on seos selle DOM-elemendiga.

2. Kasutage atribuuti Rel

Ise ma seda tehnikat ei kasuta, aga olen näinud, kuidas inimesed seda teevad.

Kas tunnete selle ära?

Põhimõtteliselt määratleb atribuut rel seose, mis lingitud ressursil on dokumendiga, millest sellele viidatakse.

Eelmises Johannese näites teeksid selle tehnika pooldajad seda:

Ja JavaScriptis:

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

Ma kahtlen selles tehnikas, kuid tõenäoliselt kohtate seda mõnes koodibaasis. Siin on väide: "Noh, Javascriptiga on seos, nii et ma kasutan selle tähistamiseks atribuuti rel" .

Veeb on suur koht, kus on palju erinevaid “meetodeid” sama probleemi lahendamiseks.

3. Ärge kasutage andmeatribuute

Mõned arendajad kasutavad Java atribuute JavaScripti konksudena. See pole õige. Definitsiooni järgi kasutatakse kohandatud andmete salvestamiseks atribuute .

Redigeerimine nr 1: Nagu mõned hämmastavad inimesed mainisid kommentaaride jaotises, kui inimesed kasutavad atribuuti 'rel', siis võib teatud juhtudel kasutada andmete atribuute. See on teie kõne pärast.

Boonusenõu: kirjutage rohkem CSS-i kommentaare

Sellel pole mingit pistmist nimetamiskonventsioonidega, kuid see säästab ka teie aega.

Kuigi paljud veebiarendajad üritavad EI kirjutada JavaScripti kommentaare ega jääda mõne juurde, arvan, et peaksite kirjutama rohkem CSS-i kommentaare.

Kuna CSS pole kõige elegantsem „keel”, võivad hästi struktureeritud kommentaarid oma koodist aru saades aega kokku hoida.

See ei tee haiget.

Vaadake, kui hästi kommenteeris Bootstrapi lähtekood.

Te ei pea kommentaare kirjutama, et öelda, et color: redsee annab punase värvi. Kuid kui kasutate vähem ilmset CSS-i trikki, kirjutage julgelt kommentaar.

Kas olete valmis profiks saama?

Olen loonud tasuta CSS-i juhendi, et teie CSS-i oskused kohe välja paiskaksid. Hankige tasuta e-raamat.