😻 👟 🚣🏽 Zerstäuber gegen minimalistische Notation (MN) 😿 👩🏿‍🔬 👨‍🎓

Minimalist Notation (MN) ist eine flexible, adaptive Technologie zur Stilgenerierung.

Es werden nur Stile für vorhandene Markup-Klassen HTML, JSX usw. generiert. - Dank dessen müssen Sie sich keine Gedanken über den Komponentenansatz in CSS machen, toten CSS-Code, und es besteht überhaupt keine Notwendigkeit, CSS-Code zu schreiben.

Es unterstützt Haltepunkte (Medienabfragen), Selektoren, Prioritäten, Gruppierungen, erforderliche automatische Präfixe und Polyfills.

Die Anwendung dieser Technologie ähnelt der Verwendung von Inline-Stilen, nur mit einer viel ausdrucksstärkeren Syntax und vielen zusätzlichen Funktionen, sodass MN sogar als Inline-Stil 2.0-Technologie bezeichnet werden kann.

MN impliziert nicht nur die Notationsregeln als solche, sondern sogar eine verbesserte alternative Syntax der kaskadierenden Stileinstellungssprache, die sich auf Inline-Anwendungen konzentriert.

Ich habe MN im Jahr 2017 entwickelt und seitdem habe ich es geschafft, diese Technologie auf viele Arten zu verbessern, genügend Voreinstellungen und praktische Tools hinzuzufügen, um sie zu studieren.

Wenn jemand wissen möchte, wie es mir gekommen ist, meine eigene Technologie zu entwickeln, hinterlasse ich einen Link zu meinem Repository , um nicht von mir selbst zu plagiieren.

Die MN-Technologie verfügt über umfangreiche Funktionen.

Für viele ist es neu und es gibt fast keine anderen Primärquellen zu studieren, außer diesem Artikel. Ich warne Sie daher, dass es unten VIELE BRIEFE und Codebeispiele geben wird.

Beginnen wir mit mehr oder weniger bekannten Funktionen, die das nächste Analogon dieser Technologie auch hat, während wir einen Vergleich anstellen.

Der beste Weg, etwas zu erklären, besteht darin, Beispiele zu zeigen.

Wir beginnen mit dem Vergleich Minimalist-Notationmit weniger bekannten Funktionen seines ersten Analogons : Atomizer.

Zum Zeitpunkt dieses Schreibens aktuelle Paketversionen:

minimalist-notation 1.5.17 ;;
atomizer 3.6.2 ...

Die folgenden Beispiele Atomizerkönnen Sie hier überprüfen :

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

Sie MNkönnen die folgenden Beispiele hier überprüfen :

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

Nach MN werden Sie nicht mehr in die Vergangenheit zurückkehren wollen, und die Verwendung anderer klassischer Methoden wird ziemlich ermüdend und lächerlich erscheinen. Ihre Schultern werden schwer von Anfragen sein, CSS mit Ihren Händen zu schreiben, denn es wird so seltsam sein, wie Wasser aus einem Strom in Dosen zu tragen, während Sie sauberes Leitungswasser unter der Nase haben - obwohl solch verschwenderischer Unsinn für unsere Gesellschaft natürlich ganz normal ist, aber dennoch...

Links

MN-Bibliothek

MN Erste Schritte Beispiel

Zerstäuber gegen minimalistische Notation (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: