SMACSS vs. BEM

Не все фанаты BEM.

Если вы в разработке относительно недавно, то возможно и не слышали о других методологиях.

SMACSS - это еще одна методология, помогающая с организацией кода. Аббревиатура расшифровывается, как Scalable and Modular Architecture for CSS (масштабируемая и модульная архитектура для CSS). 

Базовые категории SMACSS: 
- Base - в эту категорию входят правила, которые определяют внешний вид элементов по умолчанию;
- Layout - категория для стилей, с помощью которых страница разделяется на секции;
- Module - это повторно используемые части дизайна(меню, модальные окна и др.);
- State - категория для стилей состояния;
- Theme - в эту категорию входят стили, отвечающие за внешний вид макетов и модулей;

В статье дается сравнение BEM и SMACSS. А на официальном сайте SMACSS можно почитать онлайн или скачать руководство по использованию данной методологии.

Ссылка на статью

Ссылка на официальный сайт SMACSS

#css

#шпаргалка дня

Ну теперь-то ты точно не забудешь, как работает justify-content…

…пока не придёт время использовать flex-direction: column 🤪

#css #flex #video

🛠 Layoutit CSS Grid — простой и гибкий генератор grid-сеток. Добавляем столбцы, колонки, меняем ширину блоков и код готов. Осталось скопировать и вставить в свой проект.

WebDEV #инструменты #CSS

Панель навигации

Оставляем для вас ниже код, который поможет создать простую навигационную панель на HTML и CSS.

💻Забрать код

#html #css #практика

​Прокачиваем скилл веб-разработки: контейнерные запросы CSS простым языком

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

Недавно в Google Chrome и Safari наконец-то внедрили полную поддержку контейнерных запросов. И вот отличная статья, которая поможет понять, как работают контейнерные запросы и как их использовать.

Всё простым языком и на реальных примерах: https://ishadeed.com/article/container-queries-are-finally-here/

#css #фронтенд

​Новый синтаксис диапазона медиа-запросов CSS

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

Спецификация Media Queries Level 4 представила новый синтаксис для таргетинга на диапазон ширины вьюпорта с использованием обычных математических операторов сравнения — таких, как <, >, и =, которые имеют больше смысла синтаксически при написании меньшего количества кода. Подробнее о них здесь:

https://css-tricks.com/the-new-css-media-query-range-syntax/

#фронтенд #css