7GIT

Плагин не нужен.
Все что вам нужно, это перед и после блока CSS свойств, которые вы хотите сворачивать или разворачивать написать два комментария -
/*#region*/ и /*#endregion*/

Например:

/*#regoin*/
.declaration1 { ... }
.declaration2 { ... }
/*#endregion*/

также поддерживается вложенность регионов друг в друга:

/*#regoin*/
.declaration1 { ... }
.declaration2 { ... }
.declaration3 { ... }

/*#regoin*/
.declaration1 { ... }
.declaration2 { ... }
.declaration3 { ... }
/*#endregion*/

.declaration1 { ... }
.declaration2 { ... }
.declaration3 { ... }
/*#endregion*/

Вот скрин, как это работает у меня

Правильно ли я понимаю, тег устарел, однако использовать его можно без атрибутов?

Да.

Можно ли использовать тег font вместо span? )))

Нет.

Инклудим файл с переменной:

@@include('./parts/modules/navbar/navbar.html', {
    "page": "page1",
})

Условия в navbar.html:

@@if (page === 'page1') {
    <span>Navbar for page 1</span>
}
@@if (page === 'page2') {
    <span>Navbar for page 2</span>
}

Переменную page и ее значения можете менять как угодно.

autoprefixer. да. он и в обратную сторону работает. т.е. удаляет лишние префиксы, если задать в конфиге фильтры на новые браузеры

Насколько правильно, если Layout__rowHeader вынести из layout.css в header.css?
Layout__row Layout__rowHeader

— Ни на сколько. Если Layout__rowHeader «ближе» по стилизации к Header, его лучше вообще удалить, а стили перенести в header.css

Вообще, разделить на слои всё, это есть хорошо?

Хорошо, но если композиция действительно увеличивает переиспользуемость, уменьшая связанность между компонентами.

Насколько правильно так верстать: https://codepen.io/git2ss/full/jOMwKWz

От БЭМа тут только классы «через чёрточку»:
1) Header__row, Body__row и Footer__row объявлены вне своих блоков (элементы не должны существовать за пределами блока)

<div class="layout">

  <div class="layout__row header">
    <div class="header__cell">
      Пусть это HEADER
    </div>
  </div>

  <div class="layout__row navbar">
    <div class="navbar__cell">
      А это пусть NAVBAR
    </div>
  </div>

  <!-- variant 1 -->
  <div class="layout__row">
    <div class="layout__container">
      <main class="layout__col layout__col_main">
        main
      </main>
      <aside class="layout__col layout__col_side">
        side
      </aside>
    </div>
  </div>

  <!-- variant 2 -->
  <div class="layout__row">
    <div class="layout__container">
      <main class="layout__main">
        main
      </main>
      <aside class="layout__side">
        side
      </aside>
    </div>
  </div>

  <div class="layout__row footer">
    <div class="footer__cell">
      Это FOOTER
    </div>
  </div>

</div>

Но никто не написал почему крупные компании его не используют. Отвечу - потому что там правят балом маркетологи. Которые как последние с*чки цепляются даже за 0.1% прибыли. И др*чат своих техлидов чтоб они как погонщики гоняли своих прогеров, а те упарывались на флексах, флоатах ради этой самой поддержки отсталых компов, людей, нищебродов... зато на конфах потом поют о том ой какое зло то и это... А у самих интерфейс тупит (привет яндекс метрика с ее прелоадером и скелетоном - что за псих это сделал - бесит ждать типа ща все загрузится)
Как то так. А по факту быстродействия - ну да там наверно и js бандл на 2 мегабайта тянется, который гзипом 500 килобайт весит, а потом распаковывается, выполняется... а вы говорите про то что css виноват. Виной всегда человеческий фактор. Врядли calc замедлит страницу. Это проверить легко - создавайте макет с 1000 калькуляций - и проверьте свои догадки

Как вариант, использовать ngrok — он позволяет расшарить localhost в интернет.

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

К сожалению, еще не ушло поколение старых браузеров и IE, где либо старые спецификации, либо совсем не поддерживаются гриды.

PS. grid-gap устарел, теперь используется просто gap, который, кстати, работает и с flex-элементами тоже!

https://caniuse.com/?search=grid - 95.86%

Практически все, что можно сделать на флексах, можно сделать на гридах. Я такого не встречал. Но, многие вещи, которые легко решаются на гридах, на флексах ты упоришься делать, а делая адаптив упоришься на каждом брейкпоинте. Если бы во флексах была поддержка gap изначально, то флексы были бы офигенными. Но это свойство появилось недавно, и комфортно его использовать можно будет очень нескоро. Повторю, у гридов поддержка браузерами уже 95.86%.

Во первых поддержка браузерами. Во вторых оптимальность. Grid может то, что не может flex, либо может с кучей лишних оберток, и именно в таких сложных сетках стоит его применять. Там, где можно обойтись block или flex, не нужны гриды.

Float нужен для обтекания текстом картинки. На нем делали сетки во времена ie9 и ранее.

Calc может перенести вычисления из js в css. Либо высчитать динамическое значение. Сложно представить ситуацию где calc лишний, calc(100%) разве что.

Большинство задач можно решить на флексах. Гриды - переизбыток.
По личному небольшому опыту, могу сказать, что гриды надобятся в 1 на каждые 50 проектов.

Ctrl + Shift + P

https://code.visualstudio.com/docs/languages/ident...

Вы пытаетесь выполнить console.log после выхода из функции.
Вам следует обернуть в console.log вызов самой функции.

console.log('START')
OPTcompileSCSS()
console.log('END')

Ну и скорее всего вы хотите замерить время выполнения функции, используйте для этого console.time(label) и console.timeEnd(label)

console.time('OPTcompileSCSS')
OPTcompileSCSS()
console.timeEnd('OPTcompileSCSS')

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

/** BEGIN [@Media] **/
@media (max-width: 319px) {
  .cell {
    padding: 0 8px;
  }
  .cell-es {
    display: none;
  }
}

@mediagenia  (max-width: 543px) {
  .cell {
    padding: 0 16px;
  }
  .cell-s {
    display: none;
  }
}

Можно сделать так и тогда не нужно будет присваивать два класса что бы скрыть элемент на двух размерах