BEM和嵌套的概念問題

我試圖改編一些HTML/CSS代碼到BEM方法，但是看到HTML的類我覺得我做錯了什麼。BEM和嵌套的概念問題

我有一個嵌套的對象「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」，並將其子項重命名爲「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>

這樣做的正確方法是什麼？

謝謝！

來源

2016-11-15 Ionthas

關鍵是不要混淆上下文特定樣式和一般組件樣式。如果您需要專門爲「footer」IMO內部顯示的「社交」組件設置樣式，那麼它應該按照您在第一個場景中描述的方式進行定義，或者使用'class =「footer__social social」'來進行分離。（這就是說我不是BEM純粹主義者）。 –

你的例子都是正確的！

不知道更多關於樣式和實現思想的上下文，很難說哪個是最好的方法。

如果我們說：

「社會」塊與頁腳明確相連;
它只會出現在那裏;
你想強調它與頁腳連接的事實。

然後，去與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>

如果仍然不感覺不對給你，根據我的經驗，很多時候，嚴格按照BEM命名的技術並不總是覺得不對勁。還有，是指導我推向這個過程中一些重要的資源，所以我建議你檢查以下兩種：

http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/由哈里·羅伯茨
http://nicolasgallagher.com/about-html-semantics-front-end-architecture/尼古拉斯·加拉格爾

PS：對於所有這些額外的建議和想法，請務必注意：

無論使用什麼實際符號，它們都基於相同的BEM原則。

來源

2016-11-15 21:38:48

這兩個例子都是完全有效的。但是你的第二個例子是更加模塊化的，你的社交組件可以很容易地被移動到另一個位置。造型您的社交組件應該與您的頁腳無關。

關於也許你不需要所有這些類，但只是一個容器，例如像這樣標記的其餘部分：

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

來源

2016-11-15 21:31:52 Ingvi

BEM和嵌套的概念問題

回答

相關問題