Сергей delphinpro

О, мой любимый холиварчик! =))

Начнем с indent vs brackets. Код с отступами лаконичен, по-своему красив, но обладает фатальным недостатком — его нельзя просто так взять и скопипастить из одного места в другое. Отступы обязательно нарушатся, IDE не поймёт и всё развалится. Нужно вручную поправлять, чтобы все встало на свои места. Также в процессе рефакторинга нарушаются отступы и появляется геморр. Второй серьёзный недостаток — это несовместимость с native css. Нельзя взять кусок css кода из интернетов и вставить в свой файл, его нужно вручную (или онлайн конвертером) переформатировать под нужный синтаксис. Всё это лишние телодвижения, лишние сложности, трата времени. Поэтому только скобки. Благо скобочный синтаксис поддерживается во всех трех препроцессорах.

В пункте 3 вы ерунду написали. Никто в серьезном проекте не будет подключать браузерный компилятор стилей. Даже при использовании less стили все равно обрабатываются заранее и на продакшн выкладывается готовый css файл.
Так что это преимущество less не стоит брать во внимание от слова "вообще".

[Написанное в следующем абзаце, исключительно моё мнение, а не общепризнанные факты]
Почему же sass выигрывает? Во-первых, это достаточно мощный препроцессор, с огромным количеством возможностей. Во-вторых, и я думаю, это главное, он единственный, компилятор которого написан на "С" -> скорость работы. Другие два написаны на javascript. И в-третьих, исторически так сложилось. Стайлус крутой препроцессор, но он появился много позже остальных и возможно, еще не успел набрать популярность.

В свою очередь у scss есть свои серьёзные недостатки.
Первый — невозможно в scss/sass файл импортировать обычный css, он не будет включен файл, а будет заменен css-импортом. В других препроцессорах имеются специальные синтаксические конструкции для этого.
Второй — отсутствие резолвинга путей, что другими так же предоставляется "из коробки". Приходится извращаться с прописыванием путей к картинкам. Проблема нивелируется при использовании вэбпака, но ведь не всегда он используется.

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

Т.е. это все просчитывается заранее. Как?

Элементарно:

примерно так:

Выкинуть нафиг это унылое говно на радио-инпутах и взять готовый пример с сайта слика kenwheeler.github.io/slick (там есть с автоплеем дёмка)
Потом достилизовать как вам нужно.

одинаковые по высоте пилим флексами
левый и верхний бордеры имитируем псевдоэлементами

собственно самое сложное сделать блюр по внешней кромке картинки, но с этим как раз у вас проблемы нет =))
Сейчас попробую накидать примерчик

вот это слайдер (slick 2x2)
А картинка справа - отдельная превьюшка.
превью меняем по клику на слайд и по событию смены слайдов.
стрелки выносим отдельным кодом и подключаем к слику.

ну и заморочки с двумя слайдерами лишнее. Просто меняем картинку и всё. ну максимум можно заморочится с fade-анимацией на картинке (плавно скрыть, удалить, создать новую, плавно показать.)

как-то так

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


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

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

ionden.com/a/plugins/ion.rangeSlider/index.html

Буду краток: jsfiddle.net/e2x8fd4L

Этот тег предназначен для вывода контактной информации в конце статьи. Например контакт с автором. В принципе, почтовый адрес может быть контактной информацией, но не всегда. Если у вас несколько статей на странице, размеченных тегом article, вы можете для каждой задать контактную информацию. Если разметки article нет, то address должен содержать контактную информацию всего документа (body), тут я хз, наверное подойдет инфа о владельце сайта (организации).

Для вывода именно почтовых адресов, не являющихся контактной информацией, воспользуйтесь другими тегами — div или p.

Откройте адрес в браузере https://fonts.googleapis.com/css?family=Exo+2:500,...
Скопируйте содержимое себе в файл
Добавьте font-display
Импорт уберите

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

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

Например так:

1. Это должна быть векторная картинка
2. Вешать на общий фон карточки совершенно неправильно.

Остается только один из ваших вариантов — псевдоэлемент.
Вариантик прямо скажем, в данном случае так себе.

Наиболее верный подход — вставка отдельного элемента с отдельным классом. Что это будет, div, img или svg не суть важно. В любом случае вы дадите ему роль "для визуального представления"

role="presentation"

что исключит элемент из дерева доступности.

Я бы собрал svg-спрайт из всех иконок и вставлял бы посредством use.

Именно эти картинки (иконки) лучше всего загнать в символьный спрайт и вставлять в 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.