Organization of CSS classes by example?

There is an html layout, I want to understand by a visual example how to write class names now.

We recommended using the BEM format. I studied and wrote the classes, but I have a feeling that I'm doing something wrong, because in the final version of the class, something like:

.header__contacts-1__list__phone__code {}
.header__contacts-1__list__phone__number {}

The class name is not too long, and maybe there is no need to use all the child classes in it?

To make it easier for me to understand, I wrote part of the header. Tell me, how would you write? classes on the example of a similar layout? Not necessarily BEM, just your method of writing/organizing classes correctly.

<div class="header">
    <div class="container">
        <div class="row">

            <div class="col-sm-6">
                <a href="/">
                    <img src="logo.png">
                </a>
            </div>

            <div class="col-sm-6">
                <ul>
                    <li>
                        <span>(495)</span>
                        <span>123-45-67</span>
                    </li>
                    <li>
                        <span>(495)</span>
                        <span>123-45-67</span>
                    </li>
                </ul>
            </div>

        </div>
    </div>
</div>
Author: Данил Чугаев, 2018-03-11
Source

2 answers

I can offer the following class names (according to the BEM methodology):

//стили логотипа, как отдельного компонента
.logo {}
.logo img {}

//стили телефона, как отдельного компонента
.phone {}
.phone__code {}
.phone__number {}

//стили шапки
.header {}

//дополнительные стили логотипа как компонента шапки
.header__logo {}

//стили меню навигации
.nav {}
.nav-list {}
.nav-list__item {}

//дополнительные стили телефона, как компонента меню навигации
.nav-list__phone {}
<header class="header">
  <a href="/" class="logo header__logo">
    <img src="logo.png">
  </a>

  <nav class="nav">
    <ul class="nav-list">
      <li class="phone nav-list__item nav-list__phone">
        <span class="phone__code">(495)</span>
        <span class="phone__number">123-45-67</span>
      </li>
      <li class="phone nav-list__item nav-list__phone">
        <span class="phone__code">(495)</span>
        <span class="phone__number">123-45-67</span>
      </li>
    </ul>
  </nav>
</header>

Using the BEM methodology, you should focus on the fact that the blocks are named in such a way that they can be reused.

In this case, you separately set the styles for the logo component and for the phone component, and then, in the necessary blocks, simply mix the styles of the blocks in which these components are placed.

Learn more about you can read the mixes in the section of the documentation about mixes.

 3
Author: Данил Чугаев, 2018-03-11 08:19:41

According to the BEM methodology, you should not get such long selectors. You now get a Block-Element-Element-Element, etc., and there should be a Block Element. In fact, the specification describes everything in some detail. In your example, I see something like the following selectors:

.header, .header__logo, header__phones, phones__item.

And the spans, which respectively contain the code and phone number, will already be modifiers if they have different colors/font sizes, etc., for example:

.phones__item_red, .phones__item_small

 2
Author: Sergey Kanyukov, 2018-03-11 08:39:58