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>
