Базовый CSS - Следуя СУХОМУ принципу, как бы я удалил display:grid из своих селекторов?

#css

Вопрос:

Я только начинаю CSS и HTML, так что это определенно вопрос для начинающих. Ниже приведен фрагмент моей текущей работы:

 /* Setup */
* {
    box-sizing: border-box; /* Makes like box model work like I'd expect */
}
body {
    font-family: 'Roboto', sans-serif;
}
/* Necessary Selectors */
#header {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto;

    align-items: end;
}
.logo {
    font-family: 'Rampart One', cursive;
    font-size: x-large;
}
#header-img {
    height: 25px;
}
#nav-bar {
    display: grid;
    grid-template-columns: auto auto auto;
    column-gap: 25px;
}

/* Media Query to change display based on screen width */
@media (max-width: 500px){
    #nav-bar {
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: repeat(auto-fill, auto);

        justify-items: center;
    }
    #header {
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: repeat(auto-fill, auto);

        justify-content: center;
        align-items: center;
    }
}

Проблема, с которой я сталкиваюсь, заключается в том, что почти в каждом селекторе идентификаторов я должен добавлять display: grid . Я использую grid его в качестве основного дисплея, поэтому я бы не хотел перепечатывать это. Я пытался вставить его * и body выбрать, но это работает не так, как я ожидал. * разрывает веб-страницу, и мои селекторы, похоже, не наследуют отображение от body . Есть ли лучший способ?

Ответ №1:

Вариант 1 (рекомендуется): Добавьте a class в оба #header и #nav-bar :

   <header id="header" class="grid"></div>
  <nav id="nav-bar" class="grid" aria-label="main navigation"></nav>

А затем получить доступ к class в CSS :

 .grid {
  display: grid;
}

Вариант 2: Используйте запятую для объединения ваших CSS селекторов:

 #header,
#nav-bar {
  display: grid;
}