Komentáře k příspěvku: Metodika BEM

Od: Martin Pešout

Martin Pešout — Sun, 20 Apr 2014 06:38:03 +0000

Ahoj Honzo, hlavním problémem v Drupalu 7 je to, že někde převádí podtržítka v názvech tříd na pomlčky. Např. ve Views. Zatím nejlepším řešením, na které jsem narazil, bylo použít následující patch http://goo.gl/bOsfbl který rozšíří mapování tříd při ukládání v ./includes/common.inc K tvojí druhé otázce. Hojnějšímu používání názvů HTML tagů přímo v CSS bych se předem bránil. Tím, že použiješ v kaskádových stylech konkrétní HTML tagy (např.: .cruise h2), tak nebudeš schopný použít tuto definici na nic jiného. Vždy budeš muset mít tvůj nadpis v

. Ale co když časem zjistíš, že potřebuješ místo
nadpisů používat na stejném místě
nebo se rozhodněš použít obyčejný
? Použití tříd nám zajistí větší znovupoužitelnost. Zastávám ale názor, že určitě né vše v CSS musí být třída. Občas použiji základní tagy ke stylování. Základními tagy myslím třeba . V tomto případě je to podle mě na místě nepoužívat názvy tříd. Pokud v Drupalu nabízíš správcům webu WYSIWYG editor, tak asi nebude třeba přidávat třídy i k
,
v textu, který vytvoříš pomocí tohoto editoru. Asi by jsi se těžko vyhnul případným chybám, kde WYSIWYG editor zapomene třídu doplnit. Chce to vždy zvážit, zda vytváříme znovupoužitelné komponenty. Martin

Od: Jan Pobořil

Jan Pobořil — Sat, 19 Apr 2014 18:52:16 +0000

Zmínil jsi, že děláš v Drupalu. Jak se vyrovnáváš se standardním makupem Views, fields a bloků?

Co si myslíš o používání jména tagu ke stylování? Mnoho html5 tagů přímo vybízí k jejich použití místo tříd.

Od: admin

admin — Sun, 13 Apr 2014 18:16:36 +0000

Naprosto s tebou souhlasím Davide. Stále ale __ používám, i když to skutečně u většiny fontů splývá do sebe.

Já ještě navíc hojně používám Drupal, kde současná verze 7 nepodporuje dvojpodtržítko u názvů tříd. Je to tím, že Drupal 7 vznikl dřív, než se dostala do povědomí metodika BEM. Ale existuje již řada hacků, které použití BEM v Drupal 7 umožní. Kdyby měl s tím někdo v budoucnu problém, tak ať klidně napíše do pošty. Rád pomůžu.

Od: David

David — Sun, 13 Apr 2014 09:45:49 +0000

BEM využívám již skoro rok a technika se mi osvědčila. Hlavně spolu s preprocessorem less.
např.

// Entita box .box { width:100px;


  // Oddělení více boxů od sebe

  & + .box {

    margin-top: 20px;

  }
  // Poslední box má ohraničení

  &:last-child {

    border-bottom: 1px solid black;

  }
  // Široký box

  &--wide {

    width: 200px;

  }

// Nadpis &__title { font-size:200%; padding:10px; } }

Mám jedinou výhradu k dvěma podtržítkám (__) označujícím nějaký subelement. Ve většině fontů a stylů písma splývají do jednoho znaku a oproti dvěma pomlčkám (–) to pak není prostě ono. Zvažuji že budu používat pouze jedno podtržítko. K oddělování slov stejnak používám pouze jednu pomlčku, tak nedojde k nějaké kolizi.

Od: admin

admin — Fri, 11 Apr 2014 12:50:57 +0000

Tak v podstatě – a _ můžeš používat stále. Používá se to jako oddělovač jednotlivých slov v názvu třídy. Např. main-menu. Dokonce bych si troufnul říci, že je jedno jestli použiješ pomlčku nebo podtržítko k oddělení slov v třídě (main-menu, main_menu). Mně se ale nejvíce osvědčila pomlčka.

Dvojité podtržítko __ odděluje elementy jednotlivého bloku
Dvojitá pomlčka — odděluje modifikátory bloku

Takže dostáváme něco takového:
.nazev-bloku
.nazev-bloku__element-bloku
.nazev-bloku–modifikator-bloku
.nazev-bloku__element-bloku–modifikator-elementu

Od: Vojt

Vojt — Fri, 11 Apr 2014 12:25:43 +0000

Boha, nedávno nás učili pro CSS používat – místo _ a teď tam narvou dvojitej podrtžník?

Od: admin

admin — Fri, 11 Apr 2014 08:45:56 +0000

Ahoj,

často se stává, že logo v patičce bývá menší. Pak bych využití těchto dvou tříd viděl jako rozumné. Pokud se však jedná v tvém případě o stejné logo a nemáš např. v patičce logo zmenšené nebo jinak upravené, tak klidně můžeš použít třídu .logo

Pokud použiji označení ze článku, bude takové logo vystupovat jako samostatný blok a né jako element (součást jiného bloku). Ničemu to nevadí, protože jednotlivé bloky se můžou prolínat.

Díky ale za připomínku. Snad je to nyní jasnější.

Martin

Od: Juraj

Juraj — Fri, 11 Apr 2014 08:38:37 +0000

Dobry den,

jednemu celkom nerozumiem. Ak mam triedu .header__logo a chcem vykreslit logo aj v paticke, tak budem potrebovat triedu .footer__logo a teda budem tuto triedu definovat v CSS 2x? Nie je lepsie mat triedu .logo, ktora sa bude aplikovat na oboch miestach?

Dakujem za odpoved,

Juraj