雾化器与简约符号(MN)

极简符号(MN)是一种灵活的自适应样式生成技术。



它仅为现有的标记类html,jsx等生成样式。-有了它,您不必担心CSS中的组件方法,无效的CSS代码,也根本不需要编写CSS代码。



它支持断点(媒体查询),选择器,优先级,分组,必要的自动前缀和polyfill。



应用此技术类似于使用内联样式,只是语法更具表现力,并具有许多其他功能,因此MN甚至可以称为内联样式2.0技术。



MN不仅暗示这样的注释规则,而且实际上甚至暗示了级联样式设置语言的一种改进的替代语法,该语法专注于内联应用。



我于2017年开发了MN,自那时以来,我设法通过多种方式改进了这项技术,添加了足够的预设和方便的工具来研究它。



如果有人想知道开发我自己的技术对我来说是怎么回事,我会在我的资料库中留下一个链接,以免from窃自己。



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.

    :

    ffz font-size — ,

    fontf font — ,

    absposA 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入门示例




All Articles