👩🏽‍🎨 🚴🏼 🍅 アトマイザーvsミニマリスト表記（MN） 🚧 🚣🏽 😔

ミニマリスト表記（MN）は、柔軟で適応性のあるスタイル生成テクノロジーです。

既存のマークアップクラスhtml、jsxなどのスタイルのみを生成します。-そのおかげで、CSSのコンポーネントアプローチやデッドCSSコードについて心配する必要がなく、CSSコードを作成する必要もまったくありません。

ブレークポイント（メディアクエリ）、セレクター、優先度、グループ化、必要な自動プレフィックス、およびポリフィルをサポートします。

このテクノロジーの適用は、インラインスタイルの使用と似ていますが、より表現力豊かな構文と多くの追加機能があるため、MNはインラインスタイル2.0テクノロジーと呼ぶこともできます。

MNは、表記規則自体だけでなく、実際には、インラインアプリケーションに焦点を合わせたカスケードスタイル設定言語の改善された代替構文さえも意味します。

私は2017年にMNを開発し、それ以来、このテクノロジーをさまざまな方法で改善し、十分なプリセットと便利なツールを追加して研究してきました。

誰かが私自身の技術を開発することがどのように起こったのか知りたければ、私は自分自身から苦しめられないように、私のリポジトリへのリンクを残します。

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

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

MNの後は、過去に戻りたくないでしょう。他の古典的な方法を使用することは、かなり退屈でばかげているように見えます。缶の中の小川から水を運びながら、鼻の下にきれいな水道水を持っているのと同じくらい奇妙なことになるので、手でCSSを書くように要求すると、肩が重くなります-もちろん、そのような無駄なナンセンスは私たちの社会にとってはごく普通のことですが、それにもかかわらず...

リンク

MNライブラリ

MN入門例

アトマイザーvsミニマリスト表記（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.

リンク

More articles: