В настоящее время я работаю над некоторыми темами HTML5 для нескольких моих веб-сайтов, и у меня все еще возникают проблемы со способом

можно использовать несколько раз. Кажется, я не могу предсказать, в каких элементах будут отображаться заголовки, но я хочу попытаться автоматически определить их размер в зависимости от их положения в DOM ...

Я думал об использовании чего-то вроде

h1 { font-size: 3em; }
h2,
body > * > header h1 { font-size: 2.5em; }
h3,
body > * > header h2,
body > * > * > header h1 { font-size: 2em; }

Но очевидно, что это далеко не водонепроницаемость. Наличие дополнительного элемента вокруг h1, который на самом деле не означает, что он глубже в структуре страницы, будет иметь тенденцию выбирать слишком маленькие размеры. Например, неупорядоченный список с блоками, каждый из которых имеет собственный заголовок, будет иметь что-то вроде

<section>
  <ul>
    <li>
      <header>
        <h1>Title of a block</h1>
      </header>
      content
    </li>
 </ul>
</section>

, что делает

кажутся намного глубже, чем есть на самом деле. Каковы хорошие способы справиться с этим?