CSS, SASS, BEM и препроцессоры презентация

CSS, BEM и препроцессоры

01.
BEM
02.
SASS/SCSS, Less
03.
PostCSS
04.
CSS Custom Properties

BEM
Блок__элемент_модификатор

Блок
Логически и функционально независимый компонент страницы.

Свободное перемещение
Блоки можно перемещать в пределах одной страницы и разных проектов. Независимость блока позволяет изменять его положение на странице и обеспечивает корректную работу и внешний вид.

Повторное использование
В интерфейсе может одновременно присутствовать несколько экземпляров одного и того же блока.

Элемент
Составная часть блока, которая не может использоваться в отрыве от него. Элементы не существуют вне блока. Каждый элемент может принадлежать только одному блоку.

Модификатор
БЭМ-сущность, определяющая внешний вид блока или элемента.
Использование модификаторов опционально, количество — не ограничено. Блоку или элементу нельзя одновременно присвоить разные значения модификатора.

Пример DOM-дерева
Submit class="lang-switcher">
en
ru
©CompanyName, 2021

SASS/SCSS, Less

SASS/SCSS Nesting
SASS - это метаязык на основе CSS, предназначенный для увеличения уровня абстракции CSS-кода и упрощения файлов каскадных таблиц стилей. Имеет два синтаксиса SASS и SCSS

SASS/SCSS Миксины
Миксины (часто используется название примеси) позволяют определить стили, которые могут быть использованы повторно в любом месте документа без необходимости прибегать к несемантическим классам вроде .flex-column. Миксины также могут содержать целые CSS правила или что-либо другое, разрешённое в Sass документе. Они даже могут принимать аргументы, что позволяет создавать большое разнообразие стилей при помощи небольшого количества миксинов.

SASS/SCSS Переменные

PostCSS

PostCSS
Инструмент для автоматизации рутинных операции в CSS, с помощью плагинов написанных на JavaScript.

PostCSS популярные плагины
autoprefixer – автоматически добавляет вендорные префиксы в соответствии с требованиями конфигурации
postcss-preset-env - преобразует современный CSS в то, что может понять большинство браузеров, определяя полифиллы, которые необходимы, на основе целевых браузеров или сред выполнения
postcss-nested - плагин для развертывания вложенных правил, аналогично Sass nesting
postcss-import - добавляет поддержку @import, для подключения локальных файлов при сборке проекта
postcss-flexbugs-fixes - исправляет известные баги при использовании flex
postcss-animation - позволяет использовать отдельные анимации из библиотеки animate.css без подключения библиотеки целиком
postcss-sort-media-queries - сортирует медиа выражения в соответствии с требованиями mobile first или desktop first
cssnano – оптимизирует размер CSS файла

CSS Custom Properties

CSS Custom Properties примеры использования
Объявление и использование
Глобальные переменные
Значение по умолчанию
Конкатенация строк

CSS Custom Properties примеры использования
Смена цвет кнопки при наведении мышью
Можно использовать в вычислениях с использованием calc
Использование переменных в SVG

CSS Custom Properties доступ из JS
Определяем переменную и используем ее в СSS
Получений значения переменной из JS и изменение

CSS Custom Properties поддержка

Необходимо выполнить
Найти информацию и ознакомиться с методологиями: CSS modules, Atomic, OOCSS, SMACSS
Сверстать страницу с использованием BEM и CSS custom properties

Ссылки
BEM
https://ru.bem.info/methodology/
SASS документация
https://sass-lang.com/
https://sass-scss.ru/
Less
http://lesscss.org/
PostCSS
https://postcss.org/
https://www.postcss.parts/