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

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

0 голосов
/ 16 декабря 2018

На моем сайте действительно много panel с.У каждого из них есть div с классом items-container, и внутри него есть несколько item div (все, что вы можете увидеть в примере кода ниже).Чтобы стилизовать их все, я создал «глобальные» стили (назовем их global ), которые работают на всех панелях, но есть несколько, которые я хочу иметь разные стили.Чтобы изменить стили панели top-container, мне нужно скопировать все стили global и переопределить каждый из них под новым селектором (top-container).

Есть ли другой способизменить стили моей top-container панели, чем переопределить каждую из них в отдельности?

Решения JS также приветствуются (если они есть ...).

Вот демонстрационная версия: LINK

А вот код: 

<div class="top-container">
  <div class="top panel">
    <div class="items-container">
      <div class="item">Item1</div>
      <div class="item">Item2</div>
      <div class="item">Item3</div>
      <div class="item">Item4</div>
    </div>
  </div>
</div>

<div class="middle">
  <div class="left panel">
    <div class="items-container">
      <div class="item">Item1</div>
      <div class="item">Item2</div>
      <div class="item">Item3</div>
      <div class="item">Item4</div>
      <div class="item">Item5</div>
      <div class="item">Item6</div>
      <div class="item">Item7</div>
      <div class="item">Item8</div>
    </div>
  </div>

  <div class="right panel">
    <div class="items-container">
      <div class="item">Item1</div>
      <div class="item">Item2</div>
      <div class="item">Item3</div>
      <div class="item">Item4</div>
      <div class="item">Item5</div>
      <div class="item">Item6</div>
      <div class="item">Item7</div>
      <div class="item">Item8</div>
    </div>
  </div>
</div>

CSS: 

.top-container {
  width: calc(100% - 4px);
  height: 50px;
}

.panel {
  border: 2px solid black;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.middle {
  width: 100%;
  height: 250px;
  display: flex;
  flex-direction: row;
  margin-top: 10px;
}

.items-container {
  display: flex;
  flex-direction: column;
  text-align: center;
}

.item {
  font-weight: bold;
}

.top-container .items-container {
  display: block;
}

.top-container .items-container .item {
  display: inline-block;
}

Я пишу стили в SASS, но jsfiddle как-то не сделалне работает, даже когда я сменил язык.

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

1 Ответ

0 голосов
/ 16 декабря 2018

Как вы упомянули!

Чтобы изменить стили панели верхнего контейнера, мне нужно скопировать все глобальные стили и переопределить каждый из них под новым селектором (верхний контейнер).

Самый простой способ - создать глобальный класс, который вы уже сделали .panel.Теперь, если вы хотите придать любой из панелей другой стиль, либо добавьте новый класс <div class="top panel panel1">, либо выберите дочерний селектор .middle > .left, либо выберите nth-Child().

Вот ваш обновленный Fiddle с моим примером.

Надеюсь, он ответит на ваш вопрос.

...