[Из песочницы] Atomizer vs Minimalist Notation (MN)

Скрипты и советы | 12 июля 2020 1 266

Уроки CSS на Хабрахабре, habrahabr.ru, CSS, JavaScript, atomic css, functional css, inline styles 2.0, MN, preprocessor, CSS zero, responsive, adaptive,

Minimalist Notation (MN) (минималистическая нотация) — гибкая адаптивная технология генерации стилей.


Она генерирует стили только для существующих классов разметки html, jsx, и т.п. — благодаря чему отпадает необходимость заботиться о компонентном подходе в CSS, мёртвом CSS коде, и отпадает необходимость писать CSS код вообще.


В ней поддерживаются брейкпоинты (медиа-запросы), селекторы, приоритеты, группировки, необходимые автопрефиксы и полифилы.


Применение этой технологии похоже на использование инлайновых стилей, только с гораздо более выразительным синтаксисом и множеством дополнительных возможностей, поэтому MN можно даже назвать технологией inline styles 2.0.


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


Я разработал MN в 2017 году, и с того момента успел во многом усовершенствовать эту технологию, добавить достаточно пресетов и удобных инструментов для её изучения.


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

Читать дальше →
[Перевод] Гибкая разметка без медиа-запросов: функции min(), max(), clamp()

Перевод «Flexible layouts without media queries» Dannie Vinther С момента появления в браузерах в 2017 году, CSS Grid...

Подробнее
Angular, инкапсулируй это

Добрый день. В данной публикации хочу рассмотреть механизм работы стилей в Angular, поделится своим опытом и виденьем...

Подробнее
Работа с Sass в приложении ASP.NET Core

Sass (Syntactically Awesome Style Sheets) — это скриптовый язык, используемый для создания каскадных таблиц стилей...

Подробнее
[Перевод] Вышел Chrome 118

CSS @scope. Правило @scope at-rule позволяет разработчикам распространять правила стилей на заданный корень описания и...

Подробнее
Заменяй и властвуй — подход SOLID для разработки повторно используемых компонентов в вебе

При разработке любого, даже простого веб-приложения возникает необходимость повторного использования кода. В разных...

Подробнее
Каскадные Таблицы Стилей / Вспомогательные классы

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

Подробнее

💬 Комментарии

В связи с новыми требованиями законодательства РФ (ФЗ-152, ФЗ «О рекламе») и ужесточением контроля со стороны РКН, мы отключили систему комментариев на сайте.

🔒 Важно Теперь мы не собираем и не храним ваши персональные данные — даже если очень захотим.

💡 Хотите обсудить материал?

Присоединяйтесь к нашему Telegram-каналу:

https://t.me/tcsecms

Нажмите кнопку ниже — и вы сразу попадёте в чат с комментариями