S
S
sdasdas_932018-10-07 21:40:01
HTML
sdasdas_93, 2018-10-07 21:40:01

Did BEM get it right?

I know that similar questions have been raised more than once, but in each of them different answers were given. Since I am at the stage of learning layout and BEM in general, I ask for help. Have I understood the principles of BEM correctly, if we consider the code I have given below? Thanks in advance for any help.

<header class="header">
    <div class="container">
      <div class="logo">
        <a href="#" class="logo__url"><img src="images/logo.png" alt="" class="logo__icon"></a>
      </div>
      <ul class="main-nav">
        <li class="main-nav__item"><a href="#" class="main-nav__url main-nav__url_current">Home</a></li>
        <li class="main-nav__item"><a href="#" class="main-nav__url">Item-2</a></li>
        <li class="main-nav__item"><a href="#" class="main-nav__url">Item-3</a></li>
        <li class="main-nav__item"><a href="#" class="main-nav__url">Item-4</a></li>
        <li class="main-nav__item"><a href="#" class="main-nav__url">Item-5</a></li>
        <li class="main-nav__item"><a href="#" class="main-nav__url">Item-6</a></li>
      </ul>
    </div>
  </header>

  <footer class="footer">
    <div class="container">
      <div class="footer-column">
        <h3 class="footer-column__title">Navigation</h3>
        <ul class="footer-column__nav">
          <li class="footer-column__item"><a href="#" class="footer-column__url">Item-1</a></li>
          <li class="footer-column__item"><a href="#" class="footer-column__url">Item-2</a></li>
          <li class="footer-column__item"><a href="#" class="footer-column__url">Item-3</a></li>
          <li class="footer-column__item"><a href="#" class="footer-column__url">Item-4</a></li>
          <li class="footer-column__item"><a href="#" class="footer-column__url">Item-5</a></li>
          <li class="footer-column__item"><a href="#" class="footer-column__url">Item-6</a></li>
        </ul>
      </div>
      <div class="footer-column">
        <h3 class="footer-column__title">Services</h3>
        <ul class="footer-column__nav">
          <li class="footer-column__item"><a href="#" class="footer-column__url">Item-1</a></li>
          <li class="footer-column__item"><a href="#" class="footer-column__url">Item-2</a></li>
          <li class="footer-column__item"><a href="#" class="footer-column__url">Item-3</a></li>
          <li class="footer-column__item"><a href="#" class="footer-column__url">Item-4</a></li>
          <li class="footer-column__item"><a href="#" class="footer-column__url">Item-5</a></li>
          <li class="footer-column__item"><a href="#" class="footer-column__url">Item-6</a></li>
        </ul>
      </div>
    </div>
  </footer>

Answer the question

In order to leave comments, you need to log in

1 answer(s)
V
Vitaly Pershin, 2018-10-07
@sdasdas_93

Contradictory ... On the one hand, if you are not going to reuse it anywhere, then you can put up with it.
On the other hand, the BEM methodology is just what is needed in order to divide the site into parts and insert them anywhere. Why declare a footer-column block when it's named footer anyway . In this context , footer-column could be called footer__column , footer-column__title could be called footer__title , and so on, since they are still tied to footer . Now if you call footer-column for example boxthen you will declare an independent block according to all the rules and will be able to use it anywhere on the site and nested elements like box__nav , box__item , box__url . And by mixing footer__box to it , you can set environment-dependent values

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question