Александр Присяжнюк

Почитайте про интерполяцию в Sass

.filters {
    $root: &;

    &--active #{$root}__show {
      display: none;
    }
}

Лично я использую PostCSS плагин Андрея Ситника webp-in-css. Он достаточно легковесный и простой.

По поводу миксина - это калька перенесенная в Sass на уже существующее CSS свойство image-set() для фонов. Но так как поддержка у него процентов 70, то использовать в продакшене его не рекомендуется, то же самое делает и обычное задание фонов через @media (min-resolution: xxxdpi). Для всего этого тоже существует postcss плагин image-set(невероятно!). Собственно существует всё это лишь для того чтобы постоянно не писать самому колбасу кода из медиа выражений.

А ничего что вы лишкам задаёте display: block; и при этом хотите чтобы они отображались с маркером?
По стандарту лишки имеют display: list-item;. Так и ставьте его а не block.

А по поводу display: none; и visibility: hidden; - можно использовать еще вот такую конструкцию, так контент который скрыт визуально будет доступен для читалок.

.cd-tabs li:not(.cd-selected):not(.marker) {
  /*ниже паттерн visually-hidden*/
  position: absolute;
  height: 1px;
  width: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  clip-path: inset(50%);
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  overflow: hidden;
}

.cd-tabs li.cd-selected {
  display: list-item;
}

.marker li {
  display: list-item;
  list-style: disc;
}

Попробуйте(осторожно, ридми на эльфийском):
https://github.com/RedEagleAP/light-boilerplate

И у нас и у них самый популярный Бэм. На этом можно поставить точку, но нет. Еще есть тот же smacss, oocss, но они уже потихоньку отживают своё. Сейчас появились такие штуки как atomic css и itcss что-то типа нового веяния, но до бэма не дотягивают по популярности, пока.

Но бэм тоже потихоньку сбавляет, так как есть ccs in js и еще много всякой всячины, включая сам css, который тоже не стоит на месте.

Но на данный момент Бэм еще оставляет лидерство за собой.

Что-то вроде stylelint с опцией --fix должно решить вашу проблему. См. https://stylelint.io/user-guide/rules для документации по всем правилам stylelint.

Здесь, следующие правила stylelint будут наиболее актуальными:

1. block-opening-brace-newline-before: never-multi-line
   
2. block-opening-brace-newline-after: never-multi-line
   
3. block-closing-brace-newline-before: never-multi-line
   
4. block-closing-brace-newline-after: never-multi-line
   

Соответствующие страницы документации stylelint:

1. Руководство по настройке Stylelint
   
2. VSCode Stylelint
   
3. Переключатель автофикса CLI Stylelint (--fix)
   

Также в VSCode есть расширение stylefmt, оно может форматировать стили по конфигу Stylelint-а.

Вот так вам нужно подключать шрифты:

@font-face {
  font-family: Helvetica;
  src: url(/fonts/Helvetica/HelveticaRegular.woff2) format("woff2");
  src: url(/fonts/Helvetica/HelveticaRegular.woff) format("woff");
  font-style: normal; 
  font-weight: 400;
}
@font-face {
  font-family: Helvetica;
  src: url(/fonts/Helvetica/HelveticaLight.woff2) format("woff2");
  src: url(/fonts/Helvetica/HelveticaLight.woff) format("woff");
  font-style: normal; 
  font-weight: 300;
}
@font-face {
  font-family: Helvetica;
  src: url(/fonts/Helvetica/HelveticaBold.woff2) format("woff2");
  src: url(/fonts/Helvetica/HelveticaBold.woff) format("woff");
  font-style: normal; 
  font-weight: 700;
}

1. Нужно конвертировать из .ttf в веб формат .woff2 и .woff. Сделать это можно здесь:
https://www.fontsquirrel.com/tools/webfont-generator
2. Подключать шрифты нужно вот так:

.block {
  font-family: 'Helvetica', Arial, sans-serif; 
  font-weight: 400; // для regular, 300 для light и 700 для bold
}

3. Не рекомендую оставлять только одну толщину шрифта, вы так хотите сэкономить. НО дизайнеры которые делают шрифты вырисовывают каждое начертание идеально. А если просто в css менять жирность шрифта, выглядеть будет немного по-другому. Слишком это хрупко. Потому делайте так как я описал выше.

<a href="#">Шнеки и&nbsp;комплектующие</a>

Задайте body класс page--inner. И за каскадом переопределяйте стили.

Ну во-первых, нужно поработать над семантикой в html. Сборная div-янка это совсем не круто.
Вот два варианта реализации:
1)

<section class="content">
  <div class="content__text-wrap">
    <h2 class="content__title">Заголовок</h2>
    <p class="content__descr">Блок с текстом</p>
  </div>
</section>

2)

<section class="content">
  <div class="content__text-wrap article">
    <h2 class="article__title">Заголовок</h2>
    <p class="article__descr">Блок с текстом</p>
  </div>
</section>

А по поводу размера шрифта: большой разницы нет, всё зависит от контекста. Не забывайте про модификаторы. Верстать можно и так и сяк и наперекосяк.

Уберите «App\» из пути. Должно получиться вот так:
use Models\Database;

Используйте паттерн visually-hidden:

.visually-hidden {
  /* Удаляем элемент из потока документа */
  position: absolute;
  /* Временное решение для неверно произносимого, размазанного текста */
  white-space: nowrap;
  /* Устанавливаем минимально возможный размер (некоторые скринридеры игнорируют элементы с нулевой высотой и шириной) */
  width: 1px;
  height: 1px;
  /* Скрываем вылезающий за границы контент */
  overflow: hidden;
  /* Сбрасываем любые свойства, которые могут повлиять на размер элемента */
  border: 0;
  padding: 0;
  /* Вырезаем ту часть контента, которая должна отображаться. */
  /* Устаревшее свойство clip для старых браузеров */
  clip: rect(0 0 0 0);
  /* clip-path для новых браузеров. inset(50%) определяет область вставки, которая позволит контенту исчезнуть.  */
  clip-path: inset(50%); 
    /* Похоже, никто до конца не понимает, почему тут margin: -1px. Кроме того, это приводит к проблемам (читай: https://github.com/h5bp/html5-boilerplate/issues/1985). */
  margin: -1px;
}

transform: rotate(180deg)

Адаптив ломается потому что все эти плагины группируют и записывают media в конце вашего файла тем самым перебивая все модификаторы.

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

Казалось бы, вполне резонно выступить против вышеупомянутой технологии по причине ее многословия. Неужели один лишь размер файла может стать достаточной причиной для того, чтобы не записывать медиазапросы таким образом? В конце концов, никому не хочется иметь раздутый CSS-файл для обслуживания своих потребностей. Но нужно считаться с тем простым фактом, что gzip-сжатие, которому должны подвергаться все возможные ресурсы на вашем сервере, сокращает разницу до совершенно ничтожных величин.

Вот еще, почитайте : https://benfrain.com/inline-or-combined-media-quer...