BEM kiedy blok a kiedy element

pytanie zadane 28 lutego 2018 w HTML i CSS przez modular Użytkownik (520 p.)

Jak najlepiej stosować metodologie BEM w html, kiedy to ma być blok a kiedy element?

<section>
  <h2>Nagłówek główny</h2>
  <div>
    <h3>nagłówek diva1</h3>
    <p>jakis tekst...</p>
    <p>jakis tekst...</p>
    <p>jakis tekst...</p>
    <p>jakis tekst...</p>
  </div>
  <div>
    <h3>nagłówek diva2</h3>
    <p>jakis tekst...</p>
    <p>jakis tekst...</p>
    <p>jakis tekst...</p>
    <p>jakis tekst...</p>
  </div>
  <div>
    <h3>nagłówek diva3</h3>
    <p>jakis tekst...</p>
    <p>jakis tekst...</p>
    <p>jakis tekst...</p>
    <p>jakis tekst...</p>
  </div>
</section>

w tej sytuacji <section> będzie blokiem a <h2> <div> <h3> <p> elementami? czy może <h2> oraz <div> powinny być blokami? a dzieci <div> tylko elementami?

2 odpowiedzi

odpowiedź 28 lutego 2018 przez Comandeer Guru (601,110 p.)

h2 nie ma sensu robić blokiem, bo to typowy element.

Dla div można zastosować miksa, czyli zrobić z tego element bloku, który sam jest blokiem (.section__subsection.subsection).

komentarz 28 lutego 2018 przez rafal.budzis Szeryf (85,260 p.)

Moim zdaniem warto stosować klas do wszystkich znaczników. Gdy mam kod BEMa oraz brak w CSS selektorów odwołujących się do konkretnych znaczników o wiele łatwiej wprowadzać zmiany SEO czy też usprawnienia dla niepełnosprawnych bez zmiany wyglądu. Taka separacja mi bardzo się przydaje.

Chętnie poznam twoją opinie dlaczego uważasz ze nie ma sensu robić BEMa z elementami <Hx>

1	komentarz 28 lutego 2018 przez Comandeer Guru (601,110 p.) Chętnie poznam twoją opinie dlaczego uważasz ze nie ma sensu robić BEMa z elementami <Hx> Pokaż mi fragment, w którym to stwierdziłem :P Nie ma sensu robić z niego blok BEM, bo to element BEM.

komentarz 28 lutego 2018 przez rafal.budzis Szeryf (85,260 p.)

Sorry źle przecztałem.

komentarz 1 marca 2018 przez modular Użytkownik (520 p.)

@Comandeer, jeśli na stronie mam więcej różnych sekcji a w nich <p> i chcę wystylizować wszystkie <p> na całej stronie tak samo, taki sam kolor czcionki, to w tym wypadku żeby nie pisać takich samych styli dla <p> w danej sekcji, muszę zrobić z <p> blok? i nazwać wszystkie <p> tak samo?

bo gdybym używał selektora to odniósł bym się do wszystkich <p> na całej stronie i przypisał (color) a jak w przypadku BEM?

komentarz 1 marca 2018 przez Comandeer Guru (601,110 p.)

Jeśli chcemy być całkowicie w zgodzie z BEM, to tak – blok wydaje się najsensowniejszy.

odpowiedź 28 lutego 2018 przez rot18ru Bywalec (2,100 p.)

Stosuj się do zasady KISS i nie twórz żadnych bloków i elementów dopóki nie będzie to potrzebne.

Np jak zauważysz, że pewien element HTMLa do którego stosuje się te same zasady, występuje w różnych, nie powiązanych ze sobą częściach dokumentu, to naturalnie żeby się do niego dostać trzeba zrobić z niego blok BEMa. Oczywiście można byłoby zrobić jeden blok obejmujący cały dokument, a inne elementy HTMLa uczynić elementami BEMa, ale to byłoby głupie.