<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>
I want to apply BEM in my code snippet. I want my content inside .wrapper to display:flex. What's the best way? Is applying rules to .wrapper like display:flex the most appropriate way? Is it better to create another div class e.g. .about__container (but in this case how to apply BEM to whole component?)
Don't use ID for BEM styling, use a class class="about" and then maybe class="about__container" (or about__content) instead of wrapper. If it needs an ID for some javascript-stuff, you can give it both an ID and a class. But don't mix IDs and classes in you BEM syntax.
Only use generic classes like "wrapper" or "container" for stuff that are going to be reused across multiple elements, with properties like width, max-width, padding or maybe font-stylings. If the styling are specific to the "about"-component, use about__container or maybe a mix: <div class="about__container wrapper">
Also, remove the > in class="about__img">