teotlu

Используйте display: table, display: table-row и display: table-cell, при адаптации под другой экран, если что, просто замените на display: block, или что вам там будет нужно.
Либо, если вы можете себе позволить IE10+, используйте flexbox. Либо flexbox с полифиллом Flexie.js, тогда и под младшие IE пойдёт. Но это уже изврат, мне кажется.
Плюс, в интернете полно вариантов, являющихся костылями в основном.

Использовалась методология БЭМ или что-то на неё похожее. К фреймворкам это не имеет вообще никакого отношения.

Или background-size: 100% auto;

Всё зависит от задачи. Если сайт адаптивный, очень желательно использовать em, а лучше rem (они теперь поддерживаются всеми браузерами, начиная с IE9). Это позволит избежать массы проблем.
Если есть вероятность, что нужно будет изменить коэффициент масштабирования всего текста на сайте, или большей его части ("сделайте весь текст чуть больше, пожалуйста"), тоже лучше использовать относительные величины.

Для всего остального можно спокойно использовать px. Мы недавно начали делать приложения для мобильных с помощью Cordova, используем Framework7 — у него в стилях тоже всё через px, хотя вёрстка для мобильных.

Но для адаптивных сайтов это тоже не жёсткое правило. Если переход на em затруднителен, а адаптив не требует пропорционального уменьшения всего текста, можно обойтись и px. Вопрос в том, насколько сайт велик и как он разрастётся в будущем.

Плюс, никто не мешает использовать частично em, частично px. Элементы, требующие точных размеров, определённых в px, можно в медиазапросах указать отдельным блоком css. Безграничный простор для творчества, в общем :)

Вы уж либо пишите всё на нативном js, либо на jQuery, зачем перемешивать $ и querySelectorAll?
Про проход по элементам в цикле в такой задаче я вообще молчу.
Попробуйте так:

var $links = $('.category a');

$links.on('mouseover', function(){
  $(this).closest('.category').find($links).css('background','url(/image/ico-catalog-bgr.png) repeat-x');
});

$links.on('mouseout', function(){
  $(this).closest('.category').find($links).css('background','');
});

Недавно делали адаптивный сайт, всю голову себе сломал, почему так происходит. В итоге эта проблема решалась через background-size: 99% и всякие такие извращения. Ещё, вроде, помогало создание svg-файлов, у которых края самой фигуры не упираются вплотную в края файла. Но до конца проблема так и не решилась.

UPDATE
Кажется, я нашёл ответ на вопрос. Чтобы избавиться от краевых артефактов в Firefox, нужно включить аппаратное ускорение для отображения элемента. Для этого можно использовать, например, 3d-трансформации. Т.е. просто на элементе пропишите transform: translate3d(0,0,0). Мне помогло.

> но теперь у меня есть несколько одинаковый #item
Так не должно быть, id элемента должен быть уникальным и не повторяться у других элементов страницы.

Вам как раз нужно задать уникальные id всем элементам и обратиться к нужному по id, чтобы удалить класс именно у него. А чтобы навесить одинаковые стили, используйте класс item, например.
Пример:

<div id="item1" class="item action"></div>
<div id="item2" class="item action"></div>
<div id="item3" class="item action"></div>

И удаление класса у нужного элемента:
$("#item3").removeClass("action");

У меня свой подход к именованию классов, который чаще всего сводится к префиксам:
lt_ — высший уровень разметки, типа контейнеров для шапки, подвала, сайдбара, основного контента, от layout
b_ — блок или элемент блока (в случае, когда элемент, пишу b_названиеблока_названиеэлемента, типа b_item_cnt или b_item_img)
m_ — модификатор, для навешивания дополнительных стилей на блоки или их элементы

На малых и средних проектах этого за глаза хватает. Вообще из всех рассмотренных методологий понравилась больше всего MCSS, но мне обычно такая строгость разделения слоёв не требуется.

Отличная библиотека

Чтобы не копипастить, сделаю вот так.

Я правильно понимаю, что вам нужно что-то такое?
jsfiddle.net/egzpqoky

Значит, у вас блок, которому вы прописываете cover, скорее всего не растянут на всю ширину экрана. У меня никогда не было проблем с cover. Правда, caniuse.com/#search=background-size во вкладке issues говорит про баги cover на iOS, может быть поэтому.

Достаточно неплох вот этот скрипт, часто его использую: igor10k.github.io/ikSelect
Он легко стилизуется и хорошо дружит с кастомными скроллами, например, этим: manos.malihu.gr/jquery-custom-content-scroller
К тому же, у него есть режим отображения, аналогичного нативному, поверх всех элементов (т.е. если селект внутри контейнера с overflow: hidden, его всплывашка не обрежется).

Но это если у вас на сайте используется jQuery, конечно. Иначе придётся искать другие варианты.

Стили внутри head, скрипты по возможности в конце body.

Объясню, почему: стили нам нужно загрузить раньше, чем весь остальной DOM, чтобы сразу отобразить все элементы правильно.

А скрипты не дают загрузиться остальным элементам страницы, пока не загрузятся сами. Если браузер натыкается на скрипт, он прекращает загрузку DOM до тех пор, пока не выполнит скрипт. Поэтому скрипты по возможности лучше засовывать вниз — тогда страница отобразится на экране раньше, визуально загрузка будет быстрее.

Никакого "в среднем" нет, файлов должно быть как можно меньше. Меньше файлов — меньше запросов к серверу. Поэтому стоит использовать или какой-нибудь упаковщик стилей-скриптов, который их минимизирует и сливает в один файл, или AMD-загрузчик, вроде RequireJS или чего-то такого.

jQuery тоже лучше подключать внизу, по описанным мною выше причинам. Но тогда нельзя будет писать всякие onClick="$('.blablabla').hide()", как многие часто делают. Впрочем, так всё равно лучше не делать.

Чтобы пропорционально регулировать высоту, придётся использовать либо те же vw и vh, либо padding-bottom в процентах, например так:
jsfiddle.net/yyc7vk0b

Только учитывайте, что vw и vh поддерживаются не всеми браузерами.