teotlu

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

Или background-size: 100% auto;

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

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

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

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

Вам нужно что-нибудь такое?

Мне нравится вот этот.
Переход на слайд с нужным номером включается триггером события to.owl.carousel с нужными параметрами.

Можно как-то так.
Цикл for в этом коде инициирует предзагрузку изображений (но не откладывает появление первого изображения до загрузки всех изображений, этот вариант мне показался наилучшим).

Вы уж либо пишите всё на нативном 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, но мне обычно такая строгость разделения слоёв не требуется.

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

Зачем вам такое? Оно выглядит ужасно.
А сделать проще всего будет, как мне кажется, с помощью анимаций CSS и небольшого скрипта js, который задаёт им случайные значения.

На jQuery сделать, конечно, можно. На нём много чего можно сделать.
Но движок анимаций в jQuery оставляет желать лучшего, тогда неплохо бы использовать ещё velocity.js. Или, как я написал выше, анимации CSS.

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

Я бы вообще использовал для таких задач какой-нибудь фреймворк для работы с канвасом, типа LibCanvas, где уже предусмотрены такие моменты, буферизация и т.д.

Вам не нужна совместимость со всеми браузерами. Netscape уж точно не нужен :-P

Мне очень помогло ежедневное чтение статей по заданной теме с хабра и прочих ресурсов такого типа. И гугл. Просто море гугла. Не знаешь как что-то сделать — гугл. Знаешь, но считаешь, что не оптимально — гугл. Сделал, но работает не везде — гугл. Главное правильно подбирать запросы, ответы не всегда лежат на поверхности, но они почти всегда есть.

Сразу нужно узнать про такую вещь как css-reset, дабы нивелировать различия браузеров. Очень помогает. Кроме того, я бы прочитал все статьи с html-book.ru, а также про все теги и CSS-свойства (по возможности), ставя в приоритет наиболее популярные.

Можно заморочиться с методологией названий стилей, по типу БЭМ или MCSS, чтобы избежать проблем и путаницы (а они будут) в своих стилях.

И самое главное — нужно просто постоянно верстать. Можно проходить какие-нибудь уроки или ставить себе самому задачи. Если повезёт, можно просто попасть в неплохую фирму и развиваться там. В идеале в фирме должен быть наставник, который поможет-подскажет.

А в какой-то момент, набравшись определённого опыта, начинаешь без проблем решать любую поставленную задачу, потому что уже безошибочно разбираешь в уме страницу на более мелкие блоки и сразу видишь, что и как можно сделать. Вариантов решения одной и той же задачи зачастую очень много. И чем дальше, тем больше, потому что старые браузеры постепенно отмирают, а новые, кто-то медленнее, кто-то быстрее, но стараются соблюдать спецификацию.

Ещё при вёрстке очень неплохо бы использовать специальный сайт, который расскажет, что и где поддерживается. Очень помогает и очищает код от всяких лишних вендорных префиксов, которые в уроках и на форумах любят иногда писать в диких количествах, в том числе и несуществующие.

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