В CSS или SASS использование "#foo #bar {width: 200px}" не рекомендуется для увеличения размера файла?

Question

Короткий вопрос: не рекомендуется ли следующее (идентификатор под другим идентификатором) для увеличения размера файла CSS?

#product-box #product-photo { width: 200px }

---

детали:

Иногда в SASS, у нас может быть

#product-box

  margin-top: 20px

  #product-photo
    width: 200px

таким образом, это означает, что он «вложенный», то есть стиль #product-photo шириной 200px верен только в пределах #product-box, а CSS генерируется изSASS равен

#product-box { margin-top: 20px }
#product-box #product-photo { width: 200px }

, но здесь мы имеем избыточный #product-box перед #product-photo, потому что #product-photo сам по себе может однозначно идентифицировать элемент.

В результате,Файл CSS может стать раздутым.Интересно, рекомендуется ли делать отступ в #product-photo в файле SASS, чтобы его не нужно было вкладывать?

Я думаю, у нас может быть класс .photo внутри #product-box... это правда?Но в некоторых случаях у нас может быть 2 фотографии или 2 li внутри #product-box, и поэтому использование класса не может однозначно идентифицировать элемент.Если мы используем jQuery, это правда, что мы можем сказать $('#product-box li:eq(2), чтобы добраться до любого элемента, но это может привести к ошибке, если кто-то добавит еще один li, не зная, что от этого зависит код jQuery.Наличие id предотвратит такую ​​ошибку.

Answer 1

если вы выбираете элемент по его идентификатору, вам не нужно иметь вложенный селектор - идентификатор должен быть uique каждый раз.если у вас есть класс, у которого другой стиль в зависимости от его родителя, вы должны использовать такой селектор nestes (но, если у класса одинаковый стиль в каждом случае, вы также можете удалить родительский селектор).

пример:

#product-box #product-photo { width: 200px }

- это то же самое, что и

#product-photo { width: 200px }

, для этого вы также можете использовать класс:

.photo { width: 200px }

, но: если фотография имеет другой размер в некоторых случаях, вы должны сделать что-то вроде этого:

#product-box .photo { width: 200px }
#another-box .photo { width: 150px }

или, альтернативно, определить «по умолчанию» и особый случай:

.photo { width: 200px } // the default
#another-box .photo { width: 150px } // special size for photos inside #another-box

примечание: я понятия не имею, как это сделать в sass (я не знаю, что такое sass ), но я надеюсь, что это все равно вам поможет.

note2: вам не следует беспокоиться об этом небольшом влиянии на размер файла CSS, пока у вас не будет очень, очень, очень много трафика на вашем сайте - гораздо важнее, чтобы все читалось илегко понять, иначе вы попадете в ад, если вам придется что-то изменить в будущем (также, если вы не хотитечтобы максимально уменьшить размер вашего файла, почему вы используете такие длинные идентификаторы?для того, чтобы сломать это, не лучше ли было бы использовать #a #b #c #d ... и так далее?)