WapSter

Зависит от размера сайта. Если стили весят 1мб+ то уже стоит задуматься о разделении. А иначе это особого смысла не имеет. Для spa бандлы весят и более 2мб, ничего как то живем)

Открыть devtools и посмотреть свойства?

transition: opacity .2s ease,visibility .2s ease,transform .2s ease,-webkit-transform .2s ease;

id не могут начинаться с цифры. Должен быть общий родитель иначе теряется контекст.

* {
    box-sizing: border-box;
}

Используя верную разметку браузеры сами подбирают, что им показывать в режиме для чтения. А вот статья для более детального углубления в это дело.

let f = arg => alert(++arg)

.popup__conversion__inner {
   background-color: #fff;
}

sourcemap - в него записываются исходники верстки или js. Браузер читает этот файл и говорит где данный стиль в исходниках (грубо говоря)

a.style.color = 'red';

<picture>
 <source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
 <img src="mdn-logo-narrow.png" alt="MDN">
</picture>

Убери вот эту шляпу type="text\css"

https://swiperjs.com/

Нет на css этого сделать нельзя, да и ненужно когда для этих целей есть js.

body {

  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  
}

section {
  max-width: 600px;
  width: 100%;
  background: red;
  min-height: 200px;
}

<p style="color: green;">text</p>

lazy load + низковесный плейсхолдер

localStorage