Потому, что это прямая работа с DOM и это чертовски быстро работает: http://jsperf.com/document-getelementbyid-vs-jquery/3

Конечно это не актуально для пары вызовов... А когда например вызовы цикличны, анимация или еще, что, js нативный рвет в щепки jquery.
В интернетах даже есть рекомендации по этому поводу, но я особо не вникал и так знаю это, если вызовы частые, например 30 в секунду, то нужно объект даже из функции вносить, чтобы каждый раз не делать document.getElementById('foo'); делаем так:

var foo = document.getElementById('foo');
var fooObj = {obj:foo, wpos: 0, hpos: 0}

function entityThinkRealTime()
{
	if(fooObj.wpos === 1000) {
		fooObj.wpos = 0;
		fooObj.hpos = 0;
	}
	fooObj.wpos++;
	fooObj.hpos++;
	//fooObj.obj.что-то делаем
}

И как же это проявляется? Ведь у них у всех разные дизайны и размеры (у Вк и гугл, у остальных в весь экран), разная аудитория и разные практики. Вы сразу же за всеми из них следуете или за кем-то одним?

Вы говорите о резиновой и адаптивной верстке с такой страстью, что наверное забыли у себя такое на сайте такое сделать

У гугла и всех остальных перечисленных вами, две отдельных таблицы стилей (или даже приложения, как у Вк и Facebook). Одна для десктопа, другая для мобилы.

Так что Вы тоже создаете две отдельные таблицы, или же @media запросы используете? На Вашем сайте это не особо отражается.

Жду ответов

_____________
Мой блог

обычная оптимизация, такое делают без всяких "рекомендаций"

_____________
"internet explorer всех правильней отображает страницы" ©

var foo = document.getElementById('foo');
var fooObj = {obj:foo, wpos: 0, hpos: 0}

function entityThinkRealTime()
{
	if(fooObj.wpos === 1000) {
		fooObj.wpos = 0;
		fooObj.hpos = 0;
	}
	fooObj.wpos++;
	fooObj.hpos++;
	//fooObj.obj.что-то делаем
}

Это называется кэшированием DOM узлов. Многие jQuery пользователи не знаю о переиспользование и оптимизации jQuery селекторов. А вы знаете что такое:

$('#id').find('.class');

Быстрее такого:

$('#id .class');

?

_____________
Мой блог