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 руками, ибо это будет также странно, как носить от ручья воду в бидонах, имея при этом под носом чистую воду из крана — хотя, конечно, подобные расточительные глупости вполне себе в норме для Нашего общества, но тем не менее…
Ссылки
ссылка на оригинал статьи https://habr.com/ru/post/510600/
Добавить комментарий