tomwray13

var TxtType = function(el, toRotate, period) {
        this.toRotate = toRotate;
        this.el = el;
        this.loopNum = 0;
        this.period = parseInt(period, 10) || 2000;
        this.txt = '';
        this.tick();
        this.isDeleting = false;
    };

tomwray13

/* Block component */
.card {}

/* Elements are dependent on their parent block */
.card__img {}

/* Modifiers are for incremental style changes */
.card--dark {}
.card__img--large {}

tomwray13

<!-- INCORRECT -->
<div class="large-red-box">
    <img src="...">
    <h2>...</h2>
    <p>...</p>
    <a>...</a>
</div>

<style>
.large-red-box {}

tomwray13

<!-- INCORRECT (Because of CSS, see below) -->
<div class="card">
    <img src="…">
    <h2>…</h2>
    <p>…</p>
    <a>…</a>
</div>

<!-- The use of a class AND element selector is unneccisary here. With BEM, you just use the class selector (see next snipper for best practice example) -->
<style>

tomwray13

<!-- INCORRECT -->
<div class="card--dark">
    <img src="…">
    <h2 class="card__title--large">…</h2>
    <p>…</p>
    <a>…</a>
</div>

<style>
.card--dark {}

tomwray13

<!-- CORRECT -->
<div class="card card--dark">
    <img src="…">
    <h2 class="card__title card__title--large">…</h2>
    <p>…</p>
    <a>…</a>
</div>

<style>
.card {}

tomwray13

<div class=“nav”>
    <ul class=“nav__menu”>
        <li class=“nav__menu__item”>
            <a class=“nav__menu__item__link”>Home</a>
        </li> 
    </ul>
</div>

tomwray13

<div class=“nav”>
    <div class="nav__wrapper"> <!-- Here is my new div-->
        <!-- Now I need to refactor all the classes below
        because of the new div -->
        <ul class=“nav__wrapper__menu”>
            <li class=“nav__wrapper__menu__item”>
                <a class=“nav__wrapper____menu__item__link”>Home</a>
            </li> 
        </ul>
    <div>

tomwray13

<div class=“nav”>
    <ul class=“nav__menu”>
        <li class=“nav__item”>
            <a class=“nav__link”>Home</a>
        </li> 
    </ul>
</div>

tomwray13

<div class=“nav”>
    <!-- New div added without the need to refactor -->
    <div class="nav__wrapper"> 
        <ul class=“nav__menu”>
            <li class=“nav__item”>
                <a class=“nav__link”>Home</a>
            </li> 
        </ul>
    </div>
</div>