Как лучше всего сверстать такие блоки?

Sergey Semenov,

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

Почему оно должно куда-то полететь?
И кто сказал, что на мобилках оно не перестраивается?

Как называется плагин в гугл хроме который позволяет записывать все изменения css в файл?

Dev Tools позволяют делать это без плагинов.

На вкладке Filesystem, нажать + и выбрать корневую папку.
После этого манипуляции в Devtools будут вноситься в исходники.

Или livestyle.io

Как правильно прописать в less?

rootnoroot, уберите обертку menu-topmenuua-container, не ясно зачем он нужен, стили пишите от .topmenu, а не от .nav
Если от .nav, то через & > ul
Иначе у вас выбирались все первые li внутри любого из ul, а не только первого уровня.

Сначала нужно решить задачу на css и правильно сформировать селектор. А потом можно перевести на less. Если не получается в уме, пишите в коде.

В идеале хорошо бы сократить вложенность, благо у внутренних элементов есть классы.

Как правильно прописать в less?

rootnoroot, да мне бы тоже понять что именно вас не устраивает в вашем коде.
У поля CSS на codepen есть шестереночка, если её нажать, будут настройки, в том числе и less

Как правильно прописать в less?

Сделайте песочницу с видимой проблемой на codepen.io
Судя по коду оно должно нормально компилироваться.

Плюс песочницы в том, что пока делаете обычно становится понятно в чем дело. Например, перебивается другими стилями.

Гугл хром как отключить запрос на разрешение вставки стилей когда вставляешь их в inspector-stylesheet?

Оно вроде только один раз спрашивает.

https://stackoverflow.com/questions/77587864/disab...

Как сделать рамку вокруг сайта с помощью css?

Высота всего сайта точно 200?

Как наложить друг на друга два элемента с ::before?

derasoft, всё получится. Приходите ещё.

Как наложить друг на друга два элемента с ::before?

derasoft, всё страньше и страньше ©️

У самой формы псевдиков нет чтоль?

Как сделать рамку вокруг сайта с помощью css?

Покажите, что именно у вас не получилось в песочнице на codepen.io или jsfiddle.net или типа того.

При сборке проекта GULP плодится вот эта ошибка, как понять какой плагин устарел?

xxvxx, замените пакет на современный gulp-stacksvg. Символьные спрайты устарели.
svgmin оставьте.

svg4everybody давно не нужен, если только вы не поддерживаете ие.

При сборке проекта GULP плодится вот эта ошибка, как понять какой плагин устарел?

А если удалить эту конкретную свгшку, то соберется?
Я бы попробовала выяснить чем она отличается от всех остальных.
Например, внутри на самом деле растр.

Почему нет нормальной работы с svg в css?

pixal, ну и ещё один вариант это использование кастомных свойств. Принцип аналогичный.

Почему нет нормальной работы с svg в css?

pixal,

<svg>
  <circle fill="currentColor">
</svg>

svg {
  color: red;
  
&:hover {
    color: green;
  }
}

Естественно, свойство color наследуется, так что выбирайте селектор как удобно.

Что не так с safari?

Я бы задала для инпута display в явном виде.

Что не так с safari?

Это пока appearance: none; не прикрутишь. С ним он становится как спанчик.

Как сделать такую анимацию при скролле?

Удобно градиентом.

Как задать border на всю ширину контейнера?

Налево псевдоэлемент. Направо тень от него.
Так точно не будет полосы прокрутки.

Как сделать так, чтобы имя было под id?

subgrid или js

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

Владислав Андреев, уже можно subgrid, если устраивает поддержка.

Если нет, то переделайте разметку с ul на dl и обычным гридом. Всё будет ровно и семантично.