我是一个前端新手,正在尝试理解SASS和BEM的概念。
我非常困难地理解命名约定以及如何与SASS组织它。
我编写了一个产品部分,其中包含三个div(列),它们本身包含子元素。
我不知道如何很好地组织这些名称。例如,img是product__preview的子元素,但我倾向于将类命名为product__img....但这似乎不正确?如果在产品部分中有多个图像,但其中一些必须不同,我们如何处理名称?(product__img似乎太模糊了) 对于特殊情况,我需要添加product__preview__img class吗?
你能帮我纠正这个块,以便我正确理解命名吗?
提前感谢您!
<section class="product">
<img class="product__cover product__item" src="./images/nintendo/marioodyssey/marioodyssey-1.jpg" alt=""
srcset="">
<div class="product__preview product__item">
<img class="product__img" src="./images/nintendo/marioodyssey/marioodyssey-2.jpg" alt="" srcset="">
<img class="product__img" src="./images/nintendo/marioodyssey/marioodyssey-3.jpg" alt="" srcset="">
<img class="product__img" src="./images/nintendo/marioodyssey/marioodyssey-3.jpg" alt="" srcset="">
</div>
<div class="product__content product__item">
<h4 class="product__title">Super Mario Odyssey</h4>
<p><span> Date: </span> 2017</p>
<p><span> Story: </span> Super Mario Odyssey[b] is a platform game developed and published by Nintendo for
the Nintendo Switch on October 27, 2017. An entry in the Super Mario series, it follows Mario and Cappy,
a sentient hat that allows Mario to control other characters and objects, as they journey across various
worlds to save Princess Peach from his nemesis Bowser, who plans to forcibly marry her. In contrast to
the linear gameplay of prior entries, the game returns to the primarily open-ended, 3D platform gameplay
featured in Super Mario 64 and Super Mario Sunshine.[1] </p>
<p><span> Review: </span></p>
<button class="product__btn btn-orange-tiger">Add to cart</button>
<button class="product__btn btn-orange-tiger">Go to cart</button>
<button class="product__btn btn-orange-tiger">Keep buying</button>
</div>
</section>
product__features
就可以了。就像我说的,你不想创建超过一个块元素的选择器,例如block__element__element
。这违背了命名约定的目的。因此,创建不必要的复杂嵌套选择器会变得混乱和难以维护。你需要坚持使用 一个 块元素选择器。你的 SCSS 代码看起来会像我更新后的原始帖子一样干净整洁。 - Jamie Reardon