search

csswizardry / ama

Ask me anything!
57 stars 4 forks source link

Question about BEM and ATOMIC CSS #58

Open ghost opened 4 years ago

ghost commented 4 years ago

Hi, I have a question about the bem methodology mixed with a little bit of atomic css. For instance, we have this piece of code:


<!-- Single integration -->
   <div class="integration integration--dropbox flex items-start">
  <div class="integration__photo flex-shrink-0">
  <img class="integration__img js-lazy" data-src="src" alt="">
  </div>
  <div class="integration__text">
  <h4 class="heading h4 h4--margin-xs">Dropbox</h4>
  <p class="standard-text">Some text.</p>
  <p class="text-label text-label--styled text-label--integration text-label--dropbox">Dropbox</p>
  </div>

  </div>

You can see here we have a single block, called integration that look like this:

image integration block

For align the icon with the text element we have used flexbox, but instead of defining it on the css we have defined it throught html classes.

Now, following the bem guidelines, do you think this is correct? Or I have to put the flexbox layout in the .integration selector like normal css?

Thank you for reading

ghost commented 4 years ago

Anyone?