BEM classes

gistfile1.txt

FormFields (ff) is a js webpack that will key off of some CSS class selectors and add functionality for adding and removing
fields. I want to use the same CSS classes that Boottrap is using for fomatting, but not have to rely on them explicity.
So I prefaced each one I was using with ff-, ex: ff-input-group and ff-form-control. The others that are not based off of
Boostrap are ff-multiple, ff-remove, and ff-add, to keep the namespacing consistent.

Is this a BEM-approved method of naming? Alternatives might be formFields-, form_fields-, form-fields--, or other combinations.

<div class="form-group form-multiple-ff subject">
  <label for="archival_collection_subject">Subject</label>
  <div class="input-group input-ff">
    <input aria-required="false" class="form-control ff-form-control" multiple="multiple" value="" type="text" name="archival_collection[subject][]" id="archival_collection_subject">
    <span class="span-remove-ff">(-) Remove</span>
  </div>
  <div class="input-group input-group">
    <input aria-required="false" class="form-control ff-form-control" multiple="multiple" value="" type="text" name="archival_collection[subject][]" id="archival_collection_subject">
    <span class="span-remove-ff">(-) Remove</span>
  </div>
  <span class="span-add-ff">(+) Add another Subject</span>
</div>