Вложенные списки или как правильно влаживать список в список

Недавно передо мной была поставлена задача сверстать небольшой документ в html. В данном документе было обычное «Условия пользование» с множеством пунктов и подпунктов.

Вид списка был примерно таков:

1. Первый заголовок
-1.1. Подпункт 1 
-1.2. Подпункт 2
--1.2.1. Подпункт 1 подпункта 2
--1.2.2. Подпункт 2 подпункта 2
-1.3. Подпункт 3
-1.4. Подпункт 4
2. Второй заголовок

Ленивый вариант №1

Можно было пойти простым путем и не замысловатым путем, а именно, просто в ручную прописать пункты в списке, получилось бы (Убрать маркер «•» можно через CSS используя list-style-type: none;):

<ul style="list-style-type: none;">
-<li>1. Первый заголовок</li>
--<li>1.1. Подпункт 1 </li>
--<li>1.2. Подпункт 2</li>
---<li>1.2.1. Подпункт 1 подпункта 2</li>
......
</ul>

Почему бы и нет, данный способ работает и отлично справляется со своей задачей. Его простота не требует использование дополнительного кода, нужно лишь раз заморочиться и сверстать документ. Даже если что-то сломается на сайте (хотя я даже не могу представить, что должно произойти, но предположим, что-то да произошло) наше «Условие пользования» будет иметь правильный вид.

Продвинутый вариант №2

Для реализации нам понадобится CSS (честно и сознательно скопированный со stackoverflow:

ol {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}

ol > li {
  display: table;
  counter-increment: item;
  margin-bottom: 0.6em;
}

ol > li:before {
  content: counters(item, ".") ". ";
  display: table-cell;
  padding-right: 0.6em;    
}

li ol > li {
  margin: 0;
}

li ol > li:before {
  content: counters(item, ".") " ";
}

Прикрепляю изображение того, что у нас должно получиться:

Данный код позволяет реализовать тот функционал, к которому мы стремились в самом начале, а именно правильный и красивый вывод вложенных числовых списков. НО Что же делать, если вдруг у нас в нумерованных списках будут обычные, НЕ нумерованные?

-1.1. Подпункт 2
--1.1.1. Подпункт 1 подпункта 2
--1.1.2. Подпункт 2 подпункта 2
-1.2. Подпункт 3
-1.3. Подпункт 4
-- Не нумерованный пункт 1
-1.4. Подпункт 5

Код, приведенный выше не даст нам желаемого результата, так как он инкрементирует каждый новый, но нам ведь не нужен +1 в не нумерованном пункте. Для этих целей я дополню код CSS:

.tyre{
list-style: none;
}

.tyre li:before {
    content:  "—";
    position: relative;
    left:     -5px;
}

В итоге, мы получим результат к которому стремились:

<ol>
-<li> Первый заголовок
--<ol>
---<li>Подпункт 1.1</li>
---<li>Подпункт 1.2</li>
--</ol>
-</li>
-<li> Второй заголовок
--<ol>
---<li> Подпункт 2.1
----<ul class='tyre'>
-----<li>Не нумерованный пункт 1</li>
-----<li>Не нумерованный пункт 1</li>
----</ul>
---</li>
---<li>Подпункт 2.2</li>
---<li>Подпункт 2.3</li>
--</ol>
-</li>
.........
</ol>

Да, я понимаю, данный вариант значительно больше и сложнее предыдущего, и многие предпочтут воспользоваться первым вариантом, чем заморачиваться, их тоже понять можно. Но посмотрите с другой стороны, возможно у вас большой и длинный список в котором очень много подпунктов. Что бы каждый раз не делать нумерацию в ручную, мой код (успешно скопирован и дополнен) поможет автоматизировать данный процесс и упростить создание вложенных списков :)