Александр

https://github.com/emmetio/brackets-emmet оно?

const lang = 'ru';

for (const key in languagesText[lang]) {
	document.querySelectorAll(`[data-translate="${key}"]`).forEach(element => element.textContent = languagesText[lang][key]);
}

Если все шрифты описаны в em, то достаточно будет поменять размер шрифта на корневом элементе (html/body).

Это делается в два слоя. На первом - картинка, название и вся сопутствующая информация. На втором - кнопки добавления в корзину, поделится и лайк. Второй слой изначально делаете скрытым, рисуете его поверх (position: absolute), скрываете (opacity: 0; visibility: hidden;). При (:focus, :focus-within и :hover) показываете (opacity: 1; visibility: visible;).
Возможно добавляете JS, чтобы узнать, был ли наведен курсор и после убран с карточки (именно в таком порядке), чтобы скрыть второй слой (сделать .blur, если пользователь сфокусирован).

Вы же inline-стили хотите "перебить"

Во-первых, правило 3.8.
Во-вторых:

- var order = document.querySelector('popup_order');
+ var order = document.querySelector('.popup_order');

Посмотрите список самозакрывающихся тэгов.

document.querySelector('#test_id').value
или
document.querySelector('#test_id').selectedIndex
или
document.querySelector('#test_id').selectedOptions

Во-первых, если подключаете скрипт не перед закрытием body, то поместите его туда.
Во-вторых, document.getElementsByClassName возвращает HTMLCollection - массив, который будет автоматически изменять свое содержимое при изменениях на странице. Поэтому, либо берете из него первый элемент, либо используете document.querySelector.

Также, неплохо было бы проверять элементы, прежде чем добавлять им события; вместо onevent использовать element.addEventListener('event', handler);; вместо == использовать ===; вместо style.backgroundColor использовать style.setProperty('background-color', value);.

let headerMain = document.getElementById('header__main');
let headerLogo = document.getElementById('header__logo-img');
let headerMenu = document.getElementById('header__menu');

function applySmallHeader() {
    headerMain.style.height = '80px';
    headerLogo.style.height = '140px';
    headerMenu.style.paddingTop = '0px';
}

function applyNormalHeader() {
    headerMain.style.height = '136px';
    headerLogo.style.height = '170px';
    headerMenu.style.paddingTop = '7px';
}

function onPageScroll() {
    if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
        applySmallHeader();
    } else {
        applyNormalHeader();
    }
}

window.addEventListener('scroll', function () {
    if (window.innerWidth > 992) {
        onPageScroll();
    }
});

window.addEventListener('resize', function () {
    if (window.innerWidth <= 992) {
        applyNormalHeader();
    } else {
        onPageScroll();
    }
});

Для Chrome; для Firefox.

const download = (fileUrl, filename) => {
  fetch(fileUrl)
    .then(response => response.blob())
    .then(data => {
      const tempUrl = URL.createObjectURL(data);
      const link = document.createElement('a');

      link.href = tempUrl;
      link.download = filename;

      link.addEventListener('click', () => {
        setTimeout(() => {
          URL.revokeObjectURL(tempUrl);
        });
      });

      link.click();
    });
};

window.addEventListener('DOMContentLoaded', () => {
  download('MY_URL', 'MY_FILENAME.txt');
});

https://css-tricks.com/styling-cross-browser-compa...

Скрипт перед закрытием body поставьте.

const strings = [
  '<img src="link">1234566 4553342 aaa',
  '<div><img class="super-img" src="https://example.com"/></div>',
  'src="1"',
  '<img src=\'../img.png\'/>'
];
const expression = /img.+?src=(["'])(.+)\1/;

for (const string of strings) {
  const src = (string.match(expression) || [])[2] ?? null;
  console.log(string);
  console.log(src);
}
/*
<img src="link">1234566 4553342 aaa
link

<div><img class="super-img" src="https://example.com"/></div>
https://example.com

src="1"
null

<img src='../img.png'/>
../img.png
*/

Сделал пару примеров. Если захотите писать черным цветом, то можно использовать mix-blend-mode: overlay. Возможно существует более простое/красивое/элегантное решение, но я сейчас не придумаю такое. Можно сделать намного проще, если не будет следующего условия:

чтобы линии начинались с конца второй строки и примыкали ко второй строке

Либо вручную разделять на строки и только последней строке добавлять подчеркивание.