Свойство для конкретного селектора

Question

1.Резюме

1. У меня есть список селекторов, к которым всегда должны применяться свойства.
2. Для некоторых селекторов необходимо дополнительно добавить другие свойства.

Я могуНе могу найти, как мне это сделать без дубликатов.

---

2.MCVE

2.1.Ожидаемый CSS

.KiraFirst,
.KiraSecond,
.KiraThird {
  color: red;
}
.KiraSecond {
  background-color: yellow;
}

Например, я использую класс .KiraSecond 2 раза.Могу ли я получить ожидаемое поведение без этого дубликата?

2.2.Стилус

• Демонстрация в реальном времени на stylus-lang.com

.KiraFirst
.KiraSecond
.KiraThird
    color red

.KiraSecond
    background-color yellow

Это скомпилировано в ожидаемый CSS, ноЯ до сих пор использую .KiraSecond 2 раза.

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

.KiraFirst
.KiraSecond
    background-color yellow
.KiraThird
    color red

Результат:

.KiraFirst,
.KiraSecond {
  background-color: #ff0;
}
.KiraThird {
  color: #f00;
}

---

3.Не помогло

1. Официальная документация по стилусу включает Раздел селекторов
2. Переполнение стека Вопросы по стилусу
3. Выпуски стилуса GitHub

Answer 1

Ты (не можешь)?и ты не должен.Дублирование этого селектора в этом случае не является плохой практикой.

• вы не дублируете одно и то же свойство / значение для многих классов
• , вы можете явно переопределить определенное свойство
• Вы можете четко изменить / изменить поведение для определенного класса

Например:

.class1, .class2, .class3 {
  color: red;
  background: yellow;
  border: 1px solid;
}

.class1:hover {
  color: blue;
}

.class2 {
  border: 2px dotted;
}

.class3 {
  color: pink;
}

Что будет плохой практикой в ​​этом случае (без дублирования селектора)

.class1 {
  color: blue;
  background: yellow;
  border: 1px solid;
}

.class2 {
  color: red;
  background: yellow;
  border: 2px dotted;
}

.class3 {
  color: pink;
  background: yellow;
  border: 1px solid;
}

Answer 2

Может быть, вы можете использовать базовый класс для всех элементов?Например - .Kira, и если вам нужно указать что-то для других элементов, вы можете добавить дополнительный класс .KiraSecond или использовать .Kira: nth-child (2)

в вашем примере это может быть что-то вроде этого

.Kira {
  color: red;
}
.KiraSecond {
  background-color: yellow;
}

или

.Kira {
  color: red;
}
.Kira:nth-child(2) {
 background-color: yellow;
}