Как сделать форму как на фото?

а тут весело

Группировка нескольких классов с перечислением?

art style, через препроцессор(как в коде написал) работает. Через цсс надо .load.p1, .load.p2 - без пробела, т.к. это не .p1 который находится в .load, а класс, в котором .load.p1, типо вместе.

Группировка нескольких классов с перечислением?

art style, перечисляешь через запятую = группируешь. если тебе надо .load .p1, .load .p2... .load .p666 - для этого есть препроцессоры. Вроде уже и с цсс так можно но препроцессор в любом случае лучше. В нем запись была бы такой:

@for $i from 1 through 6
    .load.p#{$i}  <-- подправил. между .load и .p не должно быть пробела
        свойства:

Если свойств немного то их легко будет вписать сюда. Если их много, то придется и над этим немного поморочиться. А если просто запись в css, то так:
.load .p1, .load .p2 и так далее. Все должно работать. Вообще, желательно при вопросах скидывать свой код с песочницы чтобы было понятно где именно Вы сделали что-то не так.

Почему border-radius округляет не всю область блока и какой лучше элемент использовать?

Может вам поможет карта изображений? Тег map.

Не получается применить hover?

Если я правильно понял то как это должно выглядеть и то, как решается задача с увеличением картинки при наведении так, чтобы она не выходила за рамки контейнера, то вот: https://jsfiddle.net/r146nLhd/3/
Высоту картинки относительно блока(или самого блока), ее размер при увеличении и прочее уже на свое усмотрение.

Как называются эти иконки и где их настроить?

Илья, а откуда вы узнали об этом? в смысле, что я должен был изучать чтобы наткнуться на это самостоятельно?
и эти развертки с иконками - все от emmet? просто, на свойстве(ключике) написано emmet, а на методе только пояснение к нему. Развертка метода тоже от emmet или от редактора? Что б знать что искать. А то искать я могу, мягко говоря, не быстро.

Как убрать отступы между элементами таблицы?

Василий Хрягин, я когда-то похожую штуку делал, но там надо было еще убрать рамки самой таблицы. Т.е. получилось бы что-то вроде "крестиков ноликов", сетка без рамки. Вдруг пригодится - там решается, кажется, с помощью outline цвета фона блока.

Как указать где будет указатель при развертке функции?

Спасибо. Никогда не пользовался сниппетами и по этому не знал куда смотреть.

Как разместить блок под шапкой?

Павел Лебедев, многоходовочка для фарма лайков. тс подсадная утка.

Почему section не равен image?

Bavashi, в том, что ты задаешь background-image картинке, у которой нет фона. Соответственно, с чему ей применять это свойство на само же себя, если оно предназначено для фона? А чтобы управлять именно img аналогично свойству для фона, есть свойство object-fit.
Конечно результат будет одинаковый - без object-fit изображение не масштабируется, как и с background-image для него, потому что фона нет.
p.s. касательно object-fit и background-image я вроде все верно написал, но это не относится к вопросу, потому что img в данном примере у меня занимает всю высоту блока.

Почему section не равен image?

Если изображение по размерам меньше контейнера, то надо его адаптировать к нему свойством object-fit. У вас стоит background-size, но img это не фон.
https://jsfiddle.net/ujxzoer2/7/

Почему список прилип к верху?

попробуй задать картинке vertical-align: middle
https://jsfiddle.net/whL1azt0/9/

Как задать анимацию двум дочерним элементам?

А, т.е. надо было задавать transform контейнеру изображения а не ему, тогда и анимации не "конфликтовали" бы. Спаибо.

Как сделать отступ в теге?

ADvi, У меня html и css разделены на левую и правую секцию. Настраивая что-то в одной, в другой изменения не происходят. Надо было просто сделать настройку для каждого окна. А за отступ в тегах после их разделения enter'ом отвечает опция Editor: Auto indent, которую можно вызвать вписав в ctrl+, "отступ" или "indent".

Как сделать отступ в теге?

Так, как сделать отступ я уже нашел :D Может кто подскажет как сделать чтоб при удалении строки закрывающий тег снова становился рядом с открывающим, как до enter? А то сейчас он так же внизу. Ну и второй вопрос в силе.

Почему есть промежуток между линиями before и after?

в принципе с нижним бордером так и делал, как в описании - менял ее высоту на 1. Можно было и тут догадаться, но не знал про это округление. Спасибо, помогло.
Т.е. если я буду делать подобные эффектики я обязательно должен делать такой "хак"? Чтобы ни у кого такого не было.

Как вернуть старую подсветку тега?

спасибо.

Как указать ссылку на текущий фон?

Рустам Байназаров,
Я пока додумался только до мапа и @each

$button-lighten:(name1: red, name2: blue)
.button
  @each $btn-name, $btn-color in $button-lighten
    &-#{$btn-name}
      background-color: lighten($btn-color, 10%)

Но ваш пример с миксинами в моем случае и удобнее и познавательнее. Спасибо!

Как закрыть мобильное меню при изменении ширины экрана?

Спасибо, хороший ответ. Я бы и сам предпочел js, просто не знаю его.

Как посчитать сумму всех значений в цикле?

Спасибо!