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


#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;
}


#6

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


#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;
}

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


#8

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


#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

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