2020-03-09 20:00:27
Круто, что большинство ответило правильно - селекторы лучше всего писать по классам.
Тут сейчас можно спорить и придумать много примеров, когда этот ответ не катит. И действительно, есть целый ряд примеров, когда вам придется писать селекторы не обязательно по классам, однако все эти примеры скорее исключение, чем правило.
Опишу вкратце:
1. Селекторы по Id
У id есть один основной недостаток - он должен быть уникальным на странице. Этого уже достаточно, чтобы отказаться от него в вёрстке. Это не значит, что его совсем нельзя использовать. Для работы с элементом из JS или для использования стандартных механизмов браузера на базе id'шников - пожалуйста. Но не пишите селекторы по id.
Даже если вам кажется, что этот элемент точно один на странице, и у него уже есть id, то можно к нему обратиться по id и в CSS - не делайте так. Всё равно вы придёте к ситуации, когда этот элемент или его стиль надо будет снова использовать, и вы все равно замените его на class. Так зачем этот момент откладывать?
2. Селектор по атрибуту
Такой селектор обычно нужен в отдельных специфичных задачах, и использовать его там - то, что надо. Но в стандартном случае нам такой вариант не подойдёт. Мы, конечно, можем элементу задать свои выдуманные атрибуты, так почему бы не использовать класс?
3. Селектор по тегу
Да, бывают исключения, когда прям без вариантов и надо написать по тегу. Но это редкость. У меня есть сомнение, что вы верстаете что-то настолько уникальное, что там эти исключения всюду. В стандартном случае писать селекторы по тегам плохо, как минимум по двум причинам:
- вы сильно завязываете все на вложенности, когда пишете селекторы вида: header div nav li a {}. Стоит поменять хоть немного структуру в html, и вам уже придётся переписать селектор. Более того, селекторы становятся очень сложными просто из-за необходимости более "тонкой" выборки элементов. И вы начинаете выдумывать, каким селектором выбрать этот элемент. С классом такой проблемы не будет, или будет, но очень редко;
- браузер иначе читает ваш селектор. Селектор вида .title div {} браузер парсит в обратную сторону. Сначала он выберет все элементы div на странице, а после этого проверит, какие из них входят в элемент с классом .title и, зная, сколько обычно у вас тегов div на странице, вы понимаете, насколько больше лишней работы сделает браузер в таком случае. Если заменить этот селектор на подобный: .title .badge {}, то даже при обратном парсинге селектора, браузер скорее всего найдет не так много элементов с классом .badge, а потом проверит, какие из них находятся внутри элемента .title.
4. Селектор по классу
Селектор по классу - это вообще ваш бро. Он сколько угодно раз может повторяться на странице. У одного элемента может быть несколько классов (чем не может похвастаться id). Прикрутите к этому ещё и рекомендации какого-то БЭМ'а, например, и получаете очень крутой и гибкий способ влиять на элементы из CSS.
Если вы хотите с чем-то поспорить или дополнить, я всегда только за: @fominua
1.3K viewsedited 17:00
F
