<section id="about">
<div class="wrapper">
<div class="about__description">
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p>
<a class="btn btn-primary" href="">more</a>
</div>
<img class="about__img" src="<?php get_template_directory_uri() . '/img/grafika1.jpg' ?>" alt="O nas">
</div>
</section>
我想在代码段中应用BEM。我希望我的内容在.wrapper
至display:flex
中。最好的方法是什么?将规则像.wrapper
应用于display:flex
是最合适的方法吗?最好创建另一个div类,例如.about__container
(但是在这种情况下,如何将BEM应用于整个组件?)
答案 0 :(得分:2)
不要将ID用于BEM样式,请使用类class="about"
,然后使用class="about__container"
(或about__content)而不是wrapper
。如果它需要一些javascript-stuff的ID,则可以同时给它一个ID和一个类。但是不要在您的BEM语法中混用ID和类。
仅将通用类(例如“包装器”或“容器”)用于将要在多个元素之间重用的东西,并具有诸如width,max-width,padding或字体样式之类的属性。如果样式特定于“关于”组件,则使用about__container
或混合使用:<div class="about__container wrapper">
还要删除>
中的class="about__img">