Блог

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

В идеале, если за an <h1> следует an <h3> , то мне нужна определенная маржа, но если <h1> за ней следует a <p> , то я хочу, чтобы маржа была другой.

Есть ли стиль или решение для создания чего-то, что может послужить основой для всех моих стилей, с которыми я могу работать, если мне понадобится большая конкретика в будущем?

Однако, следующее…

 h1 h3 {
  margin-top: 2rem;
  background: blue;
}
 

…это не то же самое, что…

 h1   h3 {
  margin-top: 2rem;
  background: green;
}
 

…ни то, ни другое не сработает…

 <header>
  <h1>Hello World</h1>
  <div class="sub-title">
    <div class="super-sub-title">
      <h3>The Real World</h3>
    </div>
  </div>
</header>
 

 h1 h3 {
  margin-top: 2rem;
  background: blue;
}

h1   * h3 {
  margin-top: 2rem;
  background: green;
} 

 <header>
  <h1>Hello World</h1>
  <div class="sub-title">
    <div class="super-sub-title">
      <div class="super-duper-sub-title">
        <h3>The Real World</h3>
      </div>
    </div>
  </div>
</header>