BEM je způsob, jak pojmenovávat třídy v kaskádových stylech tak, aby se vám nepletly jejich různé typy. V článku vám jej představíme.
Jak bylo na virtuální konferenci FOSDEM.
Jak je to s přístupností mobilního menu z klávesnice? Používáte odkazy “více” a “zde”? Znáte rozdíl mezi aria-label, aria-labelledby a aria-describedby? Je PDF strojově čitelný formát z pohledu zákona o přístupnosti?
Posledních pár let mě baví se zabývat bezpečností aplikací. Čistě technicky. A když člověk tyhle věci implementuje, dostane se k zajímavým problémům, které by ho ani nenapadly. A tak se stalo, že jsem se dostal k proxy. Jako slepý k houslím.
pekne napisane, a hlavne ta cast ‚co nedelat‘
BEM pouzivam(e) uz takmer 2 roky a je to naozaj skvely a pritom jednoduchy system, v css sa clovek nestrati je super prehladne a v html to sice zabere o par znakov naviac ale je to o dost semantickejsie.
btw ako riesite nazvy tried doplnene v javascripte. napriklad pre menu item active – v js zmenite na ‚nav__item–active‘ alebo ‚po starom‘ len ‚active‘ ? resp nejak inak?
Re:
V tom JS by to mělo být konzistentní, aby z DOMu bylo jasné, co se událo, takže za mě nejlépe
nav__item--active.Používání dvou nebo více sousedících podtržítek v identifikátoru působí mému vnímání ránu neslučitelnou s životem. Zvlášť když to čtu z papíru nebo z jinak pěkného článku zobrazeného proporcionálním fontem. Schválně, kdo bez obarvování myší pozná, kolik podtržení jsem spáchal v tomto identifikátoru: hihihi___hihihi
Re:
Tomu rozumím, ale o těch výtkách vůči „estetice“ v článku taky píšu. Nelze je brát jako protiargument.
Re:
Klidně je jako protiargument brát lze.
Re:
Bez ohledu na to, zda to lze či nelze brát jako protiargument, právě z tohoto důvodu to nebudu používat.
Re:
To je legrace, jak si někteří lidé pořád myslí, že programování je „umění“ a snaží se dbát na „krásu“. Někteří kolegové dokázali strávit vizuálním dolaďováním kódu hodiny. Je pravda, že se moc dlouho nezdrželi :-)
Re:
No je celkem rozdíl po někom spravovat bordel a nebo pořádek, analogicky veme knihu, kdyz ti nekdo napise knihu kde si napraská čárky kde chce a ne kde mají být asi se ti to moc dobře číst nebude, a nejspíš to ani nebudeš číst, a pokud budeš mít na starosti vydání takové knihy, necháš jí přepsat. Nějakej elementární smysl pro organizaci by asi měl mít každý, nicméně to že někdo řene že to jako arhument nebere neznamená že to argument není.
Re:
Myslím, že když si skupina lidí chce dohodnout pravidla, estetika hráli roli nemá.
Můžou se tihle tři někdy dohodnout? :)
V článku jsou nesubjektivní argumenty pro použití. Viz „Jednoznačný význam tříd v CSS i HTML“. Buď jsou pro váš projekt relevantní nebo ne.
Re:
Bez obarvování myší 3 podtržítka… Ale to je irelevantní. V pojmenování podle BEM, tak jak je popsáno v článku, se v názvu třídy mohou vyskytnout právě 2 podtržítka. Nikdy méně, nikdy více. Takže netřeba spekulovat, kolik jich tam tedy je a co to znamená. __ (pro elementy) a — (pro modifikátory) se používají proto, že jméno třídy jasně vizuálně rozdělují a zlepšují tak čitelnost kódu a orientaci v něm.
Re:
Ten zápis je možné si upravit. Např.
Nebo úplně jinak, jak komu vyhovuje. Důležitá je spíše ta myšlenka.
Re:
Může to vyjít, ale na větších projektech (kde právě BEM smysl má) se to nemusí vyplatit.
Na vašem příkladu se to dá ukázat takto:
.blok-elementmůže být blok (komponenta) nebo její element. Těžko to pak z HTML zjistit. Hlavně, když se kříží podobně pojmenované komponenty:<div class="blok">
<div class="blok-element blok-jina-komponenta">
Re:
Ono
.blok-elementje vždy element daného bloku, kdežto.blokElementje blok. V mém příkladě jsem pouze zaměnil způsob zápisu, kde se nepoužívají podtržítka a pro oddělení slov se používá camel case zápis.co to je „spojovník“ ? na klávesnici to nemám, předpokládám že je to mínus?
Re:
A pomlčku tam máte?
Re:
jenom mínus, který někteří pokládají za pomlčku.