Владислав Килин

Странное ощущение, что это троловопрос. Тем не менее.

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

Если вы собрались переводить ваш сайт с одного подхода на другой, вы так или иначе встанете перед дилеммой: переписывать все или переписывать не все. Другой вопрос, что двойственный подход может стоить вам куда больше полной переписки.

Исключительно в ваших силах не превращать все в выгребную кучу. Я, например, пользуюсь совершенно тривиальным подходом в верстке, который на достаточно серьезных проектах так и не скатился в тартарары.
1. Побольше частичных представлений данных. Конечно, не на каждый чих, но на каждую более-менее абстрактную часть модели.
2. На каждое частичное представление - свой css-файл.
3. Каждый элемент взаимодействия с пользователем - свой js-компонент.

Обычный todo-mvc превращается с таким подходом вот в такую структуру:

todo/
todo.view
todo.css
todo.js
todo_test.js
todoitem/
todoitem.partial
todoitem.css
todoitem.js
todoitem_test.js

Каждое представление состоит из маленького куска верстки, редко больше 50 строк. Каждый css- и js-файл - аналогично. Последний проект, который я делал по такой схеме пережил два года, примерно 10000 коммитов верстки, представлял собой мастер оплаты, веб-приложение и три админки к нему, и до сих пор адекватно функционирует и изменяется.

Я бы все-таки настоятельно не рекомендовал вам использовать селекторы ID именно в CSS по одной простой причине.

Движки рендеринга Gecko и Webkit при формировании Reflow и Layout соответственно строят индексы по ID ровно таким же способом, как и по имени класса. В качестве побочного явления - вы можете написать примерно то же, что и здесь, и код будет работать именно таким образом. Как по мне, это несколько неочевидное поведение, что стили применяются ко всем элементам с таким идентификатором, а не только к первому.

Многие разработчики, да и начинающие верстальщики путают концепцию CSS и их селекторов с особенностями языка XML. Надо понимать, что ID в XML - это строгий параметр, по которому строится индекс с BST, который позволяет быстро находить первое совпадение идентификатора (то же происходит и в JS при вызове document.getElementById("test")), но в CSS и при построении лайаута все гораздо менее строго. И следует заметить, что сами разработчики браузеров решили так сделать, основываясь, вероятнее всего, на концепции того, что верстальщикам нередко приходится повторно пользоваться стилями, описанными для селекторов ID.

Таким образом, с точки зрения быстродействия "#" ничем не отличается от ".", по крайней мере, в современных вебкитах и фаерфоксах. Теперь что касается точки зрения good practice.

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

В своей практике я всегда использую идентификаторы для тех нод, которые участвуют в JavaScript, и в уникальности роли которых я уверен. Конечно, там тоже иногда приходится менять, но гораздо реже, чем в CSS. Но для визуального отображения я всегда использую классы, чтобы иметь полное право не писать код повторно, если вдруг дизайнер захочет вставить "тот самый единственный на весь сайт хэдер, его точно больше нигде не будет" в другую часть страницы.

Ну а что касается аргументов про "больше кода", могу предложить таким борцам за лишний десяток знаков перейти на шаблонизаторы; или перенять даже целиком концепцию БЭМ, тогда код совсем в разы уменьшится.

$(window).load(function(){
	$('.fixBlock').liFixar({
		side: 'top',
		position: 0,
		fix: function(el, side){
			el.addClass("fixed");
			el.liFixar('update')
		},
		unfix: function(el, side){
			el.removeClass("fixed");
			el.liFixar('update')
		}
	});
})

.hr li {
    background: #FFF;
    color: #000;
}
.hr .fixed {
    background: none;
    color: #fff;
}
.hr .fixed:hover {
    border-bottom: 1px solid #aa5;
}

По-хорошему, ваш JS код не должен хранить данных о внешнем виде сайта. Это нарушает основной принцип декомпозиции логики и отображения и в дальнейшем вам аукнется - например, если у вас появится задача сделать "ночную" версию сайта или мобильную.