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

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

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

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

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

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

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

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

Технология MN имеет обширную функциональность.

Для многих она является новой, и почти не имеет других первоисточников для изучения, кроме этой статьи, поэтому предупреждаю, что ниже будет МНОГО БУКВ и примеров кода.

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

Лучший способ что-то объяснить это показать наглядные примеры.

Начнём с сравнения Minimalist-Notation с более менее известными функциональностями его первого аналога: Atomizer.

Актуальные на момент написания статьи версии пакетов:

• minimalist-notation 1.5.17 ;
• atomizer 3.6.2 .

Проверить примеры ниже с Atomizer можно будет здесь:
https://pankajparashar-zz.github.io/atomizer-web/

Проверить примеры ниже с MN можно можно будет здесь:
https://viewer.minimalist-notation.org/

Документация по всем предустановленным пресетам MN здесь:
https://styles.minimalist-notation.org/

Atomizer vs MN. Простые примеры##

Atomizer

<div class="D(f) Jc(c) Ai(c) H(100%) Fz(20vh) C(#0f0) C(#F00) Bgc(#f00) M(-10px) P(10px) Pstart(10%) Pos(a)">...</div>

.D\(f\) {  display: flex;}.Jc\(c\) {  justify-content: center;}.Ai\(c\) {  align-items: center;}.H\(100\%\) {  height: 100%;}.Fz\(20vh\) {  font-size: 20vh;}.C\(\#0f0\) {  color: #0f0;}.Bgc\(\#f00\) {  background-color: #f00;}.M\(-10px\) {  margin: -10px;}.P\(10px\) {  padding: 10px;}.Pstart\(10\%\) {  padding-left: 10%;}.Pos\(a\) {  position: absolute;}

На что я обратил внимание в этом примере с Atomizer:

• аббревиатуры аналогичны Emmet;
• имена свойств в нотации представлены как функции, которые всегда именуются аббревиатурами, начинающимися с верхнего регистра;
• значения свойств стилей в нотации обязательно заключаются в скобки;
• аббревиатура Pstart для свойства padding-left для меня неожиданна;
• единицы измерения в нотации нельзя пропускать;
• некоторые значения можно задавать только предустановленными аббревиатурами, такими как, например: f - flex, c - center, однако, например, такая запись работать не будет: D(flex);
• когда я пытаюсь задавать цвет символами верхнего регистра, например, #F00 вместо, #f00, то стили не генерируются, либо генерируется какая-то петрушка

Minimalist-Notation

<div class="dF jcC aiC h f20vh c0F0 bgcF00 m-10 p10 pl10% abs">...</div>

.dF {  display: flex;}.jcC {  justify-content: center;}.aiC {  align-items: center;}.h {  height: 100%;}.f20vh {  font-size: 20vh;}.c0F0 {  color: #0f0;}.bgcF00 {  background-color: #f00;}.m-10 {  margin: -10px;}.p10 {  padding: 10px;}.pl10\% {  padding-left: 10%;}.abs {  position: absolute;}

Отличия:

• для большинства дефолтных обработчиков аббревиатуры аналогичны Emmet, за некоторыми исключениями, которые связаны исторически с моими личными практиками, частотой использования различных свойств стилей.

  
  

  Это связано ещё с тем, что лично я узнал о существовании Emmet и Atomizer только после того, как создал первую версию MN.
  Примеры:
  f вместо fz для свойства font-size ибо размер шрифта Мы задаем очень часто,
  font вместо f для свойства font ибо Мы редко используем его непосредственно,
  abs вместо posA для свойства и значения position: absolute, хотя posA тоже можно использовать;

  
  

• имена свойств в нотации именуются аббревиатурами в нижнем регистре;

  
  

• значения свойств стилей в нотации начинаются с любого символа отличного от латинских букв в нижнем регистре.

  
  

  Кончено и здесь в нотации значения также можно заключать в скобки: d(F) но скобки
  в MN предназначены не для параметризации, а для группировки подстрок нотации, например,
  эти записи аналогичны: p(l10|r15) === pl10 pr15.

  
  

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

  
  

• единицы измерения не являются частью базовой нотации.

  
  

  Необходимость указания единиц измерения зависит от обработчика заданного для соответствующего имени в нотации.

  
  

  Для большинства дефолтных обработчиков указание единиц измерения являются опциональным, например, возможны вариации:
  f14px == f14,
  h100% == h,
  h10px == h10.

  
  

• в MN также имеются предустановленные аббревиатуры для некоторых значений, такие как, например,
  F - flex, C - center хотя Мы можем использовать полные именования.
  Вы имеете возможность использовать вместо, например, этих аббревиатур:
  dF dIB jcC aiC различные вариации именований:
  dFlex dInlineBlock jcCenter aiCenter,
  d_flex d_inline-block jc_center ai_center .
  В большинстве дефолтных обработчиков запись для значений из формата camelCase
  просто трансформируется в формат kebabCase, а нижнии прочерки заменяются на пробелы;

  
  

• для большинства дефолтных обработчиков предусмотрены значения по умолчанию, например, как Мы наблюдаем, для свойства height (h) значение по умолчанию равно 100% .
  Если Мы используем значение: h40 то получим следующее:

  
  

  .h40 {height: 40px}
  

  
  

• Для указания цвета не требуется решетка (#).

  
  

Более того, решетка (#) является служебным символом, необходимым для полноценных селекторов, о которых Вы узнаете ниже.

Если Вы добавите решетку, то получите не то, чего, вероятно, ожидаете:

<div class="c#0F0">...</div>

.c\#0F0#0F0 {color: #000}

В некоторых случаях решетка всё же нужна, например, для свойства outline.
Тогда служебные символы в нотации нужно экранировать:

<div class="ol_thick_double_\#32a1ce">...</div>

.ol_thick_double_\\\#32a1ce {outline: thick double #32a1ce}

В MN для дефолтных обработчиков (c, bc, olc, fill, stroke, bg, bgc, temc, tdc) цвета можно задавать разными вариациями символов об этом подробнее будет ниже.

• обработчики для аббревиатур свойств являются кастомизируемыми и подключаются по умолчанию из библиотеки minimalist-notation/presets/styles.

Вы имеете возможность полностью кастомизировать MN под свои нужды, путем создания собственных обработчиков:

// для свойcтва "padding"mn('p', (params) => {  return {    style: {      padding: (params.num || '0') + (params.unit || 'px'),    },  };});// для свойcтва "padding-left"mn('pl', (params) => {  return {    style: {      paddingLeft: (params.num || '0') + (params.unit || 'px'),    },  };});// для свойcтва "color"mn('c', (params) => {  return !params.negative && {    style: {      color: mn.utils.color(params.value || '0'),    },  };}, '^(([A-Z][a-z][A-Za-z]+):camel|([A-F0-9]+):color):value(.*)?$');

Примеры обработчиков MN можно подсмотреть в репозитории:
https://github.com/mr-amirka/minimalist-notation/presets

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

Примеры немного сложнее

Atomizer vs MN. Флаг !important

Atomizer

<div class="D(f)! C(#0f0)!">...</div>

.D\(f\)\! {  display: flex !important;}.C\(\#0f0\)\! {  color: #0f0 !important;}

Minimalist-Notation

<div class="dF-i c0F0-i">...</div>

.dF-i {  display: flex!important;}.c0F0-i {  color: #0f0!important;}

В MN для установки флага !important не используется символ !, потому-что этот служебный символ уже применяется в нотации для реверсирования подстрок.

Группировки и реверсирование подстрок (!)

Возьмем такую запись:

<div class="cF:hover>.item">...</div>

.cF\:hover\>\.item:hover .item {  color: #fff;}

Если Мы добавим символ ! после :hover, то получим следующее:

<div class="cF:hover!>.item">...</div>

.cF\:hover\!\>\.item .item:hover {  color: #fff;}

Здесь псевдоселектор hover переместился от родительского элемента к дочернему.
Этот приведенный для наглядности способ использования реверсирования в данном случае бесполезен, ибо такого же эффекта Мы можем добиться и другим способом:

<div class="cF>.item:hover">...</div>

.cF\>\.item\:hover .item:hover {  color: #fff;}

Однако реверсирование может оказаться весьма полезным для сокращения записи в комбинации с группировками.

Допустим, что Мы верстаем какой-то простой сайт без шаблонизаторов и без React компонентов возможно, это лендинг.

Мы имеем некоторый список, в котором располагаются одинаковые дочерние элементы:

<ul class="m p dBlock">  <li class="mb5 dBlock">    <a class="c0 c0:hover tdNone p5">...</a>  </li>  <li class="mb5 dBlock">    <a class="c0 c0:hover tdNone p5">...</a>  </li>  <li class="mb5 dBlock">    <a class="c0 c0:hover tdNone p5">...</a>  </li>  ...</ul>

.m {  margin: 0;}.p {  padding: 0;}.dBlock {  display: block;}.mb5 {  margin-bottom: 5px;}.c0,.c0\:hover:hover {  color: #000;}.tdNone {  text-decoration: none;}.p5 {  padding: 5px;}

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

Мы могли бы написать код гораздо короче, и таким образом, чтобы в последующем при необходимости Нам приходилось вносить меньше правок.

Рассмотрим по шагам различные способы.

Вынесем всю нотацию в родительский элемент:

<ul class="m p dBlock mb5>li dBlock>li c0>a c0>a:hover tdNone>a p5>a">  <li>    <a>...</a>  </li>  <li>    <a>...</a>  </li>  <li>    <a>...</a>  </li>  ...</ul>

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

Для примера Мы добавим ещё один уровень списка, который имеет отступ в 10 пикселей слева, а ссылки внутри него имеют подчеркивание и красный цвет.

При наведении курсора на ссылку, она становится зеленой, а при нажатии становится синей.

<ul class="  m p dBlock  mb5>li dBlock>li  p5>a tdNone>1li>1a c0>1li>1a c0>1li>1a:hover  m>ul p>ul dBlock>ul pl10>1li>1ul  tdUnderline>1li>1ul>1li>1a  cRed>1li>1ul>1li>1a  cGreen>1li>1ul>1li>1a:hover  cBlue>1li>1ul>1li>1a:active">  <li>    <a>...</a>  </li>  <li>    <a>...</a>  </li>  <li>    <a>...</a>    <ul>      <li>        <a>...</a>      </li>      ...    </ul>  </li>  ...</ul>

Число перед селектором (1) просто указывавет на строго определенную глубину вложенности элемента.

Кстати, обратите внимание: селекторы с одинаковыми значениями свойств в сгенерированном CSS коде группируются вместе что позволяет минимизировать его объём на выходе.

Думаю, этого для наглядности Нам пока хватит.

Теперь попробуем группировки:

<ul class="  (m|p|dBlock)(|>ul) (mb5|dBlock)>li  p5>a tdNone>1li>1a c0>1li>1a(|:hover)  pl10>1li>1ul  (tdUnderline|cRed)>1li>1ul>1li>1a  cGreen>1li>1ul>1li>1a:hover  cBlue>1li>1ul>1li>1a:active">  <li>    <a>...</a>  </li>  <li>    <a>...</a>  </li>  <li>    <a>...</a>    <ul>      <li>        <a>...</a>      </li>      ...    </ul>  </li>  ...</ul>

Здесь группировки Нам не сильно помогли

Вот теперь попробуем ещё и реверсирование:

<ul class="  (m|p|dBlock)(|>ul)  (mb5|dBlock)>li p5>a  (tdNone|c0(|:hover!))>1li>1a  pl10>1li>1ul  (tdUnderline|c(Red|Green:hover!|Blue:active!))>1li>1ul>1li>1a">  <li>    <a>...</a>  </li>  <li>    <a>...</a>  </li>  <li>    <a>...</a>    <ul>      <li>        <a>...</a>      </li>      ...    </ul>  </li>  ...</ul>

Забавно, не правда ли?

Хорошо. Слегка поиграем с вложенностями и заменим имена псевдоклассов и значений на краткие синонимы:

<ul class="  (m|p|dB)(|>ul)  (mb5|dB)>li  p5>a  (tdN|c0(|:h!))>2a  pl10>2ul  (tdU|c(Red|Green:h!|Blue:a!))>4a">  <li>    <a>...</a>  </li>  <li>    <a>...</a>  </li>  <li>    <a>...</a>    <ul>      <li>        <a>...</a>      </li>      ...    </ul>  </li>  ...</ul>

Всё-таки, для пущей наглядности заменю имена тегов на классы:

<ul class="  ListA  (m|p|dB)(|.ListA)  pl10>2.ListA  (mb5|dB)>.ListA__Item  (p5>|(tdN|c0(|:h!))>2|(tdU|c(Red|Green:h!|Blue:a!))>4).ListA__Link">  <li class="ListA__Item">    <a class="ListA__Link">...</a>  </li>  <li class="ListA__Item">    <a class="ListA__Link">...</a>  </li>  <li class="ListA__Item">    <a class="ListA__Link">...</a>  </li>  <li>    <a class="ListA__Link">...</a>    <ul class="ListA">      <li class="ListA__Item">        <a class="ListA__Link">...</a>      </li>      ...    </ul>  </li>  ...</ul>

Извратились Мы знатно!

Однако, рекомендую, друзья мои, этими группировками сильно не увлекаться!

Здесь у некоторых может возникнуть вопрос, как же Нам решить проблему с
неодноранговастью сгенерированных селекторов? ибо, если Мы захотим кастомизировать
отдельные элементы из этого списка, нам могут помешать грабли перекрывающих стилей.

Ответ:

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

<ul class="  ListA  (m|p|dB)(|.ListA)  (mb5|dB)>.ListA__Item  p5>.ListA__Link  (tdN|c0(|:h!))>.ListA__Link_level1  pl10>.ListA_level2  (tdU|c(Red|Green:h!|Blue:a!))>.ListA__Link_level2  bgF88>.ListA__Item_substyle">  <li class="ListA__Item ListA__Item_level1 ListA__Item_substyle">    <a class="ListA__Link ListA__Link_level1">...</a>  </li>  <li class="ListA__Item ListA__Item_level1">    <a class="ListA__Link ListA__Link_level1">...</a>  </li>  <li class="ListA__Item ListA__Item_level1">    <a class="ListA__Link ListA__Link_level1">...</a>  </li>  <li>    <a class="ListA__Link">...</a>    <ul class="ListA ListA_level2">      <li class="ListA__Item ListA__Item_level2">        <a class="ListA__Link ListA__Link_level2">...</a>      </li>      <li class="ListA__Item ListA__Item_level2 ListA__Item_substyle">        <a class="ListA__Link ListA__Link_level2">...</a>      </li>      ...      ...    </ul>  </li>  ...</ul>

Многие могут заметить, что здесь Мы имеем возможность использовать сложные селекторы, которые потенциально порождают нежелательные сайд-эффекты с перекрытиями стилей.
Да. Это так. И это, отчасти, противоречит самой методологии Atomic CSS.

Тем не менее, есть несколько нюансов:

• Нас никто не принуждает использовать именно такие конструкции;
• Нас никто не ограничивает, и при необходимости Мы можем воспользоваться этими конструкциями;
• Благодаря тому, что весь код как правило вмещается у Нас на одном экране и не разрывается контекст между разметкой и стилями, Нам гораздо проще обнаружить, "где зарыта собака" и исключить возможные грабли с перекрытиями стилей.

Atomizer vs MN. Псевдоклассы и псевдоэлементы

Чисто ради сравнения, рассмотрим доступную в Atomizer возможность использования псевдоклассов и псевдоэлементов:

<div class="Bgc(#fff):h C(blue):a C(#0f0):hover D(n)::b">...</div>

.Bgc\(\#fff\)\:h:hover {  background-color: #fff;}.C\(blue\)\:a:active {  color: blue;}.C\(\#0f0\)\:hover:hover {  color: #0f0;}.D\(n\) {  display: none;}

Мы видим, что Atomizer позволяет юзать как некоторые полные имена псевдоклассов, так и их короткие синонимы.

В документации написано, что можно испозовать псевдоэлементы.

Например: b для ::before

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

Для D(n)::b я ожидал получить следующее:

.D\(n\)\:\:::before {  display: none;}

В MN же Мы можем всё тоже самое:

<div class="bgcF:h cBlue:a c0F0:hover dN::before">...</div>

.bgcF\:h:hover {  background-color: #fff;}.cBlue\:a:active {  color: blue;}.c0F0\:hover:hover {  color: #0f0;}.dN\:\:before::before {  display: none;}

Помимо этого, Мы имеем возможность задавать вообще любые псевдоклассы и севдоэлементы известные и неизвестные в CSS:

<div class="bgcF:hz cBlue::placeholder c0F0::-webkit-input-placeholder bgE:odd bt:first c:i">...</div>

.bgcF\:hz:hz {  background-color: #fff;}.cBlue\:\:placeholder::placeholder {  color: blue;}.c0F0\:\:-webkit-input-placeholder::-webkit-input-placeholder {  color: #0f0;}.bgE\:odd:nth-child(2n+1) {  background: #eee;}.bt\:first:first-child {  border-top-width: 0;}.c\:i::placeholder {  color: #000;}.c\:i:-ms-input-placeholder {  color: #000;}.c\:i::-moz-placeholder {  color: #000;}.c\:i::-webkit-input-placeholder {  color: #000;}

В MN Мы можем параметризовать псевдоклассы:

<div class="c:not[.anyClass] bg0A:not[tag[attr=value].class\:pseudo] c88F4:n[13] c01:n[3n+1]">...</div>

.c\:not\[\.anyClass\]:not(.anyClass) {  color: #000;}.bg0A\:not\[tag\[attr\=value\]\.class\\\:pseudo\]:not(tag[attr=value].class:pseudo) {  background: #000;  background: rgba(0,0,0,.67);}.c88F4\:n\[13\]:nth-child(13) {  color: #88f;  color: rgba(136,136,255,.27);}.c01\:n\[3n\+1\]:nth-child(3n+1) {  color: #000;  color: rgba(0,0,0,.07);}

В MN Мы также можем указать несколько псевдоклассов подряд:

<input  type="checkbox"  class="mh20:not[.anyClass]:n[5n+2]:c:h"/>

.mh20\:not\[\.anyClass\]\:n\[5n\+2\]\:c\:h:not(.anyClass):nth-child(5n+2):checked:hover {  margin-left: 20px;  margin-right: 20px;}

В MN можно задать собственный набор синонимов для псевдоклассов.
Пример:

mn.utils.extend(mn.states, {  foo: [':active'],  bar: ['.Bar_active', '.otherSelector'],  vasya: ['[data-name=vasya]'],});

<div class="cRed:foo cGreen:bar cBlue:vasya">...</div>

.cRed\:foo:active {  color: red;}.cGreen\:bar.otherSelector,.cGreen\:bar.Bar_active {  color: green;}.cBlue\:vasya[data-name=vasya] {  color: blue;}

Atomizer vs MN. Комбинаторы

Сравним кабинаторы.

"The underscore character ( _ )" в Atomizer:

<div class="foo">  <div class="foo_D(n)"></div></div>

Аналог в MN:

<div class="foo">  <div class="dN<.foo"></div></div>

"The right angle bracket character ( > )" в Atomizer:

<div class="foo">  <div class="foo>D(n)"></div></div>

Аналог в MN:

<div class="foo">  <div class="dN<1.foo"></div></div>

"The plus sign ( + )" в Atomizer:

<div class="foo"></div><div class="foo+D(n)"></div>

Аналог в MN:

<div class="foo"></div><div class="dN<.foo+"></div>

Помимо этого в MN комбинатор "соседний брат" ( + ) можно использовать в обратном направлении:

<div class="dN+.foo"></div><div class="foo"></div>

В MN можно использовать комбинатор "общий брат" ( ~ ):

<div class="foo"></div><div class="dN<.foo~"></div><div class="dN<.foo~"></div>

.foo~ .dN\<\.foo\~ {  display: none;}

И в обратном направлении:

<div class="dN~.foo"></div><div class="foo"></div><div class="foo"></div>

.dN\~\.foo~.foo {  display: none;}

Atomizer vs MN. Контекст

В Atomizer есть функциональность, называемая Context class, которая используется в случаях, когда необходимо установить некоторое поведение стилей при изменении селектора на родительском элементе.
Пример:

<div class="foo bar any">  <div class="double">    <div class="foo_D(n) bar:h_D(n) any_D(n):h any_double_D(n)">...</div>  </div></div>

.foo .foo_D\(n\), .any_double .any_double_D\(n\) {  display: none;}.bar:hover .bar\:h_D\(n\) {  display: none;}.any .any_D\(n\)\:h:hover {  display: none;}

На что я обратил внимание в этом примере:

• нельзя использовать последовательность из нескольких родительских классов, что я и попытался сделать в этом примере таким образом any_double_D(n);
• оказывается, стили в конечном CSS всё же частично группируются по какому-то принципу.

В MN, как, вероятно, некоторые могли догадаться из примеров выше, можно юзать полноценные селекторы, но для начала давайте рассмотрим, каким образом можно сделать тоже самое:

<div class="foo bar any">  <div class="double">    <div class="dN<.foo dN<.bar:h dN:h<.any dN<.double<.any">...</div>  </div></div>

.foo .dN\<\.foo,.bar:hover .dN\<\.bar\:h,.any .dN\:h\<\.any:hover,.any .double .dN\<\.double\<\.any {  display: none;}

При необходимости можно задать строгую глубину вложенности:

<div class="any">  <div class="double">    <div class="dN<1.double<1.any dN<2.any">...</div>  </div></div>

.any>.double>.dN\<1\.double\<1\.any,.any>*>.dN\<2\.any {  display: none;}

Аналогичным образом, используя стрелочки направленные в противоположную сторону, можно задавать стили дочерним элементам:

<div class="dN>2.double">  <div class="any">    <div class="double">...</div>  </div></div>

.dN\>2\.double>*>.double {  display: none;}

Можно комбинировать родительские селекторы с дочерними:

<div class="parent">  <div class="dN<.parent>2.double">    <div class="any">      <div class="double">...</div>    </div>  </div></div>

.parent .dN\<\.parent\>2\.double>*>.double {  display: none;}

<div class="dN>.double<.any">  <div class="any">    <div class="double">...</div>  </div></div>

.dN\>\.double\<\.any .any .double {  display: none;}

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

<div class="bgF2.active[data-name=Gena]:h active" data-name="Gena">...</div><div class="dN#feedback" id="feedback">...</div><div class="o50.disable disable">...</div>

.bgF2\.active\[data-name\=Gena\]\:h.active[data-name=Gena]:hover {  background: #fff;  background: rgba(255,255,255,.13);}.dN\#feedback#feedback {  display: none;}.o50\.disable.disable {  opacity: .5;}

Отличия:

• в нотации MN строгий порядок.
  Фрагмент строки отвечающий за значение стиля, как основная суть нотации, всегда следует вначале, и только затем начиная с какого-нибудь служебного символа следует контекст, который уточняет к чему стили имеют отношение.
  Если существует такое понятие как "Венгерская нотация", то мне чисто ради наблюдения, хочется здесь назвать такой способ записи "Тюркской нотацией", ибо в тюркских языках суть слова всегда находится вналале и только затем следует множество уточняющих суффиксов и окончаний.
  В глобальном смысле это даже предельно технически правильный способ подачи почти любой информации, заключающийся в последовательном уменьшении неопределенности.
  Пример со временем:
  2020-02-02 22:22:22 каждое следующее значение в этой последовательности практически будет бесполезно без предшествующих;
  Аналогичный пример с адресом: Germany, 14193 Berlin, Kronberger Str. 12;

  
  

• в MN можно использовать произвольные слелекторы.

  
  

Atomizer vs MN. Вычисляемые значения

В Atomizer есть возможность использования вычисляемых значений.
Для некоторых свойств Мы можем использовать дроби:

<div class="W(1/2) P(1/3) M(1/4) Start(1/5) T(1/6) Pstart(1/7) Miw(1/8)">...</div>

.W\(1\/2\) {  width: 50%;}.P\(1\/3\) {  padding: 33.3333%;}.M\(1\/4\) {  margin: 25%;}.Start\(1\/5\) {  left: 20%;}.T\(1\/6\) {  top: 16.6667%;}.Pstart\(1\/7\) {  padding-left: 14.2857%;}.Miw\(1\/8\) {  min-width: 12.5%;}

В MN Мы также можем использовать вычисляемые значения, в том числе и дроби:

<div class="w1/2 p1/3 m1/4 sl1/5 st1/6 pl1/7 wmin1/8">...</div>

.w1\/2 {  width: 50%;}.p1\/3 {  padding: 33.33%;}.m1\/4 {  margin: 25%;}.sl1\/5 {  left: 20%;}.st1\/6 {  top: 16.66%;}.pl1\/7 {  padding-left: 14.28%;}.wmin1\/8 {  min-width: 12.5%;}

Однако в Atomizer почему-то нельзя вычесть или сложить значение с дробью.
Я проверил:

<div class="W(1/2-10) P(1/3+5)">...</div>

.W\(1\/2-10\) {  width: 50%;}

В MN Мы можем вычитать и складывать значения с дробью, и это для некоторых случаяев весьма полезная возможность.
Пример:

<div class="w1/2-10 p1/3\+5">...</div>

.w1\/2-10 {  width: calc(50% - 10px);}.p1\/3\\\+5 {  padding: calc(33.33% + 5px);}

Замечания:

• здесь " + " это с служебный символ-комбинатор, как и в обычном CSS, поэтому он экранируется слэшем (\).

Atomizer vs MN. Установка цветов

В Atomizer для указания цвета используются шестнадцатеричные цвета из 3-х или 6-ти символов с префиксом # в качестве идентификатора значения.

Шестнадцатеричные значения для цветов должны быть написаны в нижнем регистре (т.е., #ccc, а не #CCC).

Для установки коэффициента непрозрачности к шестнадцатеричному значению необходимо добавлять точку(.) с десятичным значением.

Например:

<div class="C(#fff) Bdc(#ff0000) Bgc(#00ff00.5)">...</div>

.C\(\#fff\) {  color: #fff;}.Bdc\(\#ff0000\) {  border-color: #ff0000;}.Bgc\(\#00ff00\.5\) {  background-color: rgba(0,255,0,.5);}

В MN для указания цвета используются шестнадцатеричные цвета от 0 до 8-ми символов с коэффициентом непрозрачности включительно, но для коэффициента непрозрачности дополнительно имеется альтернативный способ: использовать точку(.) с десятичным значением.

Например:

<div class="c cFFF bcFF0000 bgc00FF00\.5 сFF00008 сFF000080 cF bgc08 bgc0\.5 bgc1234 bgc12348">...</div>

.c {  color: #000;}.cFFF {  color: #fff;}.bcFF0000 {  border-color: #f00;}.bgc00FF00\\\.5 {  background-color: #0f0;  background-color: rgba(0,255,0,.5);}.cFF00008 {  color: #f00;  color: rgba(255,0,0,.53);}.cFF000080 {  color: #f00;  color: rgba(255,0,0,.5);}.cF {  color: #fff;}.bgc08 {  background-color: #000;  background-color: rgba(0,0,0,.53);}.bgc0\\\.5 {  background-color: #000;  background-color: rgba(0,0,0,.5);}.bgc1234 {  background-color: #123;  background-color: rgba(17,34,51,.27);}.bgc12348 {  background-color: #123;  background-color: rgba(17,34,51,.28);}

Замечания:

• здесь " . " это с служебный символ, с помощью которого указываются классы, как и в обычном CSS, поэтому он экранируется слэшем (\).
• Вы могли обратить внимание на то, что ко всем генерируемым цветам с коэффициентом непрозрачности дополнительно добавляется значения без альфа-канала это полифил для браузеров, которые не поддерживают коэффициент непрозрачности.
  Это поведение можно отключить в настройках MN при помощи установки опции altColor: 'off'

Градиентная цветовая заливка в MN

В MN Мы имеем два похожих пресета, которые, как известно, на практике часто могут быть взаимозаменяемыми: bgc и bg.
Пример:

<div class="bg48A">...</div><div class="bgc48A">...</div>

.bg48A {  background: #48a;}.bgc48A {  background-color: #48a;}

Однако с bg Мы также можем легко и лакончино делать градиенты, путем указания последовательности цветов через знак минуса (-):

<div class="bg0-F">...</div><div class="bgF00-0F0-00F">...</div>

.bg0-F {  background: #000;  background: linear-gradient(180deg,#000 0%,#fff 100%);}.bgF00-0F0-00F {  background: #f00;  background: linear-gradient(180deg,#f00 0%,#0f0 50%,#00f 100%);}

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

<div class="bg0-F_g45">...</div><div class="bg0-F_g90">...</div>

.bg0-F_g45 {  background: #000;  background: linear-gradient(225deg,#000 0%,#fff 100%);}.bg0-F_g90 {  background: #000;  background: linear-gradient(270deg,#000 0%,#fff 100%);}

Помимо линейных градиентов, Мы можем использовать радиальные градиенты:

<div class="bg0-F_r">...</div><div class="bg0-F_r_closestSide">...</div><div class="bg0-F_r_ellipse_at_top">...</div>

.bg0-F_r {  background: #000;  background: radial-gradient(circle,#000 0%,#fff 100%);}.bg0-F_r_closestSide {  background: #000;  background: radial-gradient(closest-side,#000 0%,#fff 100%);}.bg0-F_r_ellipse_at_top {  background: #000;  background: radial-gradient(ellipse at top,#000 0%,#fff 100%);}

Atomizer vs MN. Несколько значений

В Atomizer есть возможность указывать несколько значений, разделенных запятыми, когда это поддерживается соответствующими свойствами, например:

<div class="Bgp(20px,50px)">...</div>

.Bgp\(20px\,50px\) {  background-position: 20px 50px;}

С MN получить аналогичный результат можно похожим образом:

<div class="bgp20px_50px">...</div>

.bgp20px_50px {  background-position: 20px 50px;}

Atomizer vs MN. Идентификатор брейкпоинта (breakpoint identifier). Медиа-запросы

В Atomizer можно устанавливать брейкпоинт к правилу, путем добавления суффикса к записи. Брейкпоинт указывает, что это правило вступит в силу только в рамках медиа-запроса.

Значения имени и длины каждой точки останова определяются в объекте конфигурации:

{  // ...  breakPoints: {    'sm': '@media(min-width:750px)', // breakpoint 1    'md': '@media(min-width:1000px)', // breakpoint 2    'lg': '@media(min-width:1200px)', // breakpoint 3    // ...  },  // ...}

Используются эти брейкпоинты следующим образом:

<div class="W(50%)--sm W(33%)--md W(25%)--lg">...</div>

@media(min-width:750px) {  .W\(50\%\)--sm {    width: 50%;  }}@media(min-width:1000px) {  .W\(33\%\)--md {    width: 33%;  }}@media(min-width:1200px) {  .W\(25\%\)--lg {    width: 25%;  }}

В MN также можно прекрасно устанавливать брейкпоинты, путем добавления суффикса к записи:

<div class="w50%@m w33%@d w25%@d2 w1/5@ie w1/6@android cr@mouse">...</div>

@media (max-width: 992px) {  .w50\%\@m {    width: 50%;  }}@media (min-width: 992px) {  .w33\%\@d {    width: 33%;  }}@media (min-width: 1200px) {  .w25\%\@d2 {    width: 25%;  }}.ie .w1\/5\@ie {  width: 20%;}.android .w1\/6\@android {  width: 16.66%;}@media (pointer: fine) and (hover: hover) {  .cr\@mouse {    cursor: pointer;  }}

Здесь Мы имеем возможность для брейкпоинтов использовать как медиа-запросы, так и родительские селекторы.

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

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

Пример конфигурирования брейкпоинтов:

module.exports = (mn) => {  const {media} = mn;  // media-queries  media.m = {    query: '(max-width: 992px)',    priority: 0,  };  media.m2 = {    query: '(max-width: 768px)',    priority: 1,  };  media.d = {    query: '(min-width: 992px)',    priority: 2,  };  media.d2 = {    query: '(min-width: 1200px)',    priority: 3,  };  media.mouse = {    query: '(pointer: fine) and (hover: hover)',    priority: 4,  };  // ...  // user agents  media.mozilla = {    selector: '.mozilla'  };  media.webkit = {    selector: '.webkit'  };  media.ie = {    selector: '.ie'  };  media.iphone = {    selector: '.iphone'  };  media.android = {    selector: '.android'  };  // ...};

Если Мы используем в нотации брейкпонт, который нигде не предустановлен, то в CSS получим значение медиа-запроса, которое непосредственно указали в записи:

<div class="w50%@print w50%@any">...</div>

@media print {  .w50\%\@print {    width: 50%;  }}@media any {  .w50\%\@any {    width: 50%;  }}

Также помимо предустанавливаемых брейкпоинтов в нотации MN можно использовать
выражения:

<div class="w50%@768 w50%@768- w50%@768-992">...</div><div class="w50%@768-992x100-200 w50%@x100-200">...</div><div class="w50%@x100 w50%@x100-">...</div>

@media (max-width: 768px) {  .w50\%\@768 {    width: 50%;  }}@media (min-width: 768px) {  .w50\%\@768- {    width: 50%;  }}@media (min-width: 768px) and (max-width: 992px) {  .w50\%\@768-992 {    width: 50%;  }}@media (min-width: 768px) and (max-width: 992px) and (min-height: 100px) and (max-height: 200px) {  .w50\%\@768-992x100-200 {    width: 50%;  }}@media (min-height: 100px) {  .w50\%\@x100- {    width: 50%;  }}@media (min-height: 100px) and (max-height: 200px) {  .w50\%\@x100-200 {    width: 50%;  }}@media (max-height: 100px) {  .w50\%\@x100 {    width: 50%;  }}

В выражениях брейкпонтов Мы можем указывать приоритет медиа-запроса, по которому каскадные блоки отсортировываются в конечном CSS:

<div class="w50%@768-992^5 w50%@768^1 w50%@992^3">...</div>

@media (max-width: 768px) {  .w50\%\@768\^1 {    width: 50%;  }}@media (max-width: 992px) {  .w50\%\@992\^3 {    width: 50%;  }}@media (min-width: 768px) and (max-width: 992px) {  .w50\%\@768-992\^5 {    width: 50%;  }}

Minimalist Notation. Управление приоритетами стилей

В MN имеется специальная удобная возможность управления приоритетами стилей. Мы можем повысить приоритет стилей путем добавления суффикса * со значением приоритета в конец записи нотации, например:

<div class="cF*2 c0*3 cF00.active*2">...</div>

.cF\*2.cF\*2 {  color: #fff;}.c0\*3.c0\*3.c0\*3 {  color: #000;}.cF00\.active\*2.cF00\.active\*2.active {  color: #f00;}

Таким образом, приоритет или, другими словами, специфичность стилей увлеличивается за счёт повторения в каскаде генерируемого CSS комбинации класса с самим собой столько раз, сколько Мы указываем в нотации.

Minimalist Notation. Селектор подстроки

С MN можно позволить себе сокращать имена классов в нотации.

Иногда достаточно только фрагмента имени:

<div class="SomeBlock">  <div class="bgF00>1.*_active">    <div class="SomeBlock__SomeElement SomeBlock__SomeElement_active">      ...    </div>    <div class="SomeBlock__SomeElement">      ...    </div>    <div class="SomeBlock__SomeElement SomeBlock__SomeElement_active">      ...    </div>  </div></div>

.bgF00\>1\.\*_active>[class*=_active] {  background: #f00;}

Например, в приложении на React Мы используем компоненты библиотеки Material-UI, которые легально кастомизируются через JSS так:

const React = require('react');const {render} = require('react-dom');const {withStyles} = require('@material-ui/core/styles');const TextField = require('@material-ui/core/TextField').default;const TextFieldGreen = withStyles({  root: {    '& label.Mui-focused': {      color: 'green',    },    '& .MuiOutlinedInput-root': {      '& fieldset': {        borderColor: 'red',      },      '&:hover fieldset': {        borderColor: 'yellow',      },      '&.Mui-focused fieldset': {        borderColor: 'green',      },    },  },})(TextField);function App() {  return (    <TextFieldGreen      label="Label"      required      defaultValue="Value"    />  );}

С помощью MN ради кастомизации элементов Нам придется заморачиваться меньше:

const React = require('react');const {render} = require('react-dom');const TextField = require('@material-ui/core/TextField').default;function TextFieldGreen(props) {  return (    <TextField      {...props}      className={`        cGreen>label.*-focused        bcRed>.*OutlinedInput-root>fieldset        bcYellow>.*OutlinedInput-root:h>fieldset        bcGreen>.*OutlinedInput-root.*-focused>fieldset      ` + (props.className || '')}    />  );}function App() {  return (    <TextFieldGreen      label="Label"      required      defaultValue="Value"    />  );}

Если Нам понадобится кастомизировать значительно большее количество атрибутов, то подход JSS будет разительно более громоздким, чем подход MN.

Так в Нашем случае выглядит сгенерированный CSS:

.cGreen\>label\.\*-focused label[class*=-focused] {  color: green;}.bcRed\>\.\*OutlinedInput-root\>fieldset [class*=OutlinedInput-root] fieldset {  border-color: red;}.bcYellow\>\.\*OutlinedInput-root\:h\>fieldset [class*=OutlinedInput-root]:hover fieldset {  border-color: yellow;}.bcGreen\>\.\*OutlinedInput-root\.\*-focused\>fieldset [class*=OutlinedInput-root][class*=-focused] fieldset {  border-color: green;}

Если возникает необходимость, селекторы подстрок можно использовать в странных и диковинных случаях:

<ul class="cRed>#*menu-item-">  <li id="menu-item-1">...</li>  <li id="menu-item-2">...</li>  <li id="menu-item-3">...</li>  <li id="menu-item-4">...</li>  ...</ul>

.cRed\>\#\*menu-item- [id*=menu-item-] {  color: red;}

Заключение

Как можно видеть, MN больше ориентирован на методологию Atomic / Functional CSS.

Сейчас в ходу Scoped styles, JSS, PostCSS с BEM. Возможно и MN станет популярным где-то в свои 2050-е годы.

После MN Вам уже не захочется возвращаться к прежнему, и использование каких-либо иных классических способов покажется довольно утомительным и нелепым занятием. Ваши плечи будут тяжелеть от просьб написать CSS руками, ибо это будет также странно, как носить от ручья воду в бидонах, имея при этом под носом чистую воду из крана хотя, конечно, подобные расточительные глупости вполне себе в норме для Нашего общества, но тем не менее...

Ссылки

Библиотека MN

MN get started example