How to layout nested lists correctly in BEM?

Question

BEM

How to layout nested lists correctly in BEM?

First option

<!-- BEGIN .list -->
          <div class="list">
            <ul>
              <li>
                <span>Cum sociis natoque penatibus et</span>
              </li>
              <li>
                <span>Magnis dis parturient montes luctus pharetra vulputate</span>
                <ul>
                  <li>
                    <span>Cum sociis natoque penatibus et</span>
                  </li>
                  <li>
                    <span>Magnis dis parturient montes luctus pharetra
                      vulputate</span>
                    <ul>
                      <li>
                        <span>Cum sociis natoque penatibus et</span>
                      </li>
                      <li>
                        <span>Magnis dis parturient montes luctus pharetra
                          vulputate</span>
                      </li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
          <!-- END .list -->

Second option

<!-- BEGIN .list -->
          <ul class="list">
            <!-- BEGIN .list__item -->
            <li class="list__item">
              <!-- BEGIN .list__text -->
              <span class="list__text">Cum sociis natoque penatibus et</span>
              <!-- END .list__text -->
            </li>
            <!-- END .list__item -->
            <!-- BEGIN .list__item -->
            <li class="list__item">
              <!-- BEGIN .list__text -->
              <span class="list__text">Magnis dis parturient montes luctus pharetra vulputate</span>
              <!-- END .list__text -->
              <!-- BEGIN .list -->
              <ul class="list">
                <!-- BEGIN .list__item -->
                <li class="list__item">
                  <!-- BEGIN .list__text -->
                  <span class="list__text">Cum sociis natoque penatibus et</span>
                  <!-- END .list__text -->
                </li>
                <!-- END .list__item -->
                <!-- BEGIN .list__item -->
                <li class="list__item">
                  <!-- BEGIN .list__text -->
                  <span class="list__text">Magnis dis parturient montes luctus pharetra
                    vulputate</span>
                  <!-- END .list__text -->
                  <!-- BEGIN .list -->
                  <ul class="list">
                    <!-- BEGIN .list__item -->
                    <li class="list__item">
                      <!-- BEGIN .list__text -->
                      <span class="list__text">Cum sociis natoque penatibus et</span>
                      <!-- END .list__text -->
                    </li>
                    <!-- END .list__item -->
                    <!-- BEGIN .list__item -->
                    <li class="list__item">
                      <!-- BEGIN .list__text -->
                      <span class="list__text">Magnis dis parturient montes luctus pharetra
                        vulputate</span>
                      <!-- END .list__text -->
                    </li>
                    <!-- END .list__item -->
                  </ul>
                  <!-- END .list -->
                </li>
                <!-- END .list__item -->
              </ul>
              <!-- END .list -->
            </li>
            <!-- END .list__item -->
          </ul>
          <!-- END .list -->