Как правильно присваивать стили?

Question

[RocknRoolla]

Хотелось бы по конструктивней узнать про
как правильно задавать стили элементам.
Все говорят что задавать стили чере id моветон,
но можно же задавать через теги не используя классы.
Какой вариант лучше использовать и почему?

<ul class="nav">
                    <li><a href="" class="nav__link">About</a></li>
                    <li><a href="" class="nav__link">Support</a></li>
                    <li><a href="" class="nav__link">Download</a></li>
                    <li><a href="" class="nav__link">Blog</a></li>
                </ul>

.nav li {
    background-color: #2bff00;
}

.nav__link  {
    background-color: #2bff00;
}

Comments

[Rustam Bainazarov]

Второй. Прочитайте про BEM, который вы же и используете, куча статей, почему это хорошо.

Вкратце: чем меньше вложенности — тем лучше.

[iBird Rose]

пришла потом тебе задача реализовать подменю в этом твоем основном меню. ты реализовал примерно так:

<ul class="nav">
	<li>
		<a href="" class="nav__link">About</a>
		<ul>
			<li><a href="#">Some link</a></li>
			<li><a href="#">Some link</a></li>
			<li><a href="#">Some link</a></li>
			<li><a href="#">Some link</a></li>
		</ul>
	</li>
	<li><a href="" class="nav__link">Support</a></li>
	<li><a href="" class="nav__link">Download</a></li>
	<li><a href="" class="nav__link">Blog</a></li>
</ul>

какой фон будет у li, которые в подменю?

Answer 1

[khomaldi]

Ответом на вопрос может служить БЭМ

Answer 2

[Vaultboy84]

Что то отвечающие, все как на подбор какую то чушь пишут. При чем тут БЭМ? Это всего лишт методология, одна из многих. Суть не в БЭМ, а в том как читаются стили при строительстве дерева DOM. А читаются они не слев направо, а наоборот справа на лево. Таким образом, в первом случае изначально берутся все li в документе, потом из них выбираются li вложенные в nav. А если у вас много li в документе и таким вот образом написаны все стили, то отрисовываться все будет медленее. Указывая же конкретный класс вы сразу же сужаете диапазон и свойства применяются при отрисовке быстрее. Таким образом применять классы более целесооборазно.

Answer 3

[Migen_ru]

В CSS есть понятие специфичности:
1.Специфичность id
2.Специфичность class
3.Специфичность tag

Применяя tag вы будете использовать наименьшую специфичность,
применяя id - наивысшую специфичность. (Более подробно можно прочитать в книге "CSS для Профи").
Поэтому применяя классы вы не будете перевешивать специфичность id, которые в свою очередь обычно применяются для работы с сценариями JS.
А используя только специфичность tag вам нужно будет применять большое количество вложений этих тегов, а программисты народ ленивый, поэтому они используют классы, как самый оптимальный вариант.

А чтобы как-то договориться о стандартах, применяют одну из методологий, например БЭМ от Яндекса (у вас может быть своя, если вы считаете что у вас она лучше).