obivankenoby: Старайтесь работать по стандарту. Если нужна более гибкая сетка, используйте большее количество колонок, но от сетки отходить нежелательно.
123qwe: Вы понимаете, что однотипных блоков может быть много, и они могут чем-то отличаться? Мыслите масштабно.
Создаём базовый класс, и описываем в нём оформление. Этот класс мы будем использовать многократно, и его стили больше не трогаем. Но в зависимости от контекста положение и размеры этого блока могут быть различными. В таком случае добавляем ему класс, описывающий его как элемент блока, и через этот класс позиционируем. В зависимости от родителя эти свойства могут быть различными. Модификатор нужен для того, чтоб заранее описать несколько вариантов оформления, и использовать нужный.
123qwe: Классы .catalog__gallery и .gallery задают разные свойства. А .gallery--alt и призван переопределить некоторые свойства или дополнить. Но вообще, да правильней будет .catalog__gallery поместить в конец, пример был написан для понимания сути.
Евгений Стек: А как по-твоему должен выглядеть дизайн "с задуманным" параллаксом? Единственное, что нужно от дизайнера, это изображения не обрезанные впритык. И то, если планируются смещения не в направлении скролла.
thehighhomie: Какие критерии? Обязанность верстальщика - оптимизация изображений для быстрой загрузки (впрочем, это давно автоматом делают плагины gulp). Обработка и подгонка изображений под размеры макета - естественно, обязанность дизайнера.
Umid: prefix free ни разу не пользовался, и слышу о нём впервые. А autoprefixer - уже общепринятое решение.
В качестве "спасибо" здесь есть кнопка "отметить решением"
Umid: В css3 ввели новый синтаксис, таким образом разделяющий псевдоклассы и псевдоэлементы. При этом старый синтаксис работает, и с технической точки зрения разницы между ними нет.
Расул Гитинов: Кстати, поддержу Михаил Чирский, то, что вы пытаетесь сделать, выглядит довольно странно, и вероятно, есть более правильный метод реализации вашей задумки.