Концептуальные проблемы с BEM и вложением

Question

Я пытаюсь адаптировать некоторый код HTML/CSS к методологии BEM, но, видя классы для HTML, я думаю, что я делаю что-то неправильно.

У меня есть вложенный объект «footer__social» с некоторыми вложенными значками. Следуя совету Справку в официальной странице BEM я в конечном итоге с HTML код так:

<footer> 
    <div class="footer__logo"></div> 
    <div class="footer__social"> 
    <div class="footer__facebook"></div> 
    <div class="footer__twitter"></div> 
    <div class="footer__pinterest"></div> 
    <div class="footer__googleplus"></div> 
    <div class="footer__linkedin"></div> 
    <div class="footer__youtube"></div> 
    </div> 
    <p class="footer__copyright">2016 todos los derechos reservados</p> 
    <p class="footer__policy">Política de privacidad</p> 
    <p class="footer__terms">Términos y condiciones</p> 
</footer> 

Вот ссылка на FAQ: https://en.bem.info/methodology/faq/#why-does-bem-not-recommend-using-elements-within-elements-block__elem1__elem2

Мне кажется очень странным, чтобы иметь «footer__ "в каждом из тегов HTML.

Идея, которую я имею, заключается в том, чтобы переименовать «footer__social» и запустить блок BEM, переименовав его в «социальный» с их детьми, переименованными в «social__facebook» и т. Д. ... но чувствуйте, что «социальный» блок отключен от нижний колонтитул (он появляется только там).

<footer> 
    <div class="footer__logo"></div> 
    <div class="social"> 
    <div class="social__facebook"></div> 
    <div class="social__twitter"></div> 
    <div class="social__pinterest"></div> 
    <div class="social__googleplus"></div> 
    <div class="social__linkedin"></div> 
    <div class="social__youtube"></div> 
    </div> 
    <p class="footer__copyright">2016 todos los derechos reservados</p> 
    <p class="footer__policy">Política de privacidad</p> 
    <p class="footer__terms">Términos y condiciones</p> 
</footer> 

Каков правильный способ?

Спасибо!

Answer 1

Ваши примеры являются правильными!

Не зная больше контекста о стилях и идее реализации, будет трудно сказать, какой из них лучше всего подходит.

Если мы говорим:

1. «Социальный» блок связан с колонтитул в явном виде;
2. Он появляется и появится там;
3. Вы хотите, чтобы подчеркивали тот факт, что он связан с нижним колонтитулом.

Затем идут с footer__ префиксом. Это имеет больше смысла для меня:

<footer> 
    <div class="footer__logo"></div> 
    <div class="footer__social"> 
    <div class="footer__facebook"></div> 
    <div class="footer__twitter"></div> 
    <div class="footer__pinterest"></div> 
    <div class="footer__googleplus"></div> 
    <div class="footer__linkedin"></div> 
    <div class="footer__youtube"></div> 
    </div> 
    <p class="footer__copyright">2016 todos los derechos reservados</p> 
    <p class="footer__policy">Política de privacidad</p> 
    <p class="footer__terms">Términos y condiciones</p> 
</footer> 

Если он все еще не чувствовать себя правильно к вам, основываясь на моем опыте, зачастую строго следуя методы именования Бем не всегда чувствовать себя.Есть несколько больших ресурсов, которые направляли меня к этому процессу, поэтому я рекомендую вам проверить следующие два:

• http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/ Гарри Робертса
• http://nicolasgallagher.com/about-html-semantics-front-end-architecture/ Николя Gallagher

PS: Для все эти дополнительные предложения и идеи, важно отметить:

Независимо от того, какая фактическая нотация используется, все они основаны на тех же принципах BEM.

Answer 2

Оба ваших примера совершенно верны. Но ваш второй пример более модульный, где ваш социальный компонент можно легко переместить в другое место таким образом. Укладка вашей социальной составляющей также должна быть независимой от вашего нижнего колонтитула.

Что касается остальной части разметки, может быть, вам не нужно все эти классы, но только контейнер, например, так:

<div class="footer__info"> 
    <p>2016 todos los derechos reservados</p> 
    <p>Política de privacidad</p> 
    <p>Términos y condiciones</p> 
</div>