A CSS olyan konvenciók elnevezése, amelyek több órás hibakeresést jelentenek

Programozás

Sok fejlesztőt hallottam, hogy utálják a CSS-t. Tapasztalatom szerint ez annak a következménye, hogy nem szánok időt a CSS elsajátítására.

Koreai ??

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

A CSS nem a legszebb "nyelv", de immár több mint 20 éve sikeresen működteti az internet stílusát. Nem megy túl rosszul, mi?

Amikor azonban több CSS-t ír, gyorsan lát egy nagy hátrányt.

Rohadt nehéz fenntartani a CSS-t.

A rosszul megírt CSS gyorsan rémálommá válik.

Íme néhány névadási szokás, amely megspórol Önnek egy kis stresszt és számtalan órát a sorban.

Használja az elválasztott elválasztott karakterláncokat

Ha sok JavaScriptet írsz, akkor a tevék esetében a változók írása általános gyakorlat.

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

Remek, igaz?

A probléma az, hogy ez a névadási forma nem megfelelő a CSS számára.

Ne tedd ezt:

.redBox { border: 1px solid red;}

Ehelyett tegye ezt:

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

Ez egy elég szokásos CSS elnevezési eljárás. Vitathatatlanul olvashatóbb.

Ezenkívül összhangban van a CSS tulajdonságnevekkel.

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

A BEM elnevezési egyezmény

A csapatok eltérő megközelítéssel írják a CSS-választókat. Egyes csapatok kötőjel-elválasztókat használnak, míg mások inkább a BEM nevű strukturáltabb elnevezési megállapodást használják.

Általában 3 problémát próbálnak megoldani a CSS elnevezési konvenciók:

  1. Hogy megtudja, mit tesz egy választó, csak a nevét nézve
  2. Ahhoz, hogy képet kapjon arról, hogy egy választót hol lehet használni, csak megnézve
  3. Megismerni az osztálynevek közötti kapcsolatokat, csupán rájuk nézve

Láttál már valaha így írt osztályneveket:

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

Ez a BEM elnevezési egyezmény.

A BEM magyarázata egy 5 éves gyereknek

A BEM megpróbálja felosztani a teljes felhasználói felületet kis újrafelhasználható összetevőkre.

Tekintsük az alábbi képet:

Nem, nem díjazott :(

A pálcikaember egy olyan komponenst képvisel, például egy tervezési blokkot.

Talán már sejtette, hogy a BEM B-je a 'Block' kifejezés.

A való világban ez a „blokk” jelentheti a webhely navigációját, fejlécét, láblécét vagy bármely más tervezési blokkot.

A fent kifejtett gyakorlatot követve ideális osztálynév lenne ehhez a komponenshez stick-man.

Az alkatrészt úgy kell kialakítani, hogy:

.stick-man { }

Itt határolt húrokat használtunk. Jó!

E elemekre

A 'BEM' betűjele az El elemeket jelenti.

A tervezés általános blokkjai ritkán élnek elszigetelten.

Például a botembernek van egy head, két gyönyörű armsés feet.

A head,, feetés armsminden elem a komponensen belül van. Úgy tekinthetjük őket gyermekkomponensekre, azaz a teljes szülői alkotóelem gyermekeire.

A BEM elnevezési eljárás használatával az elemosztályok nevét két aláhúzás, majd az elem neve hozzáadásával vezetik le .

Például:

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

M a módosítókhoz

A 'BEM' -ben lévő M a módosítókat jelenti.

Mi lenne, ha a botembert módosítanák, és lenne egy bluevagy egy redbotemberünk?

A való világban ez lehet redgomb vagy bluegomb. Ezek a szóban forgó alkatrész módosításai.

A BEM használatával a módosító osztálynevek két kötőjel és az elem neve után kerülnek levezetésre .

Például:

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

Az utolsó példa azt mutatta, hogy a szülő komponens módosult. Ez nem mindig így van.

Mi lenne, ha különböző headméretű botjaink lennének?

Ezúttal az elem módosult. Ne feledje, hogy az elem gyermekösszetevő a teljes blokkban.

A .stick-manjelentése a Block, .stick-man__headaz elem.

Amint az a fenti példában látható, kettős kötőjelek is használhatók így:

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

Ismét vegye figyelembe a fenti példában a kettős kötőjel használatát . Ez egy módosító jelölésére szolgál.

Most megvan.

Alapvetően így működik a BEM elnevezési egyezmény.

Személy szerint általában csak kötőjel-elválasztó osztályneveket használok egyszerű projektekhez, a BEM-et pedig a jobban érintett felhasználói felületekhez.

Bővebben olvashat a BEM-ről.

BEM - Elem blokk módosító

A BEM - Block Element Modifier egy olyan módszer, amely segít újrafelhasználható összetevők és kódmegosztás elérésében a… getbem.com

Miért érdemes elnevezési konvenciókat használni?

A számítástechnikában csak két nehéz probléma van: a gyorsítótár érvénytelenítése és a dolgok elnevezése - Phil Karlton

A dolgok elnevezése nehéz. Igyekszünk megkönnyíteni a dolgokat, és fenntarthatóbb kóddal időt spórolni magunknak a jövőben.

A dolgok helyes elnevezése a CSS-ben megkönnyíti a kód olvasását és karbantartását.

Ha a BEM elnevezési konvenciót választja, akkor könnyebb lesz meglátni a tervezési összetevők / blokkok közötti kapcsolatot, ha csak a jelöléseket nézi.

Magabiztosnak érzi magát?

CSS-nevek JavaScript horgokkal

Ma van John első munkanapja.

Átadják a következő HTMLkódot:

John elolvasta ezt a cikket, és rájön, hogy ez nem lehet a legjobb módja a dolgok megnevezésének CSS. Tehát megy előre, és így átalakítja a kódbázist:

Jól néz ki, mi?

John számára ismeretlen, megtörte a kódot ???

Hogyan?

Valahol a JavaScript kódban kapcsolat állt fenn az előző osztálynévvel siteNavigation:

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

Tehát az osztálynév változásával a navváltozó vált null.

Milyen szomorú.

Az ilyen esetek megelőzése érdekében a fejlesztők különböző stratégiákat dolgoztak ki.

1. Használjon js osztályneveket

Az ilyen hibák enyhítésének egyik módja az a használata js-*osztálynév a kérdéses DOM elemmel való kapcsolat jelölésére.

Például:

És a JavaScript kódban:

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

Megállapodásként bárki, aki látja az js-site-navigationosztály nevét, megértené, hogy kapcsolat van a DOM elemmel a JavaScript kódban.

2. Használja a Rel attribútumot

Magam nem használom ezt a technikát, de láttam, hogy az emberek ezt csinálják.

Felismeri ezt?

Alapvetően a rel attribútum határozza meg azt a kapcsolatot, amely a csatolt erőforrásnak a dokumentumhoz kapcsolódik.

Az előző példánál Johnnal ennek a technikának a hívei ezt tennék:

És a JavaScript-ben:

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

Kétségeim vannak ezzel a technikával kapcsolatban, de valószínűleg találkozni fog vele néhány kódbázisban. Az állítás itt: "Nos, van kapcsolat a Javascript-tel, ezért ezt a rel attribútummal használom" .

A web egy nagy hely, sokféle „módszerrel” ugyanazon probléma megoldására.

3. Ne használjon adatattribútumokat

Néhány fejlesztő az adatattribútumokat használja JavaScript-kampóként. Ez nem helyes. Meghatározás szerint az adatattribútumokat használják az egyedi adatok tárolására .

1. szerkesztés: Amint azt néhány csodálatos ember említette a megjegyzés részben, ha az emberek a „rel” attribútumot használják, akkor bizonyos esetekben talán rendben van az adatok attribútumainak használata. Ez az ön hívása.

Bónusztipp: Írjon további CSS-megjegyzéseket

Ennek semmi köze a névadási szokásokhoz, de időt is megspórol Önnek.

Bár sok webfejlesztő megpróbálja NEM írni JavaScript megjegyzéseket, vagy ragaszkodni néhányhoz, szerintem érdemes több CSS megjegyzést írni.

Mivel a CSS nem a legelegánsabb „nyelv”, a jól felépített megjegyzések időt takaríthatnak meg, amikor megpróbálják megérteni a kódot.

Nem árt.

Vessen egy pillantást arra, hogy a Bootstrap forráskód mennyire kommentált.

Nem kell megjegyzést írni, hogy azt mondhassa, color: redpiros színt kap. De ha kevésbé nyilvánvaló CSS-trükköt használ, írjon bátran.

Készen állsz, hogy profivá válj?

Létrehoztam egy ingyenes CSS-útmutatót, hogy azonnal lobbantson a CSS-ismeretekkel. Szerezd meg az ingyenes e-könyvet.