CSS pavadinimų sutartys, kurios sutaupys kelias valandas derinimo

Girdėjau, kad daugelis kūrėjų sako nekenčiantys CSS. Mano patirtis rodo, kad neskirta laiko mokytis CSS.

Korėjietis ??

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

CSS nėra gražiausia „kalba“, tačiau ji jau daugiau nei 20 metų sėkmingai kuria žiniatinklio stilių. Neblogai sekasi, a?

Tačiau, kai rašote daugiau CSS, greitai pamatote vieną didelį trūkumą.

Sunku išlaikyti CSS.

Blogai parašytas CSS greitai virs košmaru.

Čia yra keletas pavadinimų suteikimo būdų, kurie sutaupys šiek tiek streso ir nesuskaičiuojamų valandų.

Naudokite brūkšneliais atskirtas eilutes

Jei rašote daug „JavaScript“, tai kintamųjų rašymas kupranugarių atveju yra įprasta praktika.

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

Puiku, tiesa?

Problema ta, kad ši pavadinimo forma nėra gerai pritaikyta CSS.

Nedaryk to:

.redBox { border: 1px solid red;}

Verčiau atlikite tai:

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

Tai gana standartinė CSS pavadinimų suteikimo tvarka. Tai, be abejo, yra lengviau skaitoma.

Be to, jis atitinka CSS nuosavybės pavadinimus.

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

BEM vardų suteikimo konvencija

Komandos turi skirtingą požiūrį į CSS atrankų rašymą. Kai kurios komandos naudoja brūkšnelius, o kitos - labiau struktūrizuotą pavadinimų suteikimo būdą, vadinamą BEM.

Paprastai yra 3 problemos, kurias bandoma išspręsti CSS pavadinimo sutartimis:

  1. Norėdami sužinoti, ką veikia selektorius, tiesiog žiūrėdamas į jo pavadinimą
  2. Norint įsivaizduoti, kur galima naudoti selektorių, tiesiog į jį žiūrint
  3. Žinoti klasių pavadinimų santykius, tiesiog žiūrint į juos

Ar kada nors matėte taip užrašytus klasių pavadinimus:

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

Tai yra BEM pavadinimo sutartis.

BEM paaiškinimas 5 metų amžiaus asmeniui

BEM bando suskirstyti bendrą vartotojo sąsają į mažus daugkartinio naudojimo komponentus.

Apsvarstykite toliau pateiktą vaizdą:

Ne, jis nėra apdovanotas :(

„Stick-man“ reiškia komponentą, pavyzdžiui, dizaino bloką.

Galbūt jau spėjote, kad BEM B reiškia „Blokuoti“.

Realiame pasaulyje šis „blokas“ gali reikšti svetainės naršymą, antraštę, poraštę ar bet kurį kitą dizaino bloką.

Laikantis pirmiau paaiškintos praktikos, būtų idealus šio komponento klasės pavadinimas stick-man.

Komponentas turėtų būti sukurtas taip:

.stick-man { }

Čia mes naudojome atribotas eilutes. Gerai!

E elementams

E „BEM“ reiškia elementus.

Bendrieji dizaino blokai retai gyvena atskirai.

Pavyzdžiui, lazdos vyras turi headdu spalvingus armsir feet.

head, feetIr armsyra visi elementai, kaip sudedamoji dalis. Jie gali būti vertinami kaip vaikų komponentai, ty viso tėvo komponentai.

Naudojant BEM pavadinimo tvarką, elementų klasių pavadinimai gaunami pridedant du pabraukimus, po kurių nurodomas elemento pavadinimas.

Pavyzdžiui:

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

M - modifikatoriams

„BEM“ raidė M reiškia modifikatorius.

Ką daryti, jei Stick-žmogus buvo modifikuoti ir galėtume turėti bluearba redStick-žmogus?

Realiame pasaulyje tai gali būti redmygtukas arba bluemygtukas. Tai yra nagrinėjamo komponento modifikacijos.

Naudojant BEM, modifikatorių klasių pavadinimai gaunami pridedant du brūkšnelius, po kurių nurodomas elemento pavadinimas.

Pavyzdžiui:

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

Paskutinis pavyzdys parodė, kad pagrindinis komponentas yra modifikuojamas. Tai ne visada būna.

Ką daryti, jei mes turėtume skirtingų headdydžių lazdas ?

Šį kartą elementas buvo modifikuotas. Atminkite, kad elementas yra antrinis komponentas bendrame sudėtiniame bloke.

.stick-manAtstovauja Block, .stick-man__headelementą.

Kaip parodyta aukščiau pateiktame pavyzdyje, taip pat gali būti naudojami dvigubi brūkšneliai:

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

Vėlgi, atkreipkite dėmesį į dvigubų brūkšnių naudojimą aukščiau pateiktame pavyzdyje. Tai naudojama modifikatoriui žymėti.

Dabar jūs tai supratote.

Iš esmės taip veikia BEM vardų suteikimo tvarka.

Aš asmeniškai paprastiems projektams linkiu naudoti tik brūkšnelių skyriklio klasių pavadinimus, o BEM - labiau įtraukiamoms vartotojo sąsajoms.

Galite daugiau sužinoti apie BEM.

BEM - blokinių elementų modifikatorius

BEM - „Block Element Modifier“ yra metodika, padedanti pasiekti daugkartinio naudojimo komponentus ir bendrinti kodus… getbem.com

Kodėl verta naudoti vardų suteikimo sutartis?

Kompiuterijoje yra tik dvi sunkios problemos: talpyklos pripažinimas negaliojančia ir dalykų įvardijimas - Philas Karltonas

Pavadinti daiktus sunku. Mes stengiamės palengvinti reikalus ir sutaupyti laiko ateityje, naudodami labiau prižiūrimą kodą.

Teisingai pavadinus dalykus CSS, jūsų kodą bus lengviau skaityti ir prižiūrėti.

Jei nuspręsite naudoti BEM vardų suteikimo tvarką, bus paprasčiau pamatyti santykį tarp jūsų dizaino komponentų / blokų, tiesiog žiūrint į žymėjimą.

Jaučiatės užtikrintai?

CSS vardai su „JavaScript“ kabliais

Šiandien yra pirmoji Jono diena darbe.

Jam įteiktas HTMLkodas, kuris atrodo taip:

Jonas perskaitė šį straipsnį ir supranta, kad tai gali būti ne pats geriausias būdas įvardyti dalykus CSS. Taigi jis eina į priekį ir modifikuoja kodo bazę taip:

Gerai atrodo, ką?

Jonui nežinomas, jis sulaužė kodų bazę ???

Kaip?

Kažkur „JavaScript“ kode buvo ryšys su ankstesniu klasės pavadinimu siteNavigation:

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

Taigi, pasikeitus klasės pavadinimui, navkintamasis tapo null.

Kaip liūdna.

Kad išvengtų tokių atvejų, kūrėjai pasiūlė skirtingas strategijas.

1. Naudokite js klasės pavadinimus

Vienas iš būdų sušvelninti tokias klaidas yra naudoti a js-*klasės pavadinimas ryšiui su nagrinėjamu DOM elementu žymėti.

Pavyzdžiui:

„JavaScript“ kode:

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

Paprastai visi, pamatę js-site-navigationklasės pavadinimą, supras, kad „JavaScript“ kode yra ryšys su tuo DOM elementu.

2. Naudokite „Rel“ atributą

Aš pats šios technikos nevartoju, bet mačiau, kaip žmonės tai daro.

Ar tai atpažįstate?

Iš esmės „ rel“ atributas apibrėžia ryšį, kurį susietas šaltinis turi su dokumentu, iš kurio jis nurodytas.

Ankstesniame pavyzdyje su Jonu šios technikos šalininkai taip elgtųsi:

Ir „JavaScript“:

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

Aš abejoju dėl šios technikos, bet greičiausiai susidursite su ja kai kuriose kodų bazėse. Čia teigiama: „Na, yra ryšys su„ Javascript “, todėl tam pažymiu naudoju atributą rel“ .

Žiniatinklis yra didelė vieta, kur yra daugybė skirtingų „metodų“ tai pačiai problemai spręsti.

3. Nenaudokite duomenų atributų

Kai kurie kūrėjai naudoja duomenų atributus kaip „JavaScript“ kabliukus. Tai neteisinga. Pagal apibrėžimą, duomenų atributai naudojami tinkintiems duomenims saugoti .

Redaguoti Nr. 1: Kaip komentarų skyriuje paminėjo kai kurie nuostabūs žmonės, jei žmonės naudoja „rel“ atributą, tam tikrais atvejais galbūt gerai naudoti duomenų atributus. Tai tavo skambutis.

Premijos patarimas: parašykite daugiau CSS komentarų

Tai neturi nieko bendro su vardų suteikimo taisyklėmis, tačiau taip pat sutaupysite šiek tiek laiko.

Nors daugelis interneto kūrėjų bando NE rašyti „JavaScript“ komentarų arba laikytis kelių, manau, kad turėtumėte parašyti daugiau CSS komentarų.

Kadangi CSS nėra pati elegantiškiausia „kalba“, gerai suformuluoti komentarai gali sutaupyti laiko, kai bandote suprasti savo kodą.

Tai neskauda.

Pažvelkite į tai, kaip gerai pakomentuotas „Bootstrap“ šaltinio kodas.

Jums nereikia rašyti komentarų, kad sakytumėte color: red, kad spalva bus raudona. Bet, jei naudojate CSS triuką, kuris yra mažiau akivaizdus, ​​rašykite komentarą.

Pasirengęs tapti profesionalu?

Aš sukūriau nemokamą CSS vadovą, kad jūsų CSS įgūdžiai būtų nedelsiant įsiplieskę. Gaukite nemokamą el. Knygą.