nazewnictwo bloków podrzędnych BEM [duplikat]

To pytanie ma już odpowiedź tutaj:

Używam podejścia BEMA do pisania html + css. Z tą składnią:

  • Blocks: block_name
    • Elements: block_name _ _ element_name
    • modyfikatory: block_name _ _ element _ name--modyfikator

I get confused when I mieć blok w innym bloku. Na przykład w nagłówku chcę, aby nagłówek był blokiem, do którego mogę się odwołać, a nav i logo były blokami. Chcę odnieść się do tych bloków nav i logo jako do site_header. Ale jak miałbym to napisać? Łańcuchowanie bloków, takich jak block_name__sub _ block _ name wydaje się dość długie.

Czy ktoś ma typowy sposób pisania tego przykładu?

<div class="site_header__logo">
    <a class="site_header__logo__link">
        <img class="site_header__logo__image">
    </a>
</div>

<nav class="site_header__main_nav">
    <ul>
        <li class="site_header__main_nav__item">
            <a class="site_header__main_nav__link">Home</a>
        </li>
        <li class="site_header__main_nav__item">
            <a class="site_header__main_nav__link">About Us</a>
        </li>
        <li class="site_header__main_nav__item">
            <a class="site_header__main_nav__link">Contact Us</a>
        </li>
    </ul>
</nav>

<div class="site_header__phone">
    <p class="site_header__phone__number">
        555.555.5555
    </p>
</div>

Author: jeremyhoover, 2014-03-29
Source

3 answers

Na stronie BEMA znajduje się logo, nagłówek główny i telefon, które wpisuje się w definicję block, która jest podana na stronie BEMA jako:

Blok jest niezależnym podmiotem, "budulcem" aplikacji. Blok może być prosty lub złożony (zawierający inne bloki).

To co masz to trzy proste bloki (logo, main_nav i phone) wewnątrz złożonego bloku (site_header). W rzeczywistości jest bardzo podobny do bloku Head compound, który jest podany jako przykład na BEM strona definicji metodologii .

Więc napisałbym to w ten sposób: 

<div class="logo">
    <a class="logo__link">
        <img class="logo__image">
    </a>
</div>

<nav class="main_nav">
    <ul>
        <li class="main_nav__item">
            <a class="main_nav__link">Home</a>
        </li>
        <li class="main_nav__item">
            <a class="main_nav__link">About Us</a>
        </li>
        <li class="main_nav__item">
            <a class="main_nav__link">Contact Us</a>
        </li>
    </ul>
</nav>

<div class="phone">
    <p class="phone__number">
        555.555.5555
    </p>
</div>

Jeśli uważasz, że "logo" jest zbyt ogólne jako nazwa i nie reprezentowałoby innych typów logo w projekcie, możesz nadać mu inną nazwę, taką jak"company_logo".

BEM sugeruje użycie modyfikatorów bloków i elementów do reprezentowania ich różnych stylów. Na przykład, jeśli chcesz mieć swój numer telefonu pogrubiony, możesz utworzyć modyfikator klasy dla to w CSS i zastosować go do HTML w następujący sposób: 
.phone__number--bold {
    font-weight: bold;
}

<div class="phone">
    <p class="phone__number phone__number--bold">
        555.555.5555
    </p>
</div>

Modyfikatory są preferowaną metodą w stosunku do bloków stylizacji w innych blokach. Więc nie rób tego: 

.site_header .phone__number {
    font-weight: bold;
}

Myślę, że jest jeden wyjątek od tego, kiedy chcesz nadać "style zależne od lokalizacji" blokowi wewnątrz. Powiedzmy, że chcesz dać lewy margines do bloku "logo". Zamiast tworzyć modyfikator jak: 

.logo--push_20 {
    margin-left: 20px;
}

Lepiej stosować oocss druga zasada - oddzielna kontener i zawartość-i pozostawić zadanie do kontenera: 

.site_header .logo {
    margin-left: 20px;
}
 15
Author: katranci,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-07-08 10:41:58

Możesz też zajrzeć do FAQ BEMA.

Jaka byłaby nazwa klasy dla elementu wewnątrz innego elementu? .block__elem1__elem2?

Co zrobić, jeśli mój blok ma złożoną strukturę i jego elementy są zagnieżdżone? Klasy CSS jak block__elem1__elem2__elem3 wyglądają przerażająco. Zgodnie z metodą BEM struktura blokowa powinna być spłaszczona; nie trzeba odzwierciedlać zagnieżdżonej struktury DOM bloku. Tak więc nazwy klas dla tego przypadku brzmiałyby: 

.block{}
.block__elem1{}
.block__elem2{}
.block__elem3{}

Natomiast DOM reprezentacja bloku może być zagnieżdżona: 

<div class='block'>
    <div class='block__elem1'>
        <div class='block__elem2'>
            <div class='block__elem3'></div>
        </div>
    </div>
</div>

Poza tym, że klasy wyglądają znacznie ładniej, to sprawia, że elementy są zależne tylko od bloku. Możesz więc z łatwością przesuwać je po bloku podczas wprowadzania zmian w interfejsie. Zmiany struktury blokowej DOM nie wymagałyby odpowiednich zmian w kodzie CSS.

<div class='block'>
    <div class='block__elem1'>
        <div class='block__elem2'></div>
    </div>
    <div class='block__elem3'></div>
</div>
 11
Author: Henrique Barcelos,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-08-25 18:47:35

Tak, można się wiele pozbyć w nazwach klas. Na przykład:

HTML:

`

<nav class="site_header">
    <ul>
        <li class="nav_item">
            <a class="nav_link">Home</a>
        </li>
        <li class="nav_item">
            <a class="nav_link">About Us</a>
        </li>
        <li class="nav_item">
            <a class="nav_link">Contact Us</a>
        </li>
    </ul>
</nav>

`

Następnie w CSS umieść:

`

.site_header { 
    ... stuff ...
}

.site_header .nav_item {
    ... nav_item stuff ...
}

.site_header .nav_link {
    ... nav_link stuff ...
}

`

 -3
Author: Matt,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-03-28 21:16:13