Bem的命名約定

即時通訊在一個小項目中使用BEM命名約定，並且在決定元素和修飾符名稱時有一些困難。Bem的命名約定

我目前正在研究英雄/飛濺部分的網站。 請參閱下面的圖片。 enter image description here

繼承人我當前的代碼 -

<div class="hero hero__project"> 

    <div class="grid"> 

     <h1 class="hero__project__title">Final Year Project</h1> 

     <div class="hero__project__meta"> 
      <p>Published<span>23 Oct 2014</span></p> 
      <p>Applictions <span>Unity3d, Photoshop, 3ds max</span></p> 
     </div> 

     <p class="hero__project__summary">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in </p> 

    </div> 

</div>

我的問題是 - 你明白了一塊標記是幹什麼的？這是否符合他們的BEM方法。謝謝

來源

2014-11-08 samsos

它不是被問到的問題，但是，我個人認爲，破折號更易讀，然後下劃線。 'hero__project__summary' vs'hero-project-summary' – Schmalzy 2014-11-08 15:44:07

嘿，我同意你的意見！但是現在我仍然會嚴格要求，因爲我還在學習BEM。一旦我完全掌握了自己的想法，我就會開始實施自己的想法。 – samsos 2014-11-08 15:46:29

試試這個項目getbem.com – 2015-08-03 09:18:13

據我瞭解BEM，我會說你的命名沒有意義。你的座（或模塊）將是你的.hero。你的元素將是你的塊的主要組成部分（即項目標題，項目元等）。如果你需要你的塊不同的狀態上的修改，你可以在另外添加一個到您的塊（例如class=".hero .hero--isHidden）

<div class="hero"> 
    <div class="grid"> 
    <h1 class="hero__project-title"></h1> 
    <div class="hero__project-meta"></div> 
    <p class="hero__project-summary"></p> 
    </div> 
</div>

對於更深入的信息結帳http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/

來源

2014-11-08 16:57:00 skube

嘿，男士，我目前正在**網站的**項目頁面**，因此.hero__項目的原因是我的主要塊......（用於頁面特定樣式）。除了感謝鏈接，這是有幫助的。 – samsos 2014-11-08 17:30:00

我認爲重點是將'.hero'作爲可以在任何頁面上使用的模塊。如果有一個特別的原因'.hero'是該項目的網頁我，你能猜出使用改性劑（即'類=」英雄.hero - project'）上的不同。但保持一切相同 – skube 2014-11-08 17:32:39

我最初去與！。這反而變得迷茫，這就是爲什麼我在這裏結束了感謝 – samsos 2014-11-08 17:34:44

要回答你有關的問題其他的名字，我想我會稍微修改我的答案。同樣，只有使用--project修飾符才能確定其他元素的樣式，如果它們確實不同於其他頁面上的hero。

<div class="hero hero--project"> 
    <div class="grid"> 
    <h1 class="hero__title"></h1> 
    <div class="hero__meta"></div> 
    <p class="hero__summary"></p> 
    </div> 
</div>

來源

2014-11-09 01:03:03 skube

我是新來的BEM，並試圖把我的頭圍繞着它。我讀過BEM的一個規則是沒有嵌套選擇器。因此，根據第二個答案，假設我們將英雄標題設置爲黑色，但風格項目英雄標題爲紅色。 CSS會是這樣嗎？

.hero__title { color: #000; } 
.hero--project .hero__title { color: #cc0000; }

來源

2015-10-29 20:05:01 Steve

Bem的命名約定

回答

相關問題