How to use "atomic-design with BEM" methodology for HTML/CSS?

Question

I just started using the Atomic design-methodology for writing my HTML. I know to use BEM, but don't know the best practice's for using it with Atomic. Things such as element of an organism, element of a molecule, modifier of an element of a molecule etc.. tends to create some confusion and am not sure I'm using these correctly. Can somebody please explain. Any help is appreciated

Example code:

<div class="container cl-organism-learn">
  <div class="row cl-molecule-learn-row cl-organism-learn__elem">
    <div class="col-sm cl-atom-first cl-molecule-learn-row__elem cl-atom-first--background-blue">
      One of three columns
    </div>
    <div class="col-sm cl-atom-second cl-molecule-learn-row__elem cl-atom-first--background-red">
      Two of three columns
    </div>
    <div class="col-sm cl-atom-third cl-molecule-learn-row__elem cl-atom-first--background-yellow">
      Three of three columns
    </div>
  </div>
</div>

question from:https://stackoverflow.com/questions/65913242/how-to-use-atomic-design-with-bem-methodology-for-html-css

Answer 1

Waitting for answers