[11/18] Стиль кода

Курсы §8. Селекторы
1

Добрый вечер.
Сделал задание, но возник вопрос по поводу самого стиля кода.

Корректно ли так делать и не создает ли это проблем с чтением кода? (то, что цвет мишеней изменяется в связи с последовательностью выполнения кода).

.shooter-1 li:nth-child(n) {
    background-color: white;
}

.shooter-1 li:nth-child(2) {
    background-color: red;
}

.shooter-1 li:nth-child(5) {
    background-color: red;
}

.shooter-2 li:nth-child(n) {
    background-color: white;
}

.shooter-2 li:first-child {
    background-color: red;
}
2

Нет проблем. Код так и выполняется (читается) сверху вниз.
Единственное, что вы можете еще сделать - это сократить свой код, записав селекторы для второй и пятой мишени через запятую.
А в этом фрагменте:
.shooter-1 li:nth-child(n) {
background-color: white;
}
селектор можно писать просто .shooter-1 li, поскольку сначала вы задаете всем мишеням белый цвет.

3

А ничего лучше такого варианта нет?

.shooter-1 li:nth-child(2), .shooter-1 li:nth-child(5)  {
    background-color: red;
}
4

А чем он плох по-вашему?)

5

Еще вы можете воспользоваться этим сайтом: http://nth-calculator.com/ и вычислить единую формулу.
В данном случае еще можно так написать:
.shooter-1 li:nth-child(3n+2) {
background-color: red;
}

2 лайка
6

Очень крутой сайт, спасибо!

1 лайк
7

Подскажите, пожалуйста, а такой длинный код - это просто, чтоб показать последовательность действий?

Ну т.е. когда я записала его так:

li {
background-color: white;
}
.shooter-1 li:nth-child(2),
.shooter-1 li:nth-child(5),
.shooter-2 li:nth-child(1) {
background-color: red;
}

сократив довольно много этапов - это хуже?

1 лайк
8

Нет, не хуже. Это лишь показатель того, что вы хорошо понимаете то, что пишете.

2 лайка
9

Спасибо! Прям вдохновили меня :slight_smile:

10

Поясните пожалуйста почему не корректна такая версия кода:

li {
background-color: white;
}
.shooter-1
li:nth-child(2),
li:nth-child(5),
.shooter-2
li:nth-child(1) {
background-color: red;
}

На второй мишени закрашивается 5 выстрел
UPD: Ошибку осознала, можно не отвечать )

11

Перед селектором нет указания, мишень какого стрелка красить. Поэтому красится у обоих.

12

Я тоже использовал такой код, но он почему-то не сработал.