☝🏾 🙏🏾 👨🏿‍🤝‍👨🏾 Atomizador vs Notação Minimalista (MN) 👨🏽‍💼 👋🏽 🕵🏿

Minimalist Notation (MN) é uma tecnologia de geração de estilo flexível e adaptável.

Ele apenas gera estilos para classes de marcação existentes html, jsx, etc. - graças ao qual não há necessidade de se preocupar com a abordagem do componente em CSS, código CSS morto e não há necessidade de escrever código CSS.

Ele oferece suporte a pontos de interrupção (consultas de mídia), seletores, prioridades, agrupamentos, autopreenchimentos e prefixos automáticos necessários.

O uso dessa tecnologia é semelhante ao uso de estilos embutidos, apenas com uma sintaxe muito mais expressiva e muitos recursos adicionais, portanto, o MN pode até ser chamado de tecnologia de estilos embutidos 2.0.

MN implica não apenas as regras de notação como tais, mas, na verdade, até mesmo uma sintaxe alternativa aprimorada da linguagem de configuração do estilo em cascata, que se concentra na aplicação embutida.

Desenvolvi o MN em 2017 e, desde então, consegui aprimorar essa tecnologia de várias maneiras, adicionando predefinições suficientes e ferramentas convenientes para estudá-la.

Se alguém quiser saber como me ocorreu desenvolver minha própria tecnologia, deixo um link para meu repositório para não plagiar de mim mesmo.

A tecnologia MN possui ampla funcionalidade.

Para muitos, é novo e quase não tem outras fontes primárias para estudar, exceto este artigo, portanto, aviso que haverá MUITAS LETRAS e exemplos de código abaixo.

Vamos começar com uma funcionalidade mais ou menos conhecida que o análogo mais próximo desta tecnologia também tem, enquanto fazemos uma comparação.

A melhor maneira de explicar algo é mostrar exemplos.

Partimos da comparação Minimalist-Notationcom um menos bem conhecidas funcionalidades do seu primeiro análogo: Atomizer.

Versões dos pacotes atualizadas no momento da redação deste artigo:

minimalist-notation 1.5.17 ;
atomizer 3.6.2 ...

Você Atomizerpode verificar os exemplos abaixo aqui:

https://pankajparashar-zz.github.io/atomizer-web/

Você MNpode verificar os exemplos abaixo aqui:

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 , :

//   "padding"
mn('p', (params) => {
  return {
    style: {
      padding: (params.num || '0') + (params.unit || 'px'),
    },
  };
});

//   "padding-left"
mn('pl', (params) => {
  return {
    style: {
      paddingLeft: (params.num || '0') + (params.unit || 'px'),
    },
  };
});

//   "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>

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

, , , .

, 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>

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

"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>

.foo>.dN\<1\.foo {
  display: none;
}

"The plus sign ( + )" Atomizer:

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

MN:

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

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

MN " " ( + ) :

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

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

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%);
}

<div class="bgF00-0F0p77%-00Fp90%">...</div>

.bgF00-0F0p77\%-00Fp90\% {
  background: linear-gradient(180deg,#f00 0%,#0f0 77%,#00f 90%);
}

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- .

Depois do MN, você não vai querer mais voltar ao passado e usar qualquer outro método clássico parecerá entediante e ridículo. Seus ombros ficarão pesados com os pedidos para escrever CSS com as mãos, pois será tão estranho quanto carregar água de um riacho em latas, enquanto tem água da torneira limpa debaixo do nariz - embora, é claro, esse desperdício absurdo seja normal para nossa sociedade, Mesmo assim...

Links

Biblioteca MN

Exemplo de introdução ao MN

Atomizador vs Notação Minimalista (MN)

Atomizer vs MN.

Atomizer vs MN. !important

(!)

Atomizer vs MN.

Atomizer vs MN.

Atomizer vs MN.

Atomizer vs MN.

Atomizer vs MN.

MN

Atomizer vs MN.

Atomizer vs MN. (breakpoint identifier). -

Minimalist Notation.

Minimalist Notation.

Links

More articles: