Сергей delphinpro

самое простое - линейный градиент на общий блок

Вы не усмотрели самого главного:


Чтобы оценить, смотрим уровень браузерной поддержки здесь https://caniuse.com/#feat=object-fit
и здесь https://caniuse.com/#feat=background-img-opts

И понимаем, что надежнее вставить картинку фоном, нежели использовать object-fit на теге img

Css классы вообще не несут никакой семантики. Хоть как обзывайте, всем пофиг. Если вы говорите о "понятности" для программиста/верстальщика, то тут вы правы — мнения разные.
Что такое .title? Заголовок. Какой заголовок? А хз...
А что такое .product-item__title? Это заголовок блока в списке товаров. Very good.

Окей. Но мы же видим в разметке class="title _product-item". А в css мы это видим? Нет. У нас голый класс .title {}, и еще где-то составной есть .title._product-item. Очевидно, что .title используется с другими блоками тоже. Пришел новый человек с задачей поменять поменять цвет тайтлов ну допустим в отзывах. Он откроет страницу, посмотрит в инспектор, увидит что цвет заголовка задан в классе .title, а про .title._product-item он даже не в курсе будет, это на другой странице сайта, в css через 1000 строк. Он просто поменяет цвет в .title. А потом выяснится что заголовки в товарах тоже поменяли цвет. А не надо было.

Короче, ребята, зачем вы ищете и выдумываете разную хрень? Всё уже придумано до вас — БЭМ. И не дураки это придумывали, а люди с большим опытом верстки и поддержки проектов разного уровня. А претензии типа "мне не нравятся длинные названия классов" — ну право же, детский сад, надо взрослеть.

Ну и можно слегка поэкспериментировать, объединив SMACSS с BEM.
Оставить уровни base и layout. Оставить уровень modules — по сути это будут БЭМ-блоки. Стейты выкинуть — состояния блока лучше в нем самом описывать. Темы — по желанию.

если не использовать SASS - а это зачастую не используется, так как работаю часто с готовыми проектами.

Если приходится лезть в готовый проект, то стоит изучить его и придерживаться стиля заданного автором. Если там нет никакого стиля, то сам бог велел наговнокодить =)) Ну или отрефакторить, если заказчик готов платить.

Именно эти картинки (иконки) лучше всего загнать в символьный спрайт и вставлять в html особой конструкцией (покажу ниже).

Символьный спрайт — это один svg файл с набором множества символов. Из каждой иконки достается картинка (отбрасывается вся служебная инфа) и добавляется в общий файл тегом symbol. Такой файл-спрайт будет выглядеть примерно так:

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

	<symbol viewBox="0 0 60 60" id="accounting" xmlns="http://www.w3.org/2000/svg">
		<path d="M59 20....."/>
		<path d="M35 32....."/>
		<path d="M38 5h....."/>
	</symbol>

	<symbol viewBox="0 0 60 60" id="archive" xmlns="http://www.w3.org/2000/svg">
		<path d="M59 20....."/>
		<path d="M35 32....."/>
		<path d="M38 5h....."/>
	</symbol>
</svg>

Обратите внимание на идентификаторы символов — по ним будут вставляться иконки в html. Также обратите внимание на отсутствие стилизующих атрибутов и атрибутов style в элементах (path) картинки. Это важно, если вы хотите задавать цвет картинки через css.

Картинка из такого спрайта вставляется в html следующей конструкцией:

<svg class="my-icon">
    <use xlink:href="images/svg-sprite.svg#archive"></use>
</svg>

Здесь указывается путь к картинке и после решетки тот самый идентификатор символа, указанный внутри спрайта.

Теперь вы можете полностью управлять вставленной картинкой стилями:

.my-icon {
  width: 50px;
  height: 50px;
  fill: orange; /* Цвет заливки */
  stroke: blue; /* Цвет обводки */
}

Вы можете задать цвет, равным currentColor, и тогда иконка будет того же цвета, что и свойство color. Это бывает удобно.

.my-icon {
  fill: currentColor; /* Цвет заливки */
}

Примечание. В IE есть небольшие проблемы с этим способом. СВГ-спрайт должен быть вставлен в тело страницы. Рекомендую для устранения проблемы воспользоваться скриптом svg4everybody.

Сетка нужна, в первую очередь, дизайнеру. Чтобы выстроить элементы дизайна ровненько, по феншую, на всех страницах одинаково — блоки на скачут в положениях и размерах.

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

Всё остальное — следствие. Верстальщику становится мало просто классов для описания раскладки макета. Он решает приправить их медиа-запросами, чтобы и базовая адаптивность страницы была что называется "из-коробки". Опять же для упрощения и ускорения своего труда. Потом решает еще что-то добавить, к примеру смещение колонок и т.п.

Так появились типовые сетки, типа бутстрапа. Так как они предназначены для универсального использования, в них сделали возможности для настройки основных параметров — количества колонок, промежутков между ними, ширин контейнеров и т.д.

Потом появились дизайнеры, которые стали рисовать свои макеты "под бутстрап" =) Ничего плохого, это ускоряет (а значит удешевляет) разработку конечного продукта. Но нужно понимать, что дизайн первичен. А сетку можно любую сделать.

Ощущение, что браузер самостоятельно определяет в какую сторону "расширить" контент (увеличивающийся тег параграфа) так, чтобы он был на виду. А из-за флексов возникает визуального ощущение смещения соседнего контента. На самом деле изменяется скролл страницы.

Интересно, что при наличии в области видимости других элементов, такого поведения не наблюдается. https://jsfiddle.net/s9n85rd7/106/

Вряд ли это можно исправить.

про retina-dpi:144dpi слышу впервые. а вот мин-резолюшн это вполне нормальное правило. Используется для подгонки дизайна под разную плотность дисплеев

Флексы так не умеют.
Как вариант, можете попробовать использовать колоночную раскладку.
https://jsfiddle.net/0o3cps48/1/

Да изучите вы уже как устроены шрифты... css-live.ru/css/metriki-shrifta-line-height-vertic...
Постоянно об одном и том же спрашивают.

jsfiddle.net/bx8p2gk6

Это чисто верстка. Промаркировать ячейки нужными классами отдельная алгоритмическая задача.

Смотрите ситуацию. Я человек с плохим зрением. В моём браузере стоит увеличенный размер шрифта. Я открываю сайт в котором верстальщик шрифты указал как надо, в rem, а на размеры/отступы забил и задал их в пикселях. Получается уродство:



Потом верстальщик стал умнее, и переписал размеры/отступы в rem'ы и сразу всё стало очень хорошо:



Понятно?

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

Если нет, и джаваскрипт необходим для реализации, то в этом нет абсолютно ничего страшного.

В обоих случаях действует одно и то же правило: не делайте через жопу.

Заворачиваем все в контейнер и делаем что хотим

<div class="layout">
  <main class="layout__main"></main>
  <aside class="layout__aside1"></aside>
  <aside class="layout__aside2"></aside>
</div>

.layout {
  display: flex;

  &__main   { order: 2; width: auto;  flex: 1 0 auto; }
  &__aside1 { order: 1; width: 300px; flex: 0 0 auto; }
  &__aside2 { order: 3; width: 200px; flex: 0 0 auto; }
}

Меняя order, меняем порядок