Алексей Уколов

-.submenu
+.sub-menu

Нужно назначать кликнутой ссылке отдельный класс, который бы обозначал её активность.
Это делает на основании адреса страницы либо бэкенд при генерации шаблона, либо JS, если это SPA.

В представленной песочнице это может выглядеть примерно так:

.nav ul li a.active {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .1em;
}

const $links = document.querySelectorAll('.nav a');

Array.from($links).forEach(($link) => {
  $link.addEventListener('click', (event) => {
    document.querySelector('.nav a.active')?.classList.remove('active');
    event.target.classList.add('active');
  })
});

Это невозможно сделать на чистом CSS.

Надо просто фон вынести в отдельный элемент тоже:

В программировании есть традиция давать сущностям понятные имена.

При этом, что такое "понятное имя", каждая команда договаривается самостоятельно. Кто-то пишет только на грамотном английском, кто-то использует колхозную транслитерацию. Один и тот же элемент на разных проектах может называться по-разному, потому что у них разная предметная область (например, menu/navigation). И так далее.

Дополнительно, существуют и схемы наименования, самая популярная - БЭМ.

С точки зрения же механики, браузеру совершенно всё равно, что написано у вас в классах (за исключением небольших технических ограничений, описанных в спецификации).

text align стоит

У вас точки кривые из-за direction, так зачем же вы пытаетесь их поправить через text-align? Надо direction и костылить у параграфов обратно на правильный.

.our .container .list .item > p {
    direction: ltr;
}

Это без учёта того, что это всё надо переделывать без использования direction вообще.

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

Вы хотите полностью отказаться от React и перейти на более «простые» инструменты? Скорее всего, это невозможно — если используется React, то у вас сложные динамические интерфейсы и никакими автоматическими средствами переписать их на ванильный js не выйдет — только руками. Но это будет требовать знаний куда больших, чем просто использование React.

Если же вы хотите отказаться от JSX, но оставить React, то это автоматизировать уже можно, но задача очень странная.

Само собой, они есть в HTML разметке.
Больше ничем по картинке помочь не можем.

Сходу ничего лучше вот такого не придумалось:

<div class="form-element">
  <input type="text" name="some1" value="Test" disabled />
  <label for="some1">This is label</label>
</div>

.form-element {
  display: flex;
  flex-direction: row;
}

.form-element label {
  order: 1;
}

.form-element input {
  order: 2;
}

.form-element input:disabled + label {
  color: red;
}

Должен бы работать просто селектор input:disabled ~ label, но почему-то не работает.

Есть множество дополнительных псевдоклассов, которые можно использовать. Например, :first-child.

Путь нужно указывать относительно веб-сервера, а не относительно файла, в который вы импортируете.

https://doka.guide/a11y/
https://inclusive-components.design/

Куда «экранировать»? Зачем «экранировать»? Вы хотите, чтобы стиль магически применялся только к лежащей рядом с ней кнопке? Так не работает. Используйте классы или идентификаторы, если не хотите инлайново писать. Ну или какой-то сложный селектор. Короче, в стиле должно быть явно указано какую button вы имеете в виду от корня документа.

Чтобы что-то сделать другим цветом в HTML, это что-то должно быть обёрнуто в какой-то тег (в данном случае идеально подойдёт <span>). Затем к этому тегу можно применить соответствующие правила CSS, либо напрямую в атрибут style, либо через отдельную таблицу стилей.
Ну и, разумеется, раз у вас обычный текст заменится на html, то использовать innerText уже будет нельзя.

чтобы данные из devtool сразу вносились бы в файл.scss

Для этого нужно настроить Source Maps и Workspace.

input [type="checkbox"] - "все элементы с type checkbox, лежащие внутри input".
input[type="checkbox"] - "все input с type checkbox".