Арсений Матыцин

1. Вешать модификатор для сокрытия изображения хуже, чем не заносить изображения, т.е. если ты пишешь стили для выключенной пикчи, то уже выстрелил себе в ногу.
2. Vue, как логика компонтент→компонент как нельзя кстати вписывается в БЭМ-логику.

Font-face — правило.
Link preload — запрос на предзагрузку ресурса для правила.

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

Изучайтессс... Ресурс рекомендую изучить вдоль и поперек, а еще и желательно понять, что именно изучил.

Лечится display:block\inline-block\flex\inline-flex и т.д.

Повторяющиеся элементы выводятся с помощью циклов, на уровне бэкенда или фронтенда.

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

В php это выглядело бы как-то так:

...
foreach (&items as $item) { ?>
[HTML-тело карточки товара со вставленными параметрами вида $item->title]

Могут быть как прямые выводы на ЯП, так и с помощью шаблонизатора.

Итого, если у тебя проект с бэкендом, или фронтом, которые позволяет рисовать в цикле из базы или файла, используй язык. А если нужно просто 1 раз занести список, то можно это сделать в файле и обратить к генератору статики, например Jekyll.

Верстка на rem-ах производится с вычислением от корня документа, т.е. body, html, а em от родителя. Притом если у родителя нет изменения в размере font-size, то поиск изменения будет подниматься вверх вплоть до корня.

Пример тут.

PS: такой подход позволяет на десктопа указать в html, body{ font-size: 20px, а для таблеток и мобильных html, body{ font-size: 16px и верстка будет пересчитана сама.

Тебе стоит копнуть в обсерверы типа такого и такого. Либо пойти по пути наименьшего сопротивления и заюзать bind в либе jQuery, который умеет ловить события на элементах, которые досоздаются после загрузки DOM. Но это неточно, я несколько лет, как не имел дело с jQuery.

1. Есть JS-фрейморки, которые упрощают жизни в постройке такого, например Vue (в проекте же может быть использован React или Angular).
2. Форма должна иметь id (value) для БД и значение для пользователя (внутри тега option), для адекватного обмена данными и записи связей в БД. В референсе, кстати, эмуляция динамическая, сам selet со значениями скрыт.
3. На уровне данных для JS → объект, на уровне БД → связи один ко многим.

Кстати, так как марки автомобилей заранее известны, то это можно даже не заносить в базу, а хранить просто в объекте в конфигах, но по правде говоря вариант так себе, в базе проще объявления вязать по ID с марками.

https://masonry.desandro.com/

Речь же о графическом редакторе, эдаком визивиге для заданного набора параметров. С ними все просто, рисуются с помощью JS и в нормальном подходе к разработке параметры, которые ты задаешь во всплывающих формах (дизайн не важен, речь о сути элемента интерфейса) сохраняется в объекте, к примеру:

{
    block: {
        borderColor: 'red',
        borderWidth: '15'
....

Который в дальнейшем преобразуется в стили, инлайновые или отдельным файлом, тут как бэк написан.
В редакторах сайтов, таких, как тильда и юкоз (насколько я помню) оно еще и отображается сразу.

Есть подобные редакторы и на WP, например в Unyson-е: принцип тот же, оформление попроще, блоками.

Таких редакторов много, у этого, к примеру, можно сразу посмотреть сконфигурированный объект.

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

Крайне кривая верстка и нежизнеспособная. В ее рамках можно сделать так.

label должен находится после input-а, тогда конструкция селекторов: input:checked + label позволит такое совершить. Либо завернуть текст в span и по то же конструкции, но вместо label обращаться к input:checked + span.

Либо по клику на чекбокс, меняй класс родителя на модификатор с необходимым фоном. Грубо, так:

if (element.checked) {
    parent.classList.remove('classname')
} else {
    parent.classList.add('classname')
}

Fytch ответил про обязательный атрибут верстки.

А я дополню: никто в здравом уме не зумит сайт, для отладки используется дебаггер (f12). А для управления адаптивом включают эмуляцию устройств (там же в дебаггере).

https://developer.mozilla.org/ru/docs/Web/CSS/CSS_...

Лекарство:
1. overflow:hidden;
2. Флексбоксы.

Максим Ленский продемонстировал ответ на вопрос. Маску для картинки: она встраивается в документ и применяется по необходимости.

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

Абсолютное позиционирование.

.border {
  position: relative;
}
.brushes {
  position: absolute;
  left: 100%;
  top: 100%;
  transform: translate(-50%,-50%); 
}

Середина картинки кисточек будет полностью совпадать с углом. Поэтому для достижения подходящей позиции надо играться с этими параметрами.

Вообще-то на CSS можно без проблем такое сделать. По пути наименьшего сопротивления → на гридах с параметром 1fr для шаблона по высоте. На флексбоксах тоже такое можно муткануть, но не так приятно, как на гридах.

А на JS надо брать размер элемента, можно сразу три, чтобы сравнивать и брать больший, а затем присваивать его всем в качестве min-height (иначе при перерасчетах он будет всегда фикс высоту выдавать).

Желательно это все завернуть в функцию, которую вызвать при инициации скрипта И запустить в вотчере события изменения размера окна.

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

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

1. Задать отступ для размещения тени.
2. Использовать отрицательный отступ на те же значения, чтобы не уехала сетка.

1. На выводе почти любой тег порежет лишние пробелы, исключеним будет <pre> к примеру.
2. А на вводе c JS (да и не только), такой вопрос уже был.