{"id":306807,"date":"2020-07-12T15:00:41","date_gmt":"2020-07-12T15:00:41","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=306807"},"modified":"-0001-11-30T00:00:00","modified_gmt":"2020-07-12T15:00:41","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=306807","title":{"rendered":"Atomizer vs Minimalist Notation (MN)"},"content":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/post\/510600\/\">\n<p>Minimalist Notation (MN) (\u043c\u0438\u043d\u0438\u043c\u0430\u043b\u0438\u0441\u0442\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u043d\u043e\u0442\u0430\u0446\u0438\u044f) \u2014 \u0433\u0438\u0431\u043a\u0430\u044f \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u0430\u044f \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u0441\u0442\u0438\u043b\u0435\u0439.<\/p>\n<p>  <\/p>\n<p>\u041e\u043d\u0430 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u0441\u0442\u0438\u043b\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 html, jsx, \u0438 \u0442.\u043f. \u2014 \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0447\u0435\u043c\u0443 \u043e\u0442\u043f\u0430\u0434\u0430\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u0437\u0430\u0431\u043e\u0442\u0438\u0442\u044c\u0441\u044f \u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u0435 \u0432 CSS, \u043c\u0451\u0440\u0442\u0432\u043e\u043c CSS \u043a\u043e\u0434\u0435, \u0438 \u043e\u0442\u043f\u0430\u0434\u0430\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u043f\u0438\u0441\u0430\u0442\u044c CSS \u043a\u043e\u0434 \u0432\u043e\u043e\u0431\u0449\u0435.<\/p>\n<p>  <\/p>\n<p>\u0412 \u043d\u0435\u0439 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0431\u0440\u0435\u0439\u043a\u043f\u043e\u043d\u0442\u044b (\u043c\u0435\u0434\u0438\u0430-\u0437\u0430\u043f\u0440\u043e\u0441\u044b), \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b, \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u044b, \u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u043a\u0438, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0430\u0432\u0442\u043e\u043f\u0440\u0435\u0444\u0438\u043a\u0441\u044b \u0438 \u043f\u043e\u043b\u0438\u0444\u0438\u043b\u044b.<\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u044d\u0442\u043e\u0439 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u043f\u043e\u0445\u043e\u0436\u0435 \u043d\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0438\u043d\u043b\u0430\u0439\u043d\u043e\u0432\u044b\u0445 \u0441\u0442\u0438\u043b\u0435\u0439, \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0431\u043e\u043b\u0435\u0435 \u0432\u044b\u0440\u0430\u0437\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u043e\u043c \u0438 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e\u043c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 MN \u043c\u043e\u0436\u043d\u043e \u0434\u0430\u0436\u0435 \u043d\u0430\u0437\u0432\u0430\u0442\u044c \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0435\u0439 inline styles 2.0.<\/p>\n<p>  <\/p>\n<p>MN \u043f\u043e\u0434\u0440\u0430\u0437\u0443\u043c\u0435\u0432\u0430\u0435\u0442 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u043d\u043e\u0442\u0430\u0446\u0438\u0438 \u043a\u0430\u043a \u0442\u0430\u043a\u043e\u0432\u044b\u0435, \u043d\u043e \u0438, \u043f\u043e-\u0441\u0443\u0442\u0438, \u0434\u0430\u0436\u0435 \u0443\u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u0441\u0442\u0432\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u043a\u0430\u0441\u043a\u0430\u0434\u043d\u043e\u0433\u043e \u044f\u0437\u044b\u043a\u0430 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0441\u0442\u0438\u043b\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d \u043d\u0430 \u0438\u043d\u043b\u0430\u0439\u043d\u043e\u0432\u043e\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435.<\/p>\n<p>  <\/p>\n<p>\u042f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043b MN \u0432 2017 \u0433\u043e\u0434\u0443, \u0438 \u0441 \u0442\u043e\u0433\u043e \u043c\u043e\u043c\u0435\u043d\u0442\u0430 \u0443\u0441\u043f\u0435\u043b \u0432\u043e \u043c\u043d\u043e\u0433\u043e\u043c \u0443\u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u0443 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044e, \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u0440\u0435\u0441\u0435\u0442\u043e\u0432 \u0438 \u0443\u0434\u043e\u0431\u043d\u044b\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0434\u043b\u044f \u0435\u0451 \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u043a\u0442\u043e-\u0442\u043e \u0436\u0435\u043b\u0430\u0435\u0442 \u0443\u0437\u043d\u0430\u0442\u044c \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u043c\u043d\u0435 \u043f\u0440\u0438\u0448\u043b\u043e \u0432 \u0433\u043e\u043b\u043e\u0432\u0443 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u0443\u044e \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044e, \u044f <a href=\"https:\/\/github.com\/mr-amirka\/minimalist-notation\/blob\/master\/from-author-ru.md\">\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u0441\u0432\u043e\u0439 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439<\/a>, \u0434\u0430\u0431\u044b \u043d\u0435 \u043f\u043b\u0430\u0433\u0438\u0430\u0442\u0438\u0442\u044c \u0443 \u0441\u0430\u043c\u043e\u0433\u043e \u0441\u0435\u0431\u044f.<\/p>\n<p><a name=\"habracut\"><\/a>  <\/p>\n<p>\u0422\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f MN \u0438\u043c\u0435\u0435\u0442 \u043e\u0431\u0448\u0438\u0440\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c.<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043c\u043d\u043e\u0433\u0438\u0445 \u043e\u043d\u0430 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u043e\u0432\u043e\u0439, \u0438 \u043f\u043e\u0447\u0442\u0438 \u043d\u0435 \u0438\u043c\u0435\u0435\u0442 \u0434\u0440\u0443\u0433\u0438\u0445 \u043f\u0435\u0440\u0432\u043e\u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u043e\u0432 \u0434\u043b\u044f \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u044f, \u043a\u0440\u043e\u043c\u0435 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0436\u0434\u0430\u044e, \u0447\u0442\u043e \u043d\u0438\u0436\u0435 \u0431\u0443\u0434\u0435\u0442 \u041c\u041d\u041e\u0413\u041e \u0411\u0423\u041a\u0412 \u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u043a\u043e\u0434\u0430.<\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u0447\u043d\u0451\u043c \u0441 \u0431\u043e\u043b\u0435\u0435 \u043c\u0435\u043d\u0435\u0435 \u043e\u0431\u0449\u0435\u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u043c\u0435\u044e\u0442\u0441\u044f \u0438 \u0443 \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0435\u0433\u043e \u0430\u043d\u0430\u043b\u043e\u0433\u0430 \u044d\u0442\u043e\u0439 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438, \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0432\u043e\u0434\u044f \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435.<\/p>\n<p>  <\/p>\n<p>\u041b\u0443\u0447\u0448\u0438\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0447\u0442\u043e-\u0442\u043e \u043e\u0431\u044a\u044f\u0441\u043d\u0438\u0442\u044c \u2014 \u044d\u0442\u043e \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u044b\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b.<\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u0447\u043d\u0451\u043c \u0441 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f <code>Minimalist-Notation<\/code> \u0441 \u0431\u043e\u043b\u0435\u0435 \u043c\u0435\u043d\u0435\u0435 \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b\u043c\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044f\u043c\u0438 \u0435\u0433\u043e \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0430\u043d\u0430\u043b\u043e\u0433\u0430: <code>Atomizer<\/code>.<\/p>\n<p>  <\/p>\n<p>\u0410\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0435 \u043d\u0430 \u043c\u043e\u043c\u0435\u043d\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0441\u0442\u0430\u0442\u044c\u0438 \u0432\u0435\u0440\u0441\u0438\u0438 \u043f\u0430\u043a\u0435\u0442\u043e\u0432: <\/p>\n<p>  <\/p>\n<ul>\n<li><code>minimalist-notation 1.5.17<\/code> ;<\/li>\n<li><code>atomizer 3.6.2<\/code> .<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u041f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u043d\u0438\u0436\u0435 \u0441 <code>Atomizer<\/code> \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0437\u0434\u0435\u0441\u044c:<br \/>  <a href=\"https:\/\/pankajparashar-zz.github.io\/atomizer-web\/\">https:\/\/pankajparashar-zz.github.io\/atomizer-web\/<\/a> <\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u043d\u0438\u0436\u0435 \u0441 <code>MN<\/code> \u043c\u043e\u0436\u043d\u043e \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0437\u0434\u0435\u0441\u044c:<br \/>  <a href=\"https:\/\/viewer.minimalist-notation.org\/\">https:\/\/viewer.minimalist-notation.org\/<\/a> <\/p>\n<p>  <\/p>\n<p>\u0414\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u043f\u043e \u0432\u0441\u0435\u043c \u043f\u0440\u0435\u0434\u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u043c \u043f\u0440\u0435\u0441\u0435\u0442\u0430\u043c <code>MN<\/code> \u0437\u0434\u0435\u0441\u044c:<br \/>  <a href=\"https:\/\/styles.minimalist-notation.org\/\">https:\/\/styles.minimalist-notation.org\/<\/a> <\/p>\n<p>  <\/p>\n<hr\/>\n<p>  <\/p>\n<h2 id=\"atomizer-vs-mn-prostye-primery\">Atomizer vs MN. \u041f\u0440\u043e\u0441\u0442\u044b\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b<strong>##<\/strong><\/h2>\n<p>  <\/p>\n<p><strong>Atomizer<\/strong><\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;div class=&quot;D(f) Jc(c) Ai(c) H(100%) Fz(20vh) C(#0f0) C(#F00) Bgc(#f00) M(-10px) P(10px) Pstart(10%) Pos(a)&quot;&gt;...&lt;\/div&gt;<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"css\">.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; }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041d\u0430 \u0447\u0442\u043e \u044f \u043e\u0431\u0440\u0430\u0442\u0438\u043b \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0432 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0441 <code>Atomizer<\/code>:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u0430\u0431\u0431\u0440\u0435\u0432\u0438\u0430\u0442\u0443\u0440\u044b \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b <code>Emmet<\/code>;<\/li>\n<li>\u0438\u043c\u0435\u043d\u0430 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0432 \u043d\u043e\u0442\u0430\u0446\u0438\u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u044b \u043a\u0430\u043a \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u0438\u043c\u0435\u043d\u0443\u044e\u0442\u0441\u044f \u0430\u0431\u0431\u0440\u0435\u0432\u0438\u0430\u0442\u0443\u0440\u0430\u043c\u0438, \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0438\u043c\u0438\u0441\u044f \u0441 \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430;<\/li>\n<li>\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0441\u0442\u0438\u043b\u0435\u0439 \u0432 \u043d\u043e\u0442\u0430\u0446\u0438\u0438 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u044e\u0442\u0441\u044f \u0432 \u0441\u043a\u043e\u0431\u043a\u0438;<\/li>\n<li>\u0430\u0431\u0431\u0440\u0435\u0432\u0438\u0430\u0442\u0443\u0440\u0430 <code>Pstart<\/code> \u0434\u043b\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>padding-left<\/code> \u0434\u043b\u044f \u043c\u0435\u043d\u044f \u043d\u0435\u043e\u0436\u0438\u0434\u0430\u043d\u043d\u0430;<\/li>\n<li>\u0435\u0434\u0438\u043d\u0438\u0446\u044b \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f \u0432 \u043d\u043e\u0442\u0430\u0446\u0438\u0438 \u043d\u0435\u043b\u044c\u0437\u044f \u043f\u0440\u043e\u043f\u0443\u0441\u043a\u0430\u0442\u044c;<\/li>\n<li>\u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0435\u0434\u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u043c\u0438 \u0430\u0431\u0431\u0440\u0435\u0432\u0438\u0430\u0442\u0443\u0440\u0430\u043c\u0438, \u0442\u0430\u043a\u0438\u043c\u0438 \u043a\u0430\u043a, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440: <code>f - flex<\/code>, <code>c - center<\/code>, \u043e\u0434\u043d\u0430\u043a\u043e, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0442\u0430\u043a\u0430\u044f \u0437\u0430\u043f\u0438\u0441\u044c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043d\u0435 \u0431\u0443\u0434\u0435\u0442: <code>D(flex)<\/code>;<\/li>\n<li>\u043a\u043e\u0433\u0434\u0430 \u044f \u043f\u044b\u0442\u0430\u044e\u0441\u044c \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0446\u0432\u0435\u0442 \u0441\u0438\u043c\u0432\u043e\u043b\u0430\u043c\u0438 \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <code>#F00<\/code> \u2014 \u0432\u043c\u0435\u0441\u0442\u043e, <code>#f00<\/code>, \u0442\u043e \u0441\u0442\u0438\u043b\u0438 \u043d\u0435 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u044e\u0442\u0441\u044f, \u043b\u0438\u0431\u043e \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043a\u0430\u043a\u0430\u044f-\u0442\u043e \u043f\u0435\u0442\u0440\u0443\u0448\u043a\u0430\u2026 <\/li>\n<\/ul>\n<p>  <\/p>\n<p><strong>Minimalist-Notation<\/strong><\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;div class=&quot;dF jcC aiC h f20vh c0F0 bgcF00 m-10 p10 pl10% abs&quot;&gt;...&lt;\/div&gt;<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"css\">.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; }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041e\u0442\u043b\u0438\u0447\u0438\u044f: <\/p>\n<p>  <\/p>\n<ul>\n<li>\n<p>\u0434\u043b\u044f \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0430 \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u0445 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0430\u0431\u0431\u0440\u0435\u0432\u0438\u0430\u0442\u0443\u0440\u044b \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b <code>Emmet<\/code>, \u0437\u0430 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0432\u044f\u0437\u0430\u043d\u044b \u0438\u0441\u0442\u043e\u0440\u0438\u0447\u0435\u0441\u043a\u0438 \u0441 \u043c\u043e\u0438\u043c\u0438 \u043b\u0438\u0447\u043d\u044b\u043c\u0438 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0430\u043c\u0438, \u0447\u0430\u0441\u0442\u043e\u0442\u043e\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0441\u0442\u0438\u043b\u0435\u0439.<\/p>\n<p>  <\/p>\n<p>\u042d\u0442\u043e \u0441\u0432\u044f\u0437\u0430\u043d\u043e \u0435\u0449\u0451 \u0441 \u0442\u0435\u043c, \u0447\u0442\u043e \u043b\u0438\u0447\u043d\u043e \u044f \u0443\u0437\u043d\u0430\u043b \u043e \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043e\u0432\u0430\u043d\u0438\u0438 <code>Emmet<\/code> \u0438 <code>Atomizer<\/code> \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u043b \u043f\u0435\u0440\u0432\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e <code>MN<\/code>.<br \/>  \u041f\u0440\u0438\u043c\u0435\u0440\u044b:<br \/>  <code>f<\/code> \u2014 \u0432\u043c\u0435\u0441\u0442\u043e <code>fz<\/code> \u0434\u043b\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>font-size<\/code> \u2014 \u0438\u0431\u043e \u0440\u0430\u0437\u043c\u0435\u0440 \u0448\u0440\u0438\u0444\u0442\u0430 \u041c\u044b \u0437\u0430\u0434\u0430\u0435\u043c \u043e\u0447\u0435\u043d\u044c \u0447\u0430\u0441\u0442\u043e,<br \/>  <code>font<\/code> \u2014 \u0432\u043c\u0435\u0441\u0442\u043e <code>f<\/code> \u0434\u043b\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>font<\/code> \u2014 \u0438\u0431\u043e \u041c\u044b \u0440\u0435\u0434\u043a\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0435\u0433\u043e \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e,<br \/>  <code>abs<\/code> \u2014 \u0432\u043c\u0435\u0441\u0442\u043e <code>posA<\/code> \u0434\u043b\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f <code>position: absolute<\/code>, \u0445\u043e\u0442\u044f <code>posA<\/code> \u0442\u043e\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c;<\/p>\n<p>  <\/li>\n<li>\n<p>\u0438\u043c\u0435\u043d\u0430 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0432 \u043d\u043e\u0442\u0430\u0446\u0438\u0438 \u0438\u043c\u0435\u043d\u0443\u044e\u0442\u0441\u044f \u0430\u0431\u0431\u0440\u0435\u0432\u0438\u0430\u0442\u0443\u0440\u0430\u043c\u0438 \u0432 \u043d\u0438\u0436\u043d\u0435\u043c \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0435; <\/p>\n<p>  <\/li>\n<li>\n<p>\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0441\u0442\u0438\u043b\u0435\u0439 \u0432 \u043d\u043e\u0442\u0430\u0446\u0438\u0438 \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0442\u0441\u044f \u0441 \u043b\u044e\u0431\u043e\u0433\u043e \u0441\u0438\u043c\u0432\u043e\u043b\u0430 \u043e\u0442\u043b\u0438\u0447\u043d\u043e\u0433\u043e \u043e\u0442 \u043b\u0430\u0442\u0438\u043d\u0441\u043a\u0438\u0445 \u0431\u0443\u043a\u0432 \u0432 \u043d\u0438\u0436\u043d\u0435\u043c \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0435.<\/p>\n<p>  <\/p>\n<p>\u041a\u043e\u043d\u0447\u0435\u043d\u043e \u0438 \u0437\u0434\u0435\u0441\u044c \u0432 \u043d\u043e\u0442\u0430\u0446\u0438\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0432 \u0441\u043a\u043e\u0431\u043a\u0438: <code>d(F)<\/code> \u2014 \u043d\u043e \u0441\u043a\u043e\u0431\u043a\u0438<br \/>  \u0432 MN \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u044b \u043d\u0435 \u0434\u043b\u044f \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0438\u0437\u0430\u0446\u0438\u0438, \u0430 \u0434\u043b\u044f \u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u043a\u0438 \u043f\u043e\u0434\u0441\u0442\u0440\u043e\u043a \u043d\u043e\u0442\u0430\u0446\u0438\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440,<br \/>  \u044d\u0442\u0438 \u0437\u0430\u043f\u0438\u0441\u0438 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b: <code>p(l10|r15)<\/code> === <code>pl10 pr15<\/code>. <\/p>\n<p>  <\/p>\n<p>\u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u043d\u0435\u0442 \u0441\u043c\u044b\u0441\u043b\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043a\u043e\u0431\u043a\u0438 \u0431\u0435\u0437 \u043d\u0443\u0436\u0434\u044b, \u0438\u0431\u043e \u044d\u0442\u043e \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u0442 \u043a\u043e\u043d\u0435\u0447\u043d\u044b\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u043a\u043e\u0434\u0430. <\/p>\n<p>  <\/li>\n<li>\n<p>\u0435\u0434\u0438\u043d\u0438\u0446\u044b \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f \u043d\u0435 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0447\u0430\u0441\u0442\u044c\u044e \u0431\u0430\u0437\u043e\u0432\u043e\u0439 \u043d\u043e\u0442\u0430\u0446\u0438\u0438. <\/p>\n<p>  <\/p>\n<p>\u041d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u044f \u0435\u0434\u0438\u043d\u0438\u0446 \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u0437\u0430\u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0434\u043b\u044f \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0433\u043e \u0438\u043c\u0435\u043d\u0438 \u0432 \u043d\u043e\u0442\u0430\u0446\u0438\u0438. <\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0430 \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u0445 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u0435 \u0435\u0434\u0438\u043d\u0438\u0446 \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u043c, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b \u0432\u0430\u0440\u0438\u0430\u0446\u0438\u0438:<br \/>  <code>f14px<\/code> == <code>f14<\/code>,<br \/>  <code>h100%<\/code> == <code>h<\/code>,<br \/>  <code>h10px<\/code> == <code>h10<\/code>. <\/p>\n<p>  <\/li>\n<li>\n<p>\u0432 MN \u0442\u0430\u043a\u0436\u0435 \u0438\u043c\u0435\u044e\u0442\u0441\u044f \u043f\u0440\u0435\u0434\u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0435 \u0430\u0431\u0431\u0440\u0435\u0432\u0438\u0430\u0442\u0443\u0440\u044b \u0434\u043b\u044f \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440,<br \/>  <code>F - flex<\/code>, <code>C - center<\/code> \u2014 \u0445\u043e\u0442\u044f \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u043b\u043d\u044b\u0435 \u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u0438\u044f.<br \/>  \u0412\u044b \u0438\u043c\u0435\u0435\u0442\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u043c\u0435\u0441\u0442\u043e, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u044d\u0442\u0438\u0445 \u0430\u0431\u0431\u0440\u0435\u0432\u0438\u0430\u0442\u0443\u0440:<br \/>  <code>dF dIB jcC aiC<\/code> \u2014 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u0432\u0430\u0440\u0438\u0430\u0446\u0438\u0438 \u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u0438\u0439:<br \/>  <code>dFlex dInlineBlock jcCenter aiCenter<\/code>,<br \/>  <code>d_flex d_inline-block jc_center ai_center<\/code> .<br \/>  \u0412 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0435 \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u0445 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0437\u0430\u043f\u0438\u0441\u044c \u0434\u043b\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0438\u0437 \u0444\u043e\u0440\u043c\u0430\u0442\u0430 <code>camelCase<\/code><br \/>  \u043f\u0440\u043e\u0441\u0442\u043e \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0432 \u0444\u043e\u0440\u043c\u0430\u0442 <code>kebabCase<\/code>, \u0430 \u043d\u0438\u0436\u043d\u0438\u0438 \u043f\u0440\u043e\u0447\u0435\u0440\u043a\u0438 \u0437\u0430\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u043d\u0430 \u043f\u0440\u043e\u0431\u0435\u043b\u044b; <\/p>\n<p>  <\/li>\n<li>\n<p>\u0434\u043b\u044f \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0430 \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u0445 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u044b \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043a\u0430\u043a \u041c\u044b \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c, \u0434\u043b\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>height<\/code> (<code>h<\/code>) \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0440\u0430\u0432\u043d\u043e <code>100%<\/code> .<br \/>  \u0415\u0441\u043b\u0438 \u041c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435: <code>h40<\/code> \u2014 \u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435: <\/p>\n<p>  <\/p>\n<pre><code class=\"css\">.h40 {height: 40px}<\/code><\/pre>\n<p>  <\/li>\n<li>\n<p>\u0414\u043b\u044f \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u044f \u0446\u0432\u0435\u0442\u0430 \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0440\u0435\u0448\u0435\u0442\u043a\u0430 (<code>#<\/code>). <\/p>\n<p>  <\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0411\u043e\u043b\u0435\u0435 \u0442\u043e\u0433\u043e, \u0440\u0435\u0448\u0435\u0442\u043a\u0430 (#) \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u043b\u0443\u0436\u0435\u0431\u043d\u044b\u043c \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u043c, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u043c \u0434\u043b\u044f \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u0445 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u0432, \u043e \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0412\u044b \u0443\u0437\u043d\u0430\u0435\u0442\u0435 \u043d\u0438\u0436\u0435. <\/p>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u0412\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u0435 \u0440\u0435\u0448\u0435\u0442\u043a\u0443, \u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0435 \u043d\u0435 \u0442\u043e, \u0447\u0435\u0433\u043e, \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e, \u043e\u0436\u0438\u0434\u0430\u0435\u0442\u0435: <\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;div class=&quot;c#0F0&quot;&gt;...&lt;\/div&gt;<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"css\">.c\\#0F0#0F0 {color: #000}<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u0440\u0435\u0448\u0435\u0442\u043a\u0430 \u0432\u0441\u0451 \u0436\u0435 \u043d\u0443\u0436\u043d\u0430, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043b\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>outline<\/code>.<br \/>  \u0422\u043e\u0433\u0434\u0430 \u0441\u043b\u0443\u0436\u0435\u0431\u043d\u044b\u0435 \u0441\u0438\u043c\u0432\u043e\u043b\u044b \u0432 \u043d\u043e\u0442\u0430\u0446\u0438\u0438 \u043d\u0443\u0436\u043d\u043e \u044d\u043a\u0440\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c: <\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;div class=&quot;ol_thick_double_\\#32a1ce&quot;&gt;...&lt;\/div&gt;<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"css\">.ol_thick_double_\\\\\\#32a1ce {outline: thick double #32a1ce}<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412 <code>MN<\/code> \u0434\u043b\u044f \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u0445 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 (<code>c, bc, olc, fill, stroke, bg, bgc, temc, tdc<\/code>) \u0446\u0432\u0435\u0442\u0430 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u0432\u0430\u0440\u0438\u0430\u0446\u0438\u044f\u043c\u0438 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432 \u2014 \u043e\u0431 \u044d\u0442\u043e\u043c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u0431\u0443\u0434\u0435\u0442 \u043d\u0438\u0436\u0435.<\/p>\n<p>  <\/p>\n<ul>\n<li>\u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0434\u043b\u044f \u0430\u0431\u0431\u0440\u0435\u0432\u0438\u0430\u0442\u0443\u0440 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0438\u0440\u0443\u0435\u043c\u044b\u043c\u0438 \u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u044e\u0442\u0441\u044f \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0438\u0437 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 <code>minimalist-notation\/presets\/styles<\/code>. <\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0412\u044b \u0438\u043c\u0435\u0435\u0442\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c <code>MN<\/code> \u043f\u043e\u0434 \u0441\u0432\u043e\u0438 \u043d\u0443\u0436\u0434\u044b, \u043f\u0443\u0442\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0445 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432: <\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">\/\/ \u0434\u043b\u044f \u0441\u0432\u043e\u0439c\u0442\u0432\u0430 &quot;padding&quot; mn('p', (params) =&gt; {   return {     style: {       padding: (params.num || '0') + (params.unit || 'px'),     },   }; });  \/\/ \u0434\u043b\u044f \u0441\u0432\u043e\u0439c\u0442\u0432\u0430 &quot;padding-left&quot; mn('pl', (params) =&gt; {   return {     style: {       paddingLeft: (params.num || '0') + (params.unit || 'px'),     },   }; });  \/\/ \u0434\u043b\u044f \u0441\u0432\u043e\u0439c\u0442\u0432\u0430 &quot;color&quot; mn('c', (params) =&gt; {   return !params.negative &amp;&amp; {     style: {       color: mn.utils.color(params.value || '0'),     },   }; }, '^(([A-Z][a-z][A-Za-z]+):camel|([A-F0-9]+):color):value(.*)?$');<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440\u044b \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 <code>MN<\/code> \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0434\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438:<br \/>  <a href=\"https:\/\/github.com\/mr-amirka\/minimalist-notation\/presets\">https:\/\/github.com\/mr-amirka\/minimalist-notation\/presets<\/a> <\/p>\n<p>  <\/p>\n<p>\u041a\u0430\u043a \u0437\u0430 \u0441\u0435\u0431\u044f \u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u0441\u0430\u043c\u043e \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438, <strong>\u043c\u0438\u043d\u0438\u043c\u0430\u043b\u0438\u0437\u043c<\/strong> \u2014 \u0437\u0434\u0435\u0441\u044c \u0433\u043b\u0430\u0432\u043d\u043e\u0435,<br \/>  \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u043e\u0442\u0430\u0446\u0438\u044f \u0443\u0441\u0442\u0440\u043e\u0435\u043d\u0430 \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u041d\u0430\u043c \u043d\u0435 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043b\u043e\u0441\u044c \u043f\u0438\u0441\u0430\u0442\u044c \u043c\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430<br \/>  \u0438 \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0442\u044c \u043f\u0440\u043e\u0447\u0438\u0435 \u0438\u0437\u0431\u044b\u0442\u043e\u0447\u043d\u044b\u0435 \u0442\u0435\u043b\u043e\u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<hr\/>\n<p>  <\/p>\n<h2 id=\"primery-nemnogo-slozhnee\">\u041f\u0440\u0438\u043c\u0435\u0440\u044b \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0441\u043b\u043e\u0436\u043d\u0435\u0435<\/h2>\n<p>  <\/p>\n<h3 id=\"atomizer-vs-mn-flag-important\">Atomizer vs MN. \u0424\u043b\u0430\u0433 !important<\/h3>\n<p>  <\/p>\n<p><strong>Atomizer<\/strong><\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;div class=&quot;D(f)! C(#0f0)!&quot;&gt;...&lt;\/div&gt;<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"css\">.D\\(f\\)\\! {   display: flex !important; } .C\\(\\#0f0\\)\\! {   color: #0f0 !important; }<\/code><\/pre>\n<p>  <\/p>\n<p><strong>Minimalist-Notation<\/strong><\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;div class=&quot;dF-i c0F0-i&quot;&gt;...&lt;\/div&gt;<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"css\">.dF-i {   display: flex!important; } .c0F0-i {   color: #0f0!important; }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412 <code>MN<\/code> \u0434\u043b\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0444\u043b\u0430\u0433\u0430 <code>!important<\/code> \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0441\u0438\u043c\u0432\u043e\u043b <code>!<\/code>, \u043f\u043e\u0442\u043e\u043c\u0443-\u0447\u0442\u043e \u044d\u0442\u043e\u0442 \u0441\u043b\u0443\u0436\u0435\u0431\u043d\u044b\u0439 \u0441\u0438\u043c\u0432\u043e\u043b \u0443\u0436\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0432 \u043d\u043e\u0442\u0430\u0446\u0438\u0438 \u0434\u043b\u044f <strong>\u0440\u0435\u0432\u0435\u0440\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u043e\u0434\u0441\u0442\u0440\u043e\u043a<\/strong>. <\/p>\n<p>  <\/p>\n<hr\/>\n<p>  <\/p>\n<h3 id=\"gruppirovki-i-reversirovanie-podstrok-\">\u0413\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u043a\u0438 \u0438 \u0440\u0435\u0432\u0435\u0440\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u043e\u0434\u0441\u0442\u0440\u043e\u043a (!)<\/h3>\n<p>  <\/p>\n<p>\u0412\u043e\u0437\u044c\u043c\u0435\u043c \u0442\u0430\u043a\u0443\u044e \u0437\u0430\u043f\u0438\u0441\u044c:<\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;div class=&quot;cF:hover&gt;.item&quot;&gt;...&lt;\/div&gt;<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"css\">.cF\\:hover\\&gt;\\.item:hover .item {   color: #fff; }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u041c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u0438\u043c\u0432\u043e\u043b <code>!<\/code> \u043f\u043e\u0441\u043b\u0435 <code>:hover<\/code>, \u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;div class=&quot;cF:hover!&gt;.item&quot;&gt;...&lt;\/div&gt;<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"css\">.cF\\:hover\\!\\&gt;\\.item .item:hover {   color: #fff; }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0417\u0434\u0435\u0441\u044c \u043f\u0441\u0435\u0432\u0434\u043e\u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440 <code>hover<\/code> \u043f\u0435\u0440\u0435\u043c\u0435\u0441\u0442\u0438\u043b\u0441\u044f \u043e\u0442 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043a \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u043c\u0443.<br \/>  \u042d\u0442\u043e\u0442 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u0439 \u0434\u043b\u044f \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e\u0441\u0442\u0438 \u0441\u043f\u043e\u0441\u043e\u0431 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0440\u0435\u0432\u0435\u0440\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0431\u0435\u0441\u043f\u043e\u043b\u0435\u0437\u0435\u043d, \u0438\u0431\u043e \u0442\u0430\u043a\u043e\u0433\u043e \u0436\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u0438 \u0434\u0440\u0443\u0433\u0438\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c: <\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;div class=&quot;cF&gt;.item:hover&quot;&gt;...&lt;\/div&gt;<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"css\">.cF\\&gt;\\.item\\:hover .item:hover {   color: #fff; }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041e\u0434\u043d\u0430\u043a\u043e <strong>\u0440\u0435\u0432\u0435\u0440\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435<\/strong> \u043c\u043e\u0436\u0435\u0442 \u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u0432\u0435\u0441\u044c\u043c\u0430 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u043c \u0434\u043b\u044f \u0441\u043e\u043a\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u0437\u0430\u043f\u0438\u0441\u0438 \u0432 \u043a\u043e\u043c\u0431\u0438\u043d\u0430\u0446\u0438\u0438 \u0441 <strong>\u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u043a\u0430\u043c\u0438<\/strong>. <\/p>\n<p>  <\/p>\n<p>\u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u0447\u0442\u043e \u041c\u044b \u0432\u0435\u0440\u0441\u0442\u0430\u0435\u043c \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0441\u0430\u0439\u0442 \u0431\u0435\u0437 \u0448\u0430\u0431\u043b\u043e\u043d\u0438\u0437\u0430\u0442\u043e\u0440\u043e\u0432 \u0438 \u0431\u0435\u0437 React \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u2014 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u044d\u0442\u043e \u043b\u0435\u043d\u0434\u0438\u043d\u0433. <\/p>\n<p>  <\/p>\n<p>\u041c\u044b \u0438\u043c\u0435\u0435\u043c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u044e\u0442\u0441\u044f \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0435 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b:<\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;ul class=&quot;m p dBlock&quot;&gt;   &lt;li class=&quot;mb5 dBlock&quot;&gt;     &lt;a class=&quot;c0 c0:hover tdNone p5&quot;&gt;...&lt;\/a&gt;   &lt;\/li&gt;   &lt;li class=&quot;mb5 dBlock&quot;&gt;     &lt;a class=&quot;c0 c0:hover tdNone p5&quot;&gt;...&lt;\/a&gt;   &lt;\/li&gt;   &lt;li class=&quot;mb5 dBlock&quot;&gt;     &lt;a class=&quot;c0 c0:hover tdNone p5&quot;&gt;...&lt;\/a&gt;   &lt;\/li&gt;   ... &lt;\/ul&gt;<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"css\">.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; }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041c\u044b \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u043c, \u0447\u0442\u043e \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043a\u043b\u0430\u0441\u0441\u044b \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0443\u0442\u043e\u043c\u0438\u0442\u0435\u043b\u044c\u043d\u043e, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0435\u0441\u043b\u0438 \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u041c\u044b \u0431\u0443\u0434\u0435\u043c \u0447\u0442\u043e-\u0442\u043e \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c. <\/p>\n<p>  <\/p>\n<p>\u041c\u044b \u043c\u043e\u0433\u043b\u0438 \u0431\u044b \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u0434 \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u043a\u043e\u0440\u043e\u0447\u0435, \u0438 \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u0432 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u043f\u0440\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u041d\u0430\u043c \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u043b\u043e\u0441\u044c \u0432\u043d\u043e\u0441\u0438\u0442\u044c \u043c\u0435\u043d\u044c\u0448\u0435 \u043f\u0440\u0430\u0432\u043e\u043a. <\/p>\n<p>  <\/p>\n<p>\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u043e \u0448\u0430\u0433\u0430\u043c \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u0441\u043f\u043e\u0441\u043e\u0431\u044b. <\/p>\n<p>  <\/p>\n<p>\u0412\u044b\u043d\u0435\u0441\u0435\u043c \u0432\u0441\u044e \u043d\u043e\u0442\u0430\u0446\u0438\u044e \u0432 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442:<\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;ul class=&quot;m p dBlock mb5&gt;li dBlock&gt;li c0&gt;a c0&gt;a:hover tdNone&gt;a p5&gt;a&quot;&gt;   &lt;li&gt;     &lt;a&gt;...&lt;\/a&gt;   &lt;\/li&gt;   &lt;li&gt;     &lt;a&gt;...&lt;\/a&gt;   &lt;\/li&gt;   &lt;li&gt;     &lt;a&gt;...&lt;\/a&gt;   &lt;\/li&gt;   ... &lt;\/ul&gt;<\/code><\/pre>\n<p>  <\/p>\n<p>\u042d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043f\u0440\u0438\u043a\u043e\u043b\u044c\u043d\u043e, \u043d\u043e \u0435\u0441\u043b\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043c\u043d\u043e\u0433\u043e, \u0438\u043b\u0438 \u0435\u0441\u043b\u0438 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0431\u0443\u0434\u0443\u0442 \u0431\u043e\u043b\u0435\u0435 \u0434\u043b\u0438\u043d\u043d\u044b\u0435, \u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0433\u0440\u043e\u043c\u043e\u0437\u0434\u043a\u043e \u0438 \u043c\u0430\u043b\u043e \u0447\u0438\u0442\u0430\u0435\u043c\u043e.<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u041c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0435\u0449\u0451 \u043e\u0434\u0438\u043d \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u0441\u043f\u0438\u0441\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u043c\u0435\u0435\u0442 \u043e\u0442\u0441\u0442\u0443\u043f \u0432 10 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u0441\u043b\u0435\u0432\u0430, \u0430 \u0441\u0441\u044b\u043b\u043a\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u043d\u0435\u0433\u043e \u0438\u043c\u0435\u044e\u0442 \u043f\u043e\u0434\u0447\u0435\u0440\u043a\u0438\u0432\u0430\u043d\u0438\u0435 \u0438 \u043a\u0440\u0430\u0441\u043d\u044b\u0439 \u0446\u0432\u0435\u0442. <\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043a\u0443\u0440\u0441\u043e\u0440\u0430 \u043d\u0430 \u0441\u0441\u044b\u043b\u043a\u0443, \u043e\u043d\u0430 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0437\u0435\u043b\u0435\u043d\u043e\u0439, \u0430 \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u2014 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0441\u0438\u043d\u0435\u0439.<\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;ul class=&quot;   m p dBlock   mb5&gt;li dBlock&gt;li   p5&gt;a tdNone&gt;1li&gt;1a c0&gt;1li&gt;1a c0&gt;1li&gt;1a:hover   m&gt;ul p&gt;ul dBlock&gt;ul pl10&gt;1li&gt;1ul   tdUnderline&gt;1li&gt;1ul&gt;1li&gt;1a   cRed&gt;1li&gt;1ul&gt;1li&gt;1a   cGreen&gt;1li&gt;1ul&gt;1li&gt;1a:hover   cBlue&gt;1li&gt;1ul&gt;1li&gt;1a:active &quot;&gt;   &lt;li&gt;     &lt;a&gt;...&lt;\/a&gt;   &lt;\/li&gt;   &lt;li&gt;     &lt;a&gt;...&lt;\/a&gt;   &lt;\/li&gt;   &lt;li&gt;     &lt;a&gt;...&lt;\/a&gt;     &lt;ul&gt;       &lt;li&gt;         &lt;a&gt;...&lt;\/a&gt;       &lt;\/li&gt;       ...     &lt;\/ul&gt;   &lt;\/li&gt;   ... &lt;\/ul&gt;<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u0427\u0438\u0441\u043b\u043e \u043f\u0435\u0440\u0435\u0434 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u043c<\/strong> (<code>1<\/code>) \u043f\u0440\u043e\u0441\u0442\u043e \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0432\u0435\u0442 \u043d\u0430 \u0441\u0442\u0440\u043e\u0433\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u0443\u044e <strong>\u0433\u043b\u0443\u0431\u0438\u043d\u0443 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u0438<\/strong> \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430. <\/p>\n<p>  <\/p>\n<p>\u041a\u0441\u0442\u0430\u0442\u0438, \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435: \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b \u0441 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u043c\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0432 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u043c CSS \u043a\u043e\u0434\u0435 \u0433\u0440\u0443\u043f\u043f\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0432\u043c\u0435\u0441\u0442\u0435 \u2014 \u0447\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043c\u0438\u043d\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u043e\u0431\u044a\u0451\u043c \u043d\u0430 \u0432\u044b\u0445\u043e\u0434\u0435.<\/p>\n<p>  <\/p>\n<p>\u0414\u0443\u043c\u0430\u044e, \u044d\u0442\u043e\u0433\u043e \u0434\u043b\u044f \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e\u0441\u0442\u0438 \u041d\u0430\u043c \u043f\u043e\u043a\u0430 \u0445\u0432\u0430\u0442\u0438\u0442. <\/p>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c <strong>\u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u043a\u0438<\/strong>:<\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;ul class=&quot;   (m|p|dBlock)(|&gt;ul) (mb5|dBlock)&gt;li   p5&gt;a tdNone&gt;1li&gt;1a c0&gt;1li&gt;1a(|:hover)   pl10&gt;1li&gt;1ul   (tdUnderline|cRed)&gt;1li&gt;1ul&gt;1li&gt;1a   cGreen&gt;1li&gt;1ul&gt;1li&gt;1a:hover   cBlue&gt;1li&gt;1ul&gt;1li&gt;1a:active &quot;&gt;   &lt;li&gt;     &lt;a&gt;...&lt;\/a&gt;   &lt;\/li&gt;   &lt;li&gt;     &lt;a&gt;...&lt;\/a&gt;   &lt;\/li&gt;   &lt;li&gt;     &lt;a&gt;...&lt;\/a&gt;     &lt;ul&gt;       &lt;li&gt;         &lt;a&gt;...&lt;\/a&gt;       &lt;\/li&gt;       ...     &lt;\/ul&gt;   &lt;\/li&gt;   ... &lt;\/ul&gt;<\/code><\/pre>\n<p>  <\/p>\n<p>\u0417\u0434\u0435\u0441\u044c <strong>\u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u043a\u0438<\/strong> \u041d\u0430\u043c \u043d\u0435 \u0441\u0438\u043b\u044c\u043d\u043e \u043f\u043e\u043c\u043e\u0433\u043b\u0438\u2026 <\/p>\n<p>  <\/p>\n<p>\u0412\u043e\u0442 \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0435\u0449\u0451 \u0438 <strong>\u0440\u0435\u0432\u0435\u0440\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435<\/strong>:<\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;ul class=&quot;   (m|p|dBlock)(|&gt;ul)   (mb5|dBlock)&gt;li p5&gt;a   (tdNone|c0(|:hover!))&gt;1li&gt;1a   pl10&gt;1li&gt;1ul   (tdUnderline|c(Red|Green:hover!|Blue:active!))&gt;1li&gt;1ul&gt;1li&gt;1a &quot;&gt;   &lt;li&gt;     &lt;a&gt;...&lt;\/a&gt;   &lt;\/li&gt;   &lt;li&gt;     &lt;a&gt;...&lt;\/a&gt;   &lt;\/li&gt;   &lt;li&gt;     &lt;a&gt;...&lt;\/a&gt;     &lt;ul&gt;       &lt;li&gt;         &lt;a&gt;...&lt;\/a&gt;       &lt;\/li&gt;       ...     &lt;\/ul&gt;   &lt;\/li&gt;   ... &lt;\/ul&gt;<\/code><\/pre>\n<p>  <\/p>\n<p>\u0417\u0430\u0431\u0430\u0432\u043d\u043e, \u043d\u0435 \u043f\u0440\u0430\u0432\u0434\u0430 \u043b\u0438? <\/p>\n<p>  <\/p>\n<p>\u0425\u043e\u0440\u043e\u0448\u043e. \u0421\u043b\u0435\u0433\u043a\u0430 \u043f\u043e\u0438\u0433\u0440\u0430\u0435\u043c \u0441 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u044f\u043c\u0438 \u0438 \u0437\u0430\u043c\u0435\u043d\u0438\u043c \u0438\u043c\u0435\u043d\u0430 \u043f\u0441\u0435\u0432\u0434\u043e\u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u043d\u0430 \u043a\u0440\u0430\u0442\u043a\u0438\u0435 \u0441\u0438\u043d\u043e\u043d\u0438\u043c\u044b:<\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;ul class=&quot;   (m|p|dB)(|&gt;ul)   (mb5|dB)&gt;li   p5&gt;a   (tdN|c0(|:h!))&gt;2a   pl10&gt;2ul   (tdU|c(Red|Green:h!|Blue:a!))&gt;4a &quot;&gt;   &lt;li&gt;     &lt;a&gt;...&lt;\/a&gt;   &lt;\/li&gt;   &lt;li&gt;     &lt;a&gt;...&lt;\/a&gt;   &lt;\/li&gt;   &lt;li&gt;     &lt;a&gt;...&lt;\/a&gt;     &lt;ul&gt;       &lt;li&gt;         &lt;a&gt;...&lt;\/a&gt;       &lt;\/li&gt;       ...     &lt;\/ul&gt;   &lt;\/li&gt;   ... &lt;\/ul&gt;<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412\u0441\u0451-\u0442\u0430\u043a\u0438, \u0434\u043b\u044f \u043f\u0443\u0449\u0435\u0439 \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e\u0441\u0442\u0438 \u0437\u0430\u043c\u0435\u043d\u044e \u0438\u043c\u0435\u043d\u0430 \u0442\u0435\u0433\u043e\u0432 \u043d\u0430 \u043a\u043b\u0430\u0441\u0441\u044b:<\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;ul class=&quot;   ListA   (m|p|dB)(|.ListA)   pl10&gt;2.ListA   (mb5|dB)&gt;.ListA__Item   (p5&gt;|(tdN|c0(|:h!))&gt;2|(tdU|c(Red|Green:h!|Blue:a!))&gt;4).ListA__Link &quot;&gt;   &lt;li class=&quot;ListA__Item&quot;&gt;     &lt;a class=&quot;ListA__Link&quot;&gt;...&lt;\/a&gt;   &lt;\/li&gt;   &lt;li class=&quot;ListA__Item&quot;&gt;     &lt;a class=&quot;ListA__Link&quot;&gt;...&lt;\/a&gt;   &lt;\/li&gt;   &lt;li class=&quot;ListA__Item&quot;&gt;     &lt;a class=&quot;ListA__Link&quot;&gt;...&lt;\/a&gt;   &lt;\/li&gt;   &lt;li&gt;     &lt;a class=&quot;ListA__Link&quot;&gt;...&lt;\/a&gt;     &lt;ul class=&quot;ListA&quot;&gt;       &lt;li class=&quot;ListA__Item&quot;&gt;         &lt;a class=&quot;ListA__Link&quot;&gt;...&lt;\/a&gt;       &lt;\/li&gt;       ...     &lt;\/ul&gt;   &lt;\/li&gt;   ... &lt;\/ul&gt;<\/code><\/pre>\n<p>  <\/p>\n<p>\u0418\u0437\u0432\u0440\u0430\u0442\u0438\u043b\u0438\u0441\u044c \u041c\u044b \u0437\u043d\u0430\u0442\u043d\u043e!<\/p>\n<p>  <\/p>\n<p>\u041e\u0434\u043d\u0430\u043a\u043e, \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e, \u0434\u0440\u0443\u0437\u044c\u044f \u043c\u043e\u0438, \u044d\u0442\u0438\u043c\u0438 \u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u043a\u0430\u043c\u0438 \u0441\u0438\u043b\u044c\u043d\u043e \u043d\u0435 \u0443\u0432\u043b\u0435\u043a\u0430\u0442\u044c\u0441\u044f! <\/p>\n<p>  <\/p>\n<p>\u0417\u0434\u0435\u0441\u044c \u0443 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u043e\u0436\u0435\u0442 \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u0443\u0442\u044c \u0432\u043e\u043f\u0440\u043e\u0441, \u043a\u0430\u043a \u0436\u0435 \u041d\u0430\u043c \u0440\u0435\u0448\u0438\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u0441<br \/>  \u043d\u0435\u043e\u0434\u043d\u043e\u0440\u0430\u043d\u0433\u043e\u0432\u0430\u0441\u0442\u044c\u044e \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u0432? \u2014 \u0438\u0431\u043e, \u0435\u0441\u043b\u0438 \u041c\u044b \u0437\u0430\u0445\u043e\u0442\u0438\u043c \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c<br \/>  \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0438\u0437 \u044d\u0442\u043e\u0433\u043e \u0441\u043f\u0438\u0441\u043a\u0430, \u043d\u0430\u043c \u043c\u043e\u0433\u0443\u0442 \u043f\u043e\u043c\u0435\u0448\u0430\u0442\u044c \u0433\u0440\u0430\u0431\u043b\u0438 \u043f\u0435\u0440\u0435\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0438\u0445 \u0441\u0442\u0438\u043b\u0435\u0439. <\/p>\n<p>  <\/p>\n<p>\u041e\u0442\u0432\u0435\u0442: <\/p>\n<p>  <\/p>\n<p>\u041c\u044b, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u043e\u0436\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u043e \u0438\u043c\u0435\u043d\u043e\u0432\u0430\u0442\u044c \u043a\u043b\u0430\u0441\u0441\u044b \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u0443\u0440\u043e\u0432\u043d\u0435\u0439 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0438\u043d\u0430\u0447\u0435 \u0438 \u043d\u0435 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0432 \u043d\u043e\u0442\u0430\u0446\u0438\u0438 \u0433\u043b\u0443\u0431\u0438\u043d\u0443 \u0438\u0445 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u0438, \u0434\u0430\u0431\u044b \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b \u0432\u0441\u0435\u0445 \u0443\u0440\u043e\u0432\u043d\u0435\u0439 \u0438\u043c\u0435\u043b\u0438 \u0440\u0430\u0432\u043d\u044b\u0439 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442:<\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;ul class=&quot;   ListA   (m|p|dB)(|.ListA)   (mb5|dB)&gt;.ListA__Item   p5&gt;.ListA__Link   (tdN|c0(|:h!))&gt;.ListA__Link_level1    pl10&gt;.ListA_level2   (tdU|c(Red|Green:h!|Blue:a!))&gt;.ListA__Link_level2    bgF88&gt;.ListA__Item_substyle &quot;&gt;   &lt;li class=&quot;ListA__Item ListA__Item_level1 ListA__Item_substyle&quot;&gt;     &lt;a class=&quot;ListA__Link ListA__Link_level1&quot;&gt;...&lt;\/a&gt;   &lt;\/li&gt;   &lt;li class=&quot;ListA__Item ListA__Item_level1&quot;&gt;     &lt;a class=&quot;ListA__Link ListA__Link_level1&quot;&gt;...&lt;\/a&gt;   &lt;\/li&gt;   &lt;li class=&quot;ListA__Item ListA__Item_level1&quot;&gt;     &lt;a class=&quot;ListA__Link ListA__Link_level1&quot;&gt;...&lt;\/a&gt;   &lt;\/li&gt;   &lt;li&gt;     &lt;a class=&quot;ListA__Link&quot;&gt;...&lt;\/a&gt;     &lt;ul class=&quot;ListA ListA_level2&quot;&gt;       &lt;li class=&quot;ListA__Item ListA__Item_level2&quot;&gt;         &lt;a class=&quot;ListA__Link ListA__Link_level2&quot;&gt;...&lt;\/a&gt;       &lt;\/li&gt;       &lt;li class=&quot;ListA__Item ListA__Item_level2 ListA__Item_substyle&quot;&gt;         &lt;a class=&quot;ListA__Link ListA__Link_level2&quot;&gt;...&lt;\/a&gt;       &lt;\/li&gt;       ...       ...     &lt;\/ul&gt;   &lt;\/li&gt;   ... &lt;\/ul&gt;<\/code><\/pre>\n<p>  <\/p>\n<p>\u041c\u043d\u043e\u0433\u0438\u0435 \u043c\u043e\u0433\u0443\u0442 \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u0437\u0434\u0435\u0441\u044c \u041c\u044b \u0438\u043c\u0435\u0435\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u0440\u043e\u0436\u0434\u0430\u044e\u0442 \u043d\u0435\u0436\u0435\u043b\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0441\u0430\u0439\u0434-\u044d\u0444\u0444\u0435\u043a\u0442\u044b \u0441 \u043f\u0435\u0440\u0435\u043a\u0440\u044b\u0442\u0438\u044f\u043c\u0438 \u0441\u0442\u0438\u043b\u0435\u0439.<br \/>  \u0414\u0430. \u042d\u0442\u043e \u0442\u0430\u043a. \u0418 \u044d\u0442\u043e, \u043e\u0442\u0447\u0430\u0441\u0442\u0438, \u043f\u0440\u043e\u0442\u0438\u0432\u043e\u0440\u0435\u0447\u0438\u0442 \u0441\u0430\u043c\u043e\u0439 \u043c\u0435\u0442\u043e\u0434\u043e\u043b\u043e\u0433\u0438\u0438 Atomic CSS. <\/p>\n<p>  <\/p>\n<p>\u0422\u0435\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435, \u0435\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043d\u044e\u0430\u043d\u0441\u043e\u0432: <\/p>\n<p>  <\/p>\n<ul>\n<li>\u041d\u0430\u0441 \u043d\u0438\u043a\u0442\u043e \u043d\u0435 \u043f\u0440\u0438\u043d\u0443\u0436\u0434\u0430\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u0430\u043a\u0438\u0435 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438;<\/li>\n<li>\u041d\u0430\u0441 \u043d\u0438\u043a\u0442\u043e \u043d\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u0435\u0442, \u0438 \u043f\u0440\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u044d\u0442\u0438\u043c\u0438 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f\u043c\u0438;<\/li>\n<li>\u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u0432\u0435\u0441\u044c \u043a\u043e\u0434 \u043a\u0430\u043a \u043f\u0440\u0430\u0432\u0438\u043b\u043e \u0432\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f \u0443 \u041d\u0430\u0441 \u043d\u0430 \u043e\u0434\u043d\u043e\u043c \u044d\u043a\u0440\u0430\u043d\u0435 \u0438 \u043d\u0435 \u0440\u0430\u0437\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u043c\u0435\u0436\u0434\u0443 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u043e\u0439 \u0438 \u0441\u0442\u0438\u043b\u044f\u043c\u0438, \u041d\u0430\u043c \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u043f\u0440\u043e\u0449\u0435 \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u0442\u044c, &quot;\u0433\u0434\u0435 \u0437\u0430\u0440\u044b\u0442\u0430 \u0441\u043e\u0431\u0430\u043a\u0430&quot; \u0438 \u0438\u0441\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0435 \u0433\u0440\u0430\u0431\u043b\u0438 \u0441 \u043f\u0435\u0440\u0435\u043a\u0440\u044b\u0442\u0438\u044f\u043c\u0438 \u0441\u0442\u0438\u043b\u0435\u0439.<\/li>\n<\/ul>\n<p>  <\/p>\n<hr\/>\n<p>  <\/p>\n<h3 id=\"atomizer-vs-mn-psevdoklassy-i-psevdoelementy\">Atomizer vs MN. \u041f\u0441\u0435\u0432\u0434\u043e\u043a\u043b\u0430\u0441\u0441\u044b \u0438 \u043f\u0441\u0435\u0432\u0434\u043e\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b<\/h3>\n<p>  <\/p>\n<p>\u0427\u0438\u0441\u0442\u043e \u0440\u0430\u0434\u0438 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f, \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0443\u044e \u0432 <code>Atomizer<\/code> \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u0441\u0435\u0432\u0434\u043e\u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0438 \u043f\u0441\u0435\u0432\u0434\u043e\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432: <\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;div class=&quot;Bgc(#fff):h C(blue):a C(#0f0):hover D(n)::b&quot;&gt;...&lt;\/div&gt;<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"css\">.Bgc\\(\\#fff\\)\\:h:hover {   background-color: #fff; } .C\\(blue\\)\\:a:active {   color: blue; } .C\\(\\#0f0\\)\\:hover:hover {   color: #0f0; } .D\\(n\\) {   display: none; }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041c\u044b \u0432\u0438\u0434\u0438\u043c, \u0447\u0442\u043e <code>Atomizer<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u044e\u0437\u0430\u0442\u044c \u043a\u0430\u043a \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043b\u043d\u044b\u0435 \u0438\u043c\u0435\u043d\u0430 \u043f\u0441\u0435\u0432\u0434\u043e\u043a\u043b\u0430\u0441\u0441\u043e\u0432, \u0442\u0430\u043a \u0438 \u0438\u0445 \u043a\u043e\u0440\u043e\u0442\u043a\u0438\u0435 \u0441\u0438\u043d\u043e\u043d\u0438\u043c\u044b. <\/p>\n<p>  <\/p>\n<p>\u0412 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043e, \u0447\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0441\u0435\u0432\u0434\u043e\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b. <\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440: <code>b<\/code> \u0434\u043b\u044f <code>::before<\/code> <\/p>\n<p>  <\/p>\n<p>\u041d\u043e \u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u044f \u043a\u0430\u043a-\u0442\u043e \u0441\u0438\u043b\u044c\u043d\u043e \u0442\u0443\u043f\u0438\u043b, \u0438 \u043a\u0430\u043a \u043d\u0438 \u043f\u044b\u0442\u0430\u043b\u0441\u044f \u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043d\u044b\u0435 \u0432\u0430\u0440\u0438\u0430\u043d\u0446\u0438\u0438, \u043d\u0438 \u043e\u0434\u0438\u043d \u043f\u0440\u0438\u043c\u0435\u0440 \u043d\u0435 \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u043b. <\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f <code>D(n)::b<\/code> \u044f \u043e\u0436\u0438\u0434\u0430\u043b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435: <\/p>\n<p>  <\/p>\n<pre><code class=\"css\">.D\\(n\\)\\:\\:::before {   display: none; }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412 <code>MN<\/code> \u0436\u0435 \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0432\u0441\u0451 \u0442\u043e\u0436\u0435 \u0441\u0430\u043c\u043e\u0435: <\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;div class=&quot;bgcF:h cBlue:a c0F0:hover dN::before&quot;&gt;...&lt;\/div&gt;<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"css\">.bgcF\\:h:hover {   background-color: #fff; } .cBlue\\:a:active {   color: blue; } .c0F0\\:hover:hover {   color: #0f0; } .dN\\:\\:before::before {   display: none; }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u043e\u043c\u0438\u043c\u043e \u044d\u0442\u043e\u0433\u043e, \u041c\u044b \u0438\u043c\u0435\u0435\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0432\u043e\u043e\u0431\u0449\u0435 \u043b\u044e\u0431\u044b\u0435 \u043f\u0441\u0435\u0432\u0434\u043e\u043a\u043b\u0430\u0441\u0441\u044b \u0438 \u0441\u0435\u0432\u0434\u043e\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b\u0435 \u0438 \u043d\u0435\u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b\u0435 \u0432 CSS: <\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;div class=&quot;bgcF:hz cBlue::placeholder c0F0::-webkit-input-placeholder bgE:odd bt:first c:i&quot;&gt;...&lt;\/div&gt;<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"css\">.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; }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412 <code>MN<\/code> \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0441\u0435\u0432\u0434\u043e\u043a\u043b\u0430\u0441\u0441\u044b: <\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;div class=&quot;c:not[.anyClass] bg0A:not[tag[attr=value].class\\:pseudo] c88F4:n[13] c01:n[3n+1]&quot;&gt;...&lt;\/div&gt;<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"css\">.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); }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412 <code>MN<\/code> \u041c\u044b \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u043c \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0441\u0435\u0432\u0434\u043e\u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u043f\u043e\u0434\u0440\u044f\u0434: <\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;input   type=&quot;checkbox&quot;   class=&quot;mh20:not[.anyClass]:n[5n+2]:c:h&quot; \/&gt;<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"css\">.mh20\\:not\\[\\.anyClass\\]\\:n\\[5n\\+2\\]\\:c\\:h:not(.anyClass):nth-child(5n+2):checked:hover {   margin-left: 20px;   margin-right: 20px; }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412 <code>MN<\/code> \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 \u0441\u0438\u043d\u043e\u043d\u0438\u043c\u043e\u0432 \u0434\u043b\u044f \u043f\u0441\u0435\u0432\u0434\u043e\u043a\u043b\u0430\u0441\u0441\u043e\u0432.<br \/>  \u041f\u0440\u0438\u043c\u0435\u0440: <\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">mn.utils.extend(mn.states, {   foo: [':active'],   bar: ['.Bar_active', '.otherSelector'],   vasya: ['[data-name=vasya]'], });<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;div class=&quot;cRed:foo cGreen:bar cBlue:vasya&quot;&gt;...&lt;\/div&gt;<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"css\">.cRed\\:foo:active {   color: red; } .cGreen\\:bar.otherSelector,.cGreen\\:bar.Bar_active {   color: green; } .cBlue\\:vasya[data-name=vasya] {   color: blue; }<\/code><\/pre>\n<p>  <\/p>\n<hr\/>\n<p>  <\/p>\n<h3 id=\"atomizer-vs-mn-kombinatory\">Atomizer vs MN. \u041a\u043e\u043c\u0431\u0438\u043d\u0430\u0442\u043e\u0440\u044b<\/h3>\n<p>  <\/p>\n<p>\u0421\u0440\u0430\u0432\u043d\u0438\u043c \u043a\u0430\u0431\u0438\u043d\u0430\u0442\u043e\u0440\u044b.<\/p>\n<p>  <\/p>\n<p>&quot;The underscore character ( <code>_<\/code> )&quot; \u0432 <code>Atomizer<\/code>: <\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;div class=&quot;foo&quot;&gt;   &lt;div class=&quot;foo_D(n)&quot;&gt;&lt;\/div&gt; &lt;\/div&gt;<\/code><\/pre>\n<p>  <\/p>\n<p>\u0410\u043d\u0430\u043b\u043e\u0433 \u0432 <code>MN<\/code>: <\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;div class=&quot;foo&quot;&gt;   &lt;div class=&quot;dN&lt;.foo&quot;&gt;&lt;\/div&gt; &lt;\/div&gt;<\/code><\/pre>\n<p>  <\/p>\n<p>&quot;The right angle bracket character ( <code>&gt;<\/code> )&quot; \u0432 <code>Atomizer<\/code>: <\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;div class=&quot;foo&quot;&gt;   &lt;div class=&quot;foo&gt;D(n)&quot;&gt;&lt;\/div&gt; &lt;\/div&gt;<\/code><\/pre>\n<p>  <\/p>\n<p>\u0410\u043d\u0430\u043b\u043e\u0433 \u0432 <code>MN<\/code>: <\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;div class=&quot;foo&quot;&gt;   &lt;div class=&quot;dN&lt;1.foo&quot;&gt;&lt;\/div&gt; &lt;\/div&gt;<\/code><\/pre>\n<p>  <\/p>\n<p>&quot;The plus sign ( <code>+<\/code> )&quot; \u0432 <code>Atomizer<\/code>: <\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;div class=&quot;foo&quot;&gt;&lt;\/div&gt; &lt;div class=&quot;foo+D(n)&quot;&gt;&lt;\/div&gt;<\/code><\/pre>\n<p>  <\/p>\n<p>\u0410\u043d\u0430\u043b\u043e\u0433 \u0432 <code>MN<\/code>: <\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;div class=&quot;foo&quot;&gt;&lt;\/div&gt; &lt;div class=&quot;dN&lt;.foo+&quot;&gt;&lt;\/div&gt;<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u043e\u043c\u0438\u043c\u043e \u044d\u0442\u043e\u0433\u043e \u0432 <code>MN<\/code> \u043a\u043e\u043c\u0431\u0438\u043d\u0430\u0442\u043e\u0440 &quot;\u0441\u043e\u0441\u0435\u0434\u043d\u0438\u0439 \u0431\u0440\u0430\u0442&quot; ( <code>+<\/code> ) \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u043c \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0438: <\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;div class=&quot;dN+.foo&quot;&gt;&lt;\/div&gt; &lt;div class=&quot;foo&quot;&gt;&lt;\/div&gt;<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412 <code>MN<\/code> \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u0431\u0438\u043d\u0430\u0442\u043e\u0440 &quot;\u043e\u0431\u0449\u0438\u0439 \u0431\u0440\u0430\u0442&quot; ( <code>~<\/code> ): <\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;div class=&quot;foo&quot;&gt;&lt;\/div&gt; &lt;div class=&quot;dN&lt;.foo~&quot;&gt;&lt;\/div&gt; &lt;div class=&quot;dN&lt;.foo~&quot;&gt;&lt;\/div&gt;<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"css\">.foo~ .dN\\&lt;\\.foo\\~ {   display: none; }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0418 \u0432 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u043c \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0438: <\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;div class=&quot;dN~.foo&quot;&gt;&lt;\/div&gt; &lt;div class=&quot;foo&quot;&gt;&lt;\/div&gt; &lt;div class=&quot;foo&quot;&gt;&lt;\/div&gt;<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"css\">.dN\\~\\.foo~.foo {   display: none; }<\/code><\/pre>\n<p>  <\/p>\n<hr\/>\n<p>  <\/p>\n<h3 id=\"atomizer-vs-mn-kontekst\">Atomizer vs MN. \u041a\u043e\u043d\u0442\u0435\u043a\u0441\u0442<\/h3>\n<p>  <\/p>\n<p>\u0412 <code>Atomizer<\/code> \u0435\u0441\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c, \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c\u0430\u044f <code>Context class<\/code>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u0441\u043b\u0443\u0447\u0430\u044f\u0445, \u043a\u043e\u0433\u0434\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0441\u0442\u0438\u043b\u0435\u0439 \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430 \u043d\u0430 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435.<br \/>  \u041f\u0440\u0438\u043c\u0435\u0440: <\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;div class=&quot;foo bar any&quot;&gt;   &lt;div class=&quot;double&quot;&gt;     &lt;div class=&quot;foo_D(n) bar:h_D(n) any_D(n):h any_double_D(n)&quot;&gt;...&lt;\/div&gt;   &lt;\/div&gt; &lt;\/div&gt;<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"css\">.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; }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041d\u0430 \u0447\u0442\u043e \u044f \u043e\u0431\u0440\u0430\u0442\u0438\u043b \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0432 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435: <\/p>\n<p>  <\/p>\n<ul>\n<li>\u043d\u0435\u043b\u044c\u0437\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0438\u0437 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u043a\u043b\u0430\u0441\u0441\u043e\u0432, \u0447\u0442\u043e \u044f \u0438 \u043f\u043e\u043f\u044b\u0442\u0430\u043b\u0441\u044f \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0432 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c <code>any_double_D(n)<\/code>;<\/li>\n<li>\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f, \u0441\u0442\u0438\u043b\u0438 \u0432 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u043c CSS \u0432\u0441\u0451 \u0436\u0435 \u0447\u0430\u0441\u0442\u0438\u0447\u043d\u043e \u0433\u0440\u0443\u043f\u043f\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u043f\u043e \u043a\u0430\u043a\u043e\u043c\u0443-\u0442\u043e \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0443.<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0412 <code>MN<\/code>, \u043a\u0430\u043a, \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e, \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u043b\u0438 \u0434\u043e\u0433\u0430\u0434\u0430\u0442\u044c\u0441\u044f \u0438\u0437 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u0432\u044b\u0448\u0435, \u043c\u043e\u0436\u043d\u043e \u044e\u0437\u0430\u0442\u044c \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u0435 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b, \u043d\u043e \u0434\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u043e\u0436\u0435 \u0441\u0430\u043c\u043e\u0435:<\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;div class=&quot;foo bar any&quot;&gt;   &lt;div class=&quot;double&quot;&gt;     &lt;div class=&quot;dN&lt;.foo dN&lt;.bar:h dN:h&lt;.any dN&lt;.double&lt;.any&quot;&gt;...&lt;\/div&gt;   &lt;\/div&gt; &lt;\/div&gt;<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"css\">.foo .dN\\&lt;\\.foo,.bar:hover .dN\\&lt;\\.bar\\:h,.any .dN\\:h\\&lt;\\.any:hover,.any .double .dN\\&lt;\\.double\\&lt;\\.any {   display: none; }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u0440\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u0441\u0442\u0440\u043e\u0433\u0443\u044e \u0433\u043b\u0443\u0431\u0438\u043d\u0443 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u0438:<\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;div class=&quot;any&quot;&gt;   &lt;div class=&quot;double&quot;&gt;     &lt;div class=&quot;dN&lt;1.double&lt;1.any dN&lt;2.any&quot;&gt;...&lt;\/div&gt;   &lt;\/div&gt; &lt;\/div&gt;<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"css\">.any&gt;.double&gt;.dN\\&lt;1\\.double\\&lt;1\\.any,.any&gt;*&gt;.dN\\&lt;2\\.any {   display: none; }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0410\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0441\u0442\u0440\u0435\u043b\u043e\u0447\u043a\u0438 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0435 \u0432 \u043f\u0440\u043e\u0442\u0438\u0432\u043e\u043f\u043e\u043b\u043e\u0436\u043d\u0443\u044e \u0441\u0442\u043e\u0440\u043e\u043d\u0443, \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0441\u0442\u0438\u043b\u0438 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c:<\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;div class=&quot;dN&gt;2.double&quot;&gt;   &lt;div class=&quot;any&quot;&gt;     &lt;div class=&quot;double&quot;&gt;...&lt;\/div&gt;   &lt;\/div&gt; &lt;\/div&gt;<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"css\">.dN\\&gt;2\\.double&gt;*&gt;.double {   display: none; }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041c\u043e\u0436\u043d\u043e \u043a\u043e\u043c\u0431\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b \u0441 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u043c\u0438: <\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;div class=&quot;parent&quot;&gt;   &lt;div class=&quot;dN&lt;.parent&gt;2.double&quot;&gt;     &lt;div class=&quot;any&quot;&gt;       &lt;div class=&quot;double&quot;&gt;...&lt;\/div&gt;     &lt;\/div&gt;   &lt;\/div&gt; &lt;\/div&gt;<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"css\">.parent .dN\\&lt;\\.parent\\&gt;2\\.double&gt;*&gt;.double {   display: none; }<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;div class=&quot;dN&gt;.double&lt;.any&quot;&gt;   &lt;div class=&quot;any&quot;&gt;     &lt;div class=&quot;double&quot;&gt;...&lt;\/div&gt;   &lt;\/div&gt; &lt;\/div&gt;<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"css\">.dN\\&gt;\\.double\\&lt;\\.any .any .double {   display: none; }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041c\u043e\u0436\u043d\u043e \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0438\u0442\u044c \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0441\u0442\u0438\u043b\u044f \u043f\u0440\u0438 \u043d\u0430\u043b\u0438\u0447\u0438\u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430 \u043d\u0430 \u0442\u0435\u043a\u0443\u0449\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435: <\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;div class=&quot;bgF2.active[data-name=Gena]:h active&quot; data-name=&quot;Gena&quot;&gt;...&lt;\/div&gt; &lt;div class=&quot;dN#feedback&quot; id=&quot;feedback&quot;&gt;...&lt;\/div&gt; &lt;div class=&quot;o50.disable disable&quot;&gt;...&lt;\/div&gt;<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"css\">.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; }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041e\u0442\u043b\u0438\u0447\u0438\u044f: <\/p>\n<p>  <\/p>\n<ul>\n<li>\n<p>\u0432 \u043d\u043e\u0442\u0430\u0446\u0438\u0438 <code>MN<\/code> \u0441\u0442\u0440\u043e\u0433\u0438\u0439 \u043f\u043e\u0440\u044f\u0434\u043e\u043a.<br \/>  \u0424\u0440\u0430\u0433\u043c\u0435\u043d\u0442 \u0441\u0442\u0440\u043e\u043a\u0438 \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0449\u0438\u0439 \u0437\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441\u0442\u0438\u043b\u044f, \u043a\u0430\u043a \u043e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0441\u0443\u0442\u044c \u043d\u043e\u0442\u0430\u0446\u0438\u0438, \u0432\u0441\u0435\u0433\u0434\u0430 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0432\u043d\u0430\u0447\u0430\u043b\u0435, \u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u0437\u0430\u0442\u0435\u043c \u043d\u0430\u0447\u0438\u043d\u0430\u044f \u0441 \u043a\u0430\u043a\u043e\u0433\u043e-\u043d\u0438\u0431\u0443\u0434\u044c \u0441\u043b\u0443\u0436\u0435\u0431\u043d\u043e\u0433\u043e \u0441\u0438\u043c\u0432\u043e\u043b\u0430 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u0442\u043e\u0447\u043d\u044f\u0435\u0442 \u043a \u0447\u0435\u043c\u0443 \u0441\u0442\u0438\u043b\u0438 \u0438\u043c\u0435\u044e\u0442 \u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0435.<br \/>  \u0415\u0441\u043b\u0438 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0442\u0430\u043a\u043e\u0435 \u043f\u043e\u043d\u044f\u0442\u0438\u0435 \u043a\u0430\u043a <strong>&quot;\u0412\u0435\u043d\u0433\u0435\u0440\u0441\u043a\u0430\u044f \u043d\u043e\u0442\u0430\u0446\u0438\u044f&quot;<\/strong>, \u0442\u043e \u043c\u043d\u0435 \u0447\u0438\u0441\u0442\u043e \u0440\u0430\u0434\u0438 \u043d\u0430\u0431\u043b\u044e\u0434\u0435\u043d\u0438\u044f, \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u0437\u0434\u0435\u0441\u044c \u043d\u0430\u0437\u0432\u0430\u0442\u044c \u0442\u0430\u043a\u043e\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0437\u0430\u043f\u0438\u0441\u0438 <strong>&quot;\u0422\u044e\u0440\u043a\u0441\u043a\u043e\u0439 \u043d\u043e\u0442\u0430\u0446\u0438\u0435\u0439&quot;<\/strong>, \u0438\u0431\u043e \u0432 \u0442\u044e\u0440\u043a\u0441\u043a\u0438\u0445 \u044f\u0437\u044b\u043a\u0430\u0445 \u0441\u0443\u0442\u044c \u0441\u043b\u043e\u0432\u0430 \u0432\u0441\u0435\u0433\u0434\u0430 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432\u043d\u0430\u043b\u0430\u043b\u0435 \u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u0437\u0430\u0442\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0443\u0442\u043e\u0447\u043d\u044f\u044e\u0449\u0438\u0445 \u0441\u0443\u0444\u0444\u0438\u043a\u0441\u043e\u0432 \u0438 \u043e\u043a\u043e\u043d\u0447\u0430\u043d\u0438\u0439.<br \/>  \u0412 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u043c \u0441\u043c\u044b\u0441\u043b\u0435 \u044d\u0442\u043e \u0434\u0430\u0436\u0435 \u043f\u0440\u0435\u0434\u0435\u043b\u044c\u043d\u043e \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043f\u043e\u0434\u0430\u0447\u0438 \u043f\u043e\u0447\u0442\u0438 \u043b\u044e\u0431\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438, \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u044e\u0449\u0438\u0439\u0441\u044f \u0432 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u043c \u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u0438 \u043d\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0441\u0442\u0438.<br \/>  \u041f\u0440\u0438\u043c\u0435\u0440 \u0441\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0435\u043c:<br \/>  <code>2020-02-02 22:22:22<\/code> \u2014 \u043a\u0430\u0436\u0434\u043e\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0432 \u044d\u0442\u043e\u0439 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0431\u0443\u0434\u0435\u0442 \u0431\u0435\u0441\u043f\u043e\u043b\u0435\u0437\u043d\u043e \u0431\u0435\u0437 \u043f\u0440\u0435\u0434\u0448\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445;<br \/>  \u0410\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0441 \u0430\u0434\u0440\u0435\u0441\u043e\u043c: <code>Germany, 14193 Berlin, Kronberger Str. 12<\/code>;<\/p>\n<p>  <\/li>\n<li>\n<p>\u0432 <code>MN<\/code> \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u043b\u044c\u043d\u044b\u0435 \u0441\u043b\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b.<\/p>\n<p>  <\/li>\n<\/ul>\n<p>  <\/p>\n<hr\/>\n<p>  <\/p>\n<h2 id=\"atomizer-vs-mn-vychislyaemye-znacheniya\">Atomizer vs MN. \u0412\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f<\/h2>\n<p>  <\/p>\n<p>\u0412 <code>Atomizer<\/code> \u0435\u0441\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439.<br \/>  \u0414\u043b\u044f \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u0440\u043e\u0431\u0438: <\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;div class=&quot;W(1\/2) P(1\/3) M(1\/4) Start(1\/5) T(1\/6) Pstart(1\/7) Miw(1\/8)&quot;&gt;...&lt;\/div&gt;<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"css\">.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%; }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412 <code>MN<\/code> \u041c\u044b \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u0438 \u0434\u0440\u043e\u0431\u0438: <\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;div class=&quot;w1\/2 p1\/3 m1\/4 sl1\/5 st1\/6 pl1\/7 wmin1\/8&quot;&gt;...&lt;\/div&gt;<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"css\">.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%; }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041e\u0434\u043d\u0430\u043a\u043e \u0432 <code>Atomizer<\/code> \u043f\u043e\u0447\u0435\u043c\u0443-\u0442\u043e \u043d\u0435\u043b\u044c\u0437\u044f \u0432\u044b\u0447\u0435\u0441\u0442\u044c \u0438\u043b\u0438 \u0441\u043b\u043e\u0436\u0438\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441 \u0434\u0440\u043e\u0431\u044c\u044e.<br \/>  \u042f \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u043b: <\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;div class=&quot;W(1\/2-10) P(1\/3+5)&quot;&gt;...&lt;\/div&gt;<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"css\">.W\\(1\\\/2-10\\) {   width: 50%; }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412 <code>MN<\/code> \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0432\u044b\u0447\u0438\u0442\u0430\u0442\u044c \u0438 \u0441\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0441 \u0434\u0440\u043e\u0431\u044c\u044e, \u0438 \u044d\u0442\u043e \u0434\u043b\u044f \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0435\u0432 \u0432\u0435\u0441\u044c\u043c\u0430 \u043f\u043e\u043b\u0435\u0437\u043d\u0430\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c.<br \/>  \u041f\u0440\u0438\u043c\u0435\u0440: <\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;div class=&quot;w1\/2-10 p1\/3\\+5&quot;&gt;...&lt;\/div&gt;<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"css\">.w1\\\/2-10 {   width: calc(50% - 10px); } .p1\\\/3\\\\\\+5 {   padding: calc(33.33% + 5px); }<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u0417\u0430\u043c\u0435\u0447\u0430\u043d\u0438\u044f:<\/em> <\/p>\n<p>  <\/p>\n<ul>\n<li><em>\u0437\u0434\u0435\u0441\u044c &quot; <code>+<\/code> &quot; \u2014 \u044d\u0442\u043e \u0441 \u0441\u043b\u0443\u0436\u0435\u0431\u043d\u044b\u0439 \u0441\u0438\u043c\u0432\u043e\u043b-\u043a\u043e\u043c\u0431\u0438\u043d\u0430\u0442\u043e\u0440, \u043a\u0430\u043a \u0438 \u0432 \u043e\u0431\u044b\u0447\u043d\u043e\u043c CSS, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043e\u043d \u044d\u043a\u0440\u0430\u043d\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0441\u043b\u044d\u0448\u0435\u043c (<code>\\<\/code>).<\/em><\/li>\n<\/ul>\n<p>  <\/p>\n<hr\/>\n<p>  <\/p>\n<h2 id=\"atomizer-vs-mn-ustanovka-cvetov\">Atomizer vs MN. \u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0446\u0432\u0435\u0442\u043e\u0432<\/h2>\n<p>  <\/p>\n<p>\u0412 <code>Atomizer<\/code> \u0434\u043b\u044f \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u044f \u0446\u0432\u0435\u0442\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0448\u0435\u0441\u0442\u043d\u0430\u0434\u0446\u0430\u0442\u0435\u0440\u0438\u0447\u043d\u044b\u0435 \u0446\u0432\u0435\u0442\u0430 \u0438\u0437 3-\u0445 \u0438\u043b\u0438 6-\u0442\u0438 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432 \u0441 \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u043e\u043c <code>#<\/code> \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f. <\/p>\n<p>  <\/p>\n<p>\u0428\u0435\u0441\u0442\u043d\u0430\u0434\u0446\u0430\u0442\u0435\u0440\u0438\u0447\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0446\u0432\u0435\u0442\u043e\u0432 \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u044b \u0432 \u043d\u0438\u0436\u043d\u0435\u043c \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0435 (\u0442.\u0435., <code>#ccc<\/code>, \u0430 \u043d\u0435 <code>#CCC<\/code>). <\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u043a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442\u0430 \u043d\u0435\u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u0438 \u043a \u0448\u0435\u0441\u0442\u043d\u0430\u0434\u0446\u0430\u0442\u0435\u0440\u0438\u0447\u043d\u043e\u043c\u0443 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0442\u043e\u0447\u043a\u0443(<code>.<\/code>) \u0441 \u0434\u0435\u0441\u044f\u0442\u0438\u0447\u043d\u044b\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c. <\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440: <\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;div class=&quot;C(#fff) Bdc(#ff0000) Bgc(#00ff00.5)&quot;&gt;...&lt;\/div&gt;<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"css\">.C\\(\\#fff\\) {   color: #fff; } .Bdc\\(\\#ff0000\\) {   border-color: #ff0000; } .Bgc\\(\\#00ff00\\.5\\) {   background-color: rgba(0,255,0,.5); }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412 <code>MN<\/code> \u0434\u043b\u044f \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u044f \u0446\u0432\u0435\u0442\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0448\u0435\u0441\u0442\u043d\u0430\u0434\u0446\u0430\u0442\u0435\u0440\u0438\u0447\u043d\u044b\u0435 \u0446\u0432\u0435\u0442\u0430 \u043e\u0442 0 \u0434\u043e 8-\u043c\u0438 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432 \u0441 \u043a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442\u043e\u043c \u043d\u0435\u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u0438 \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e, \u043d\u043e \u0434\u043b\u044f \u043a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442\u0430 \u043d\u0435\u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u0438 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431: \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u0447\u043a\u0443(<code>.<\/code>) \u0441 \u0434\u0435\u0441\u044f\u0442\u0438\u0447\u043d\u044b\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c. <\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440: <\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;div class=&quot;c cFFF bcFF0000 bgc00FF00\\.5 \u0441FF00008 \u0441FF000080 cF bgc08 bgc0\\.5 bgc1234 bgc12348&quot;&gt;...&lt;\/div&gt;<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"css\">.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); }<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u0417\u0430\u043c\u0435\u0447\u0430\u043d\u0438\u044f:<\/em> <\/p>\n<p>  <\/p>\n<ul>\n<li><em>\u0437\u0434\u0435\u0441\u044c &quot; <code>.<\/code> &quot; \u2014 \u044d\u0442\u043e \u0441 \u0441\u043b\u0443\u0436\u0435\u0431\u043d\u044b\u0439 \u0441\u0438\u043c\u0432\u043e\u043b, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043a\u043b\u0430\u0441\u0441\u044b, \u043a\u0430\u043a \u0438 \u0432 \u043e\u0431\u044b\u0447\u043d\u043e\u043c CSS, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043e\u043d \u044d\u043a\u0440\u0430\u043d\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0441\u043b\u044d\u0448\u0435\u043c (<code>\\<\/code>).<\/em> <\/li>\n<li><em>\u0412\u044b \u043c\u043e\u0433\u043b\u0438 \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u043a\u043e \u0432\u0441\u0435\u043c \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c\u044b\u043c \u0446\u0432\u0435\u0442\u0430\u043c \u0441 \u043a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442\u043e\u043c \u043d\u0435\u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u0438 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0431\u0435\u0437 \u0430\u043b\u044c\u0444\u0430-\u043a\u0430\u043d\u0430\u043b\u0430 \u2014 \u044d\u0442\u043e \u043f\u043e\u043b\u0438\u0444\u0438\u043b \u0434\u043b\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 \u043a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442 \u043d\u0435\u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u0438.<br \/>  \u042d\u0442\u043e \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043c\u043e\u0436\u043d\u043e \u043e\u0442\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0432 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u0445 MN \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u043e\u043f\u0446\u0438\u0438 <code>altColor: 'off'<\/code><\/em><\/li>\n<\/ul>\n<p>  <\/p>\n<hr\/>\n<p>  <\/p>\n<h3 id=\"gradientnaya-cvetovaya-zalivka-v-mn\">\u0413\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043d\u0430\u044f \u0446\u0432\u0435\u0442\u043e\u0432\u0430\u044f \u0437\u0430\u043b\u0438\u0432\u043a\u0430 \u0432 MN<\/h3>\n<p>  <\/p>\n<p>\u0412 <code>MN<\/code> \u041c\u044b \u0438\u043c\u0435\u0435\u043c \u0434\u0432\u0430 \u043f\u043e\u0445\u043e\u0436\u0438\u0445 \u043f\u0440\u0435\u0441\u0435\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435, \u043a\u0430\u043a \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e, \u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435 \u0447\u0430\u0441\u0442\u043e \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0432\u0437\u0430\u0438\u043c\u043e\u0437\u0430\u043c\u0435\u043d\u044f\u0435\u043c\u044b\u043c\u0438: <code>bgc<\/code> \u0438 <code>bg<\/code>.<br \/>  \u041f\u0440\u0438\u043c\u0435\u0440: <\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;div class=&quot;bg48A&quot;&gt;...&lt;\/div&gt; &lt;div class=&quot;bgc48A&quot;&gt;...&lt;\/div&gt;<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"css\">.bg48A {   background: #48a; } .bgc48A {   background-color: #48a; }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041e\u0434\u043d\u0430\u043a\u043e \u0441 <code>bg<\/code> \u041c\u044b \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u043c \u043b\u0435\u0433\u043a\u043e \u0438 \u043b\u0430\u043a\u043e\u043d\u0447\u0438\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u044b, \u043f\u0443\u0442\u0435\u043c \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u044f \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0446\u0432\u0435\u0442\u043e\u0432 \u0447\u0435\u0440\u0435\u0437 \u0437\u043d\u0430\u043a \u043c\u0438\u043d\u0443\u0441\u0430 (<code>-<\/code>): <\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;div class=&quot;bg0-F&quot;&gt;...&lt;\/div&gt; &lt;div class=&quot;bgF00-0F0-00F&quot;&gt;...&lt;\/div&gt;<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"css\">.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%); }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0418\u043c\u0435\u0435\u0442\u0441\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0443\u0441\u0442\u0430\u043d\u0432\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u0430: <\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;div class=&quot;bg0-F_g45&quot;&gt;...&lt;\/div&gt; &lt;div class=&quot;bg0-F_g90&quot;&gt;...&lt;\/div&gt;<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"css\">.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%); }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u043e\u043c\u0438\u043c\u043e \u043b\u0438\u043d\u0435\u0439\u043d\u044b\u0445 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043e\u0432, \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0434\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u044b: <\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;div class=&quot;bg0-F_r&quot;&gt;...&lt;\/div&gt; &lt;div class=&quot;bg0-F_r_closestSide&quot;&gt;...&lt;\/div&gt; &lt;div class=&quot;bg0-F_r_ellipse_at_top&quot;&gt;...&lt;\/div&gt;<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"css\">.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%); }<\/code><\/pre>\n<p>  <\/p>\n<hr\/>\n<p>  <\/p>\n<h2 id=\"atomizer-vs-mn-neskolko-znacheniy\">Atomizer vs MN. \u041d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439<\/h2>\n<p>  <\/p>\n<p>\u0412 <code>Atomizer<\/code> \u0435\u0441\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439, \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0445 \u0437\u0430\u043f\u044f\u0442\u044b\u043c\u0438, \u043a\u043e\u0433\u0434\u0430 \u044d\u0442\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440: <\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;div class=&quot;Bgp(20px,50px)&quot;&gt;...&lt;\/div&gt;<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"css\">.Bgp\\(20px\\,50px\\) {   background-position: 20px 50px; }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0421 <code>MN<\/code> \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0445\u043e\u0436\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c: <\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;div class=&quot;bgp20px_50px&quot;&gt;...&lt;\/div&gt;<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"css\">.bgp20px_50px {   background-position: 20px 50px; }<\/code><\/pre>\n<p>  <\/p>\n<hr\/>\n<p>  <\/p>\n<h2 id=\"atomizer-vs-mn-identifikator-breykpointa-breakpoint-identifier-media-zaprosy\">Atomizer vs MN. \u0418\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 \u0431\u0440\u0435\u0439\u043a\u043f\u043e\u0438\u043d\u0442\u0430 (breakpoint identifier). \u041c\u0435\u0434\u0438\u0430-\u0437\u0430\u043f\u0440\u043e\u0441\u044b<\/h2>\n<p>  <\/p>\n<p>\u0412 <code>Atomizer<\/code> \u043c\u043e\u0436\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c \u0431\u0440\u0435\u0439\u043a\u043f\u043e\u0438\u043d\u0442 \u043a \u043f\u0440\u0430\u0432\u0438\u043b\u0443, \u043f\u0443\u0442\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u0443\u0444\u0444\u0438\u043a\u0441\u0430 \u043a \u0437\u0430\u043f\u0438\u0441\u0438. \u0411\u0440\u0435\u0439\u043a\u043f\u043e\u0438\u043d\u0442 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442, \u0447\u0442\u043e \u044d\u0442\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u043e \u0432\u0441\u0442\u0443\u043f\u0438\u0442 \u0432 \u0441\u0438\u043b\u0443 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u043c\u0435\u0434\u0438\u0430-\u0437\u0430\u043f\u0440\u043e\u0441\u0430. <\/p>\n<p>  <\/p>\n<p>\u0417\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0438\u043c\u0435\u043d\u0438 \u0438 \u0434\u043b\u0438\u043d\u044b \u043a\u0430\u0436\u0434\u043e\u0439 \u0442\u043e\u0447\u043a\u0438 \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442\u0441\u044f \u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u0435 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438: <\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">{   \/\/ ...   breakPoints: {     'sm': '@media(min-width:750px)', \/\/ breakpoint 1     'md': '@media(min-width:1000px)', \/\/ breakpoint 2     'lg': '@media(min-width:1200px)', \/\/ breakpoint 3     \/\/ ...   },   \/\/ ... }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u044d\u0442\u0438 \u0431\u0440\u0435\u0439\u043a\u043f\u043e\u0438\u043d\u0442\u044b \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c: <\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;div class=&quot;W(50%)--sm W(33%)--md W(25%)--lg&quot;&gt;...&lt;\/div&gt;<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"css\">@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%;   } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412 <code>MN<\/code> \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0435\u043a\u0440\u0430\u0441\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c \u0431\u0440\u0435\u0439\u043a\u043f\u043e\u0438\u043d\u0442\u044b, \u043f\u0443\u0442\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u0443\u0444\u0444\u0438\u043a\u0441\u0430 \u043a \u0437\u0430\u043f\u0438\u0441\u0438: <\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;div class=&quot;w50%@m w33%@d w25%@d2 w1\/5@ie w1\/6@android cr@mouse&quot;&gt;...&lt;\/div&gt;<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"css\">@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;   } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0417\u0434\u0435\u0441\u044c \u041c\u044b \u0438\u043c\u0435\u0435\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0434\u043b\u044f \u0431\u0440\u0435\u0439\u043a\u043f\u043e\u0438\u043d\u0442\u043e\u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u043a \u043c\u0435\u0434\u0438\u0430-\u0437\u0430\u043f\u0440\u043e\u0441\u044b, \u0442\u0430\u043a \u0438 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b. <\/p>\n<p>  <\/p>\n<p>\u0422\u0430\u043a\u0430\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043e\u0447\u0435\u043d\u044c \u0443\u0434\u043e\u0431\u043d\u0430 \u0432 \u0441\u043b\u0443\u0447\u0430\u044f\u0445, \u043a\u043e\u0433\u0434\u0430 \u041d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0443\u0447\u0435\u0441\u0442\u044c \u043a\u0430\u043a\u0438\u0435-\u043b\u0438\u0431\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430, \u0434\u043b\u044f \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043f\u043e\u043a\u0430 \u043d\u0435 \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u044b \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0432\u0443\u044e\u0449\u0438\u0435 \u043c\u0435\u0434\u0438\u0430-\u0437\u0430\u043f\u0440\u043e\u0441\u044b, \u043b\u0438\u0431\u043e \u0431\u044b\u0441\u0442\u0440\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u043e\u043b\u0438\u0444\u0438\u043b\u044b \u0434\u043b\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u043e\u0432\u0441\u0435 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 \u043c\u0435\u0434\u0438\u0430-\u0437\u0430\u043f\u0440\u043e\u0441\u044b. <\/p>\n<p>  <\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u0432 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0431\u0440\u0435\u0439\u043a\u043f\u043e\u0438\u043d\u0442\u043e\u0432, \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e, \u043c\u043e\u0433\u043b\u0430 \u0431\u044b \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u041d\u0430\u043c \u0434\u043b\u044f \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u043a\u0430\u043a\u0438\u0445-\u043d\u0438\u0431\u0443\u0434\u044c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u043e\u0432 \u0438\u043b\u0438 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432 \u0438\u043c\u0435\u043d. <\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0431\u0440\u0435\u0439\u043a\u043f\u043e\u0438\u043d\u0442\u043e\u0432: <\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">module.exports = (mn) =&gt; {   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'   };   \/\/ ... };<\/code><\/pre>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u041c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0432 \u043d\u043e\u0442\u0430\u0446\u0438\u0438 \u0431\u0440\u0435\u0439\u043a\u043f\u043e\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0438\u0433\u0434\u0435 \u043d\u0435 \u043f\u0440\u0435\u0434\u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d, \u0442\u043e \u0432 CSS \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043c\u0435\u0434\u0438\u0430-\u0437\u0430\u043f\u0440\u043e\u0441\u0430, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u043b\u0438 \u0432 \u0437\u0430\u043f\u0438\u0441\u0438: <\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;div class=&quot;w50%@print w50%@any&quot;&gt;...&lt;\/div&gt;<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"css\">@media print {   .w50\\%\\@print {     width: 50%;   } } @media any {   .w50\\%\\@any {     width: 50%;   } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 \u043f\u043e\u043c\u0438\u043c\u043e \u043f\u0440\u0435\u0434\u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c\u044b\u0445 \u0431\u0440\u0435\u0439\u043a\u043f\u043e\u0438\u043d\u0442\u043e\u0432 \u0432 \u043d\u043e\u0442\u0430\u0446\u0438\u0438 <code>MN<\/code> \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c<br \/>  \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f: <\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;div class=&quot;w50%@768 w50%@768- w50%@768-992&quot;&gt;...&lt;\/div&gt; &lt;div class=&quot;w50%@768-992x100-200 w50%@x100-200&quot;&gt;...&lt;\/div&gt; &lt;div class=&quot;w50%@x100 w50%@x100-&quot;&gt;...&lt;\/div&gt;<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"css\">@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%;   } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u0445 \u0431\u0440\u0435\u0439\u043a\u043f\u043e\u043d\u0442\u043e\u0432 \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442 \u043c\u0435\u0434\u0438\u0430-\u0437\u0430\u043f\u0440\u043e\u0441\u0430, \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u043a\u0430\u0441\u043a\u0430\u0434\u043d\u044b\u0435 \u0431\u043b\u043e\u043a\u0438 \u043e\u0442\u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0432 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u043c CSS: <\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;div class=&quot;w50%@768-992^5 w50%@768^1 w50%@992^3&quot;&gt;...&lt;\/div&gt;<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"css\">@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%;   } }<\/code><\/pre>\n<p>  <\/p>\n<hr\/>\n<p>  <\/p>\n<h2 id=\"minimalist-notation-upravlenie-prioritetami-stiley\">Minimalist Notation. \u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u0430\u043c\u0438 \u0441\u0442\u0438\u043b\u0435\u0439<\/h2>\n<p>  <\/p>\n<p>\u0412 <code>MN<\/code> \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u0430\u044f \u0443\u0434\u043e\u0431\u043d\u0430\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u0430\u043c\u0438 \u0441\u0442\u0438\u043b\u0435\u0439. \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u043e\u0432\u044b\u0441\u0438\u0442\u044c \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442 \u0441\u0442\u0438\u043b\u0435\u0439 \u043f\u0443\u0442\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u0443\u0444\u0444\u0438\u043a\u0441\u0430 <code>*<\/code> \u0441\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u0430 \u0432 \u043a\u043e\u043d\u0435\u0446 \u0437\u0430\u043f\u0438\u0441\u0438 \u043d\u043e\u0442\u0430\u0446\u0438\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440: <\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;div class=&quot;cF*2 c0*3 cF00.active*2&quot;&gt;...&lt;\/div&gt;<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"css\">.cF\\*2.cF\\*2 {   color: #fff; } .c0\\*3.c0\\*3.c0\\*3 {   color: #000; } .cF00\\.active\\*2.cF00\\.active\\*2.active {   color: #f00; }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442 \u0438\u043b\u0438, \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438, \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u043e\u0441\u0442\u044c \u0441\u0442\u0438\u043b\u0435\u0439 \u0443\u0432\u043b\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0437\u0430 \u0441\u0447\u0451\u0442 \u043f\u043e\u0432\u0442\u043e\u0440\u0435\u043d\u0438\u044f \u0432 \u043a\u0430\u0441\u043a\u0430\u0434\u0435 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c\u043e\u0433\u043e CSS \u043a\u043e\u043c\u0431\u0438\u043d\u0430\u0446\u0438\u0438 \u043a\u043b\u0430\u0441\u0441\u0430 \u0441 \u0441\u0430\u043c\u0438\u043c \u0441\u043e\u0431\u043e\u0439 \u0441\u0442\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u041c\u044b \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0432 \u043d\u043e\u0442\u0430\u0446\u0438\u0438. <\/p>\n<p>  <\/p>\n<hr\/>\n<p>  <\/p>\n<h2 id=\"minimalist-notation-selektor-podstroki\">Minimalist Notation. \u0421\u0435\u043b\u0435\u043a\u0442\u043e\u0440 \u043f\u043e\u0434\u0441\u0442\u0440\u043e\u043a\u0438<\/h2>\n<p>  <\/p>\n<p>\u0421 MN \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442\u044c \u0441\u0435\u0431\u0435 \u0441\u043e\u043a\u0440\u0430\u0449\u0430\u0442\u044c \u0438\u043c\u0435\u043d\u0430 \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0432 \u043d\u043e\u0442\u0430\u0446\u0438\u0438. <\/p>\n<p>  <\/p>\n<p>\u0418\u043d\u043e\u0433\u0434\u0430 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u0430 \u0438\u043c\u0435\u043d\u0438:<\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;div class=&quot;SomeBlock&quot;&gt;   &lt;div class=&quot;bgF00&gt;1.*_active&quot;&gt;     &lt;div class=&quot;SomeBlock__SomeElement SomeBlock__SomeElement_active&quot;&gt;       ...     &lt;\/div&gt;     &lt;div class=&quot;SomeBlock__SomeElement&quot;&gt;       ...     &lt;\/div&gt;     &lt;div class=&quot;SomeBlock__SomeElement SomeBlock__SomeElement_active&quot;&gt;       ...     &lt;\/div&gt;   &lt;\/div&gt; &lt;\/div&gt;<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"css\">.bgF00\\&gt;1\\.\\*_active&gt;[class*=_active] {   background: #f00; }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u043d\u0430 React \u041c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 Material-UI, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043b\u0435\u0433\u0430\u043b\u044c\u043d\u043e \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 JSS \u0442\u0430\u043a: <\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">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: {     '&amp; label.Mui-focused': {       color: 'green',     },     '&amp; .MuiOutlinedInput-root': {       '&amp; fieldset': {         borderColor: 'red',       },       '&amp;:hover fieldset': {         borderColor: 'yellow',       },       '&amp;.Mui-focused fieldset': {         borderColor: 'green',       },     },   }, })(TextField);  function App() {   return (     &lt;TextFieldGreen       label=&quot;Label&quot;       required       defaultValue=&quot;Value&quot;     \/&gt;   ); } <\/code><\/pre>\n<p>  <\/p>\n<p>\u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e MN \u0440\u0430\u0434\u0438 \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u041d\u0430\u043c \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u0437\u0430\u043c\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043c\u0435\u043d\u044c\u0448\u0435:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">const React = require('react'); const {render} = require('react-dom'); const TextField = require('@material-ui\/core\/TextField').default;  function TextFieldGreen(props) {   return (     &lt;TextField       {...props}       className={`         cGreen&gt;label.*-focused         bcRed&gt;.*OutlinedInput-root&gt;fieldset         bcYellow&gt;.*OutlinedInput-root:h&gt;fieldset         bcGreen&gt;.*OutlinedInput-root.*-focused&gt;fieldset       ` + (props.className || '')}     \/&gt;   ); }  function App() {   return (     &lt;TextFieldGreen       label=&quot;Label&quot;       required       defaultValue=&quot;Value&quot;     \/&gt;   ); }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u041d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u0435\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432, \u0442\u043e \u043f\u043e\u0434\u0445\u043e\u0434 JSS \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0437\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0431\u043e\u043b\u0435\u0435 \u0433\u0440\u043e\u043c\u043e\u0437\u0434\u043a\u0438\u043c, \u0447\u0435\u043c \u043f\u043e\u0434\u0445\u043e\u0434 MN. <\/p>\n<p>  <\/p>\n<p>\u0422\u0430\u043a \u0432 \u041d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 CSS: <\/p>\n<p>  <\/p>\n<pre><code class=\"css\">.cGreen\\&gt;label\\.\\*-focused label[class*=-focused] {   color: green; } .bcRed\\&gt;\\.\\*OutlinedInput-root\\&gt;fieldset [class*=OutlinedInput-root] fieldset {   border-color: red; } .bcYellow\\&gt;\\.\\*OutlinedInput-root\\:h\\&gt;fieldset [class*=OutlinedInput-root]:hover fieldset {   border-color: yellow; } .bcGreen\\&gt;\\.\\*OutlinedInput-root\\.\\*-focused\\&gt;fieldset [class*=OutlinedInput-root][class*=-focused] fieldset {   border-color: green; }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c, \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b \u043f\u043e\u0434\u0441\u0442\u0440\u043e\u043a \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u0441\u0442\u0440\u0430\u043d\u043d\u044b\u0445 \u0438 \u0434\u0438\u043a\u043e\u0432\u0438\u043d\u043d\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445: <\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;ul class=&quot;cRed&gt;#*menu-item-&quot;&gt;   &lt;li id=&quot;menu-item-1&quot;&gt;...&lt;\/li&gt;   &lt;li id=&quot;menu-item-2&quot;&gt;...&lt;\/li&gt;   &lt;li id=&quot;menu-item-3&quot;&gt;...&lt;\/li&gt;   &lt;li id=&quot;menu-item-4&quot;&gt;...&lt;\/li&gt;   ... &lt;\/ul&gt;<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"css\">.cRed\\&gt;\\#\\*menu-item- [id*=menu-item-] {   color: red; }<\/code><\/pre>\n<p>  <\/p>\n<hr\/>\n<p>  <\/p>\n<h2 id=\"zaklyuchenie\">\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h2>\n<p>  <\/p>\n<p>\u041a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0432\u0438\u0434\u0435\u0442\u044c, MN \u0431\u043e\u043b\u044c\u0448\u0435 \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d \u043d\u0430 \u043c\u0435\u0442\u043e\u0434\u043e\u043b\u043e\u0433\u0438\u044e Atomic \/ Functional CSS. <\/p>\n<p>  <\/p>\n<p>\u0421\u0435\u0439\u0447\u0430\u0441 \u0432 \u0445\u043e\u0434\u0443 Scoped styles, JSS, PostCSS \u0441 BEM. \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0438 MN \u0441\u0442\u0430\u043d\u0435\u0442 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u043c \u0433\u0434\u0435-\u0442\u043e \u0432 \u0441\u0432\u043e\u0438 2050-\u0435 \u0433\u043e\u0434\u044b. <\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 MN \u0412\u0430\u043c \u0443\u0436\u0435 \u043d\u0435 \u0437\u0430\u0445\u043e\u0447\u0435\u0442\u0441\u044f \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f \u043a \u043f\u0440\u0435\u0436\u043d\u0435\u043c\u0443, \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u0430\u043a\u0438\u0445-\u043b\u0438\u0431\u043e \u0438\u043d\u044b\u0445 \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u043f\u043e\u043a\u0430\u0436\u0435\u0442\u0441\u044f \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0443\u0442\u043e\u043c\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u0438 \u043d\u0435\u043b\u0435\u043f\u044b\u043c \u0437\u0430\u043d\u044f\u0442\u0438\u0435\u043c. \u0412\u0430\u0448\u0438 \u043f\u043b\u0435\u0447\u0438 \u0431\u0443\u0434\u0443\u0442 \u0442\u044f\u0436\u0435\u043b\u0435\u0442\u044c \u043e\u0442 \u043f\u0440\u043e\u0441\u044c\u0431 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c CSS \u0440\u0443\u043a\u0430\u043c\u0438, \u0438\u0431\u043e \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0442\u0430\u043a\u0436\u0435 \u0441\u0442\u0440\u0430\u043d\u043d\u043e, \u043a\u0430\u043a \u043d\u043e\u0441\u0438\u0442\u044c \u043e\u0442 \u0440\u0443\u0447\u044c\u044f \u0432\u043e\u0434\u0443 \u0432 \u0431\u0438\u0434\u043e\u043d\u0430\u0445, \u0438\u043c\u0435\u044f \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043f\u043e\u0434 \u043d\u043e\u0441\u043e\u043c \u0447\u0438\u0441\u0442\u0443\u044e \u0432\u043e\u0434\u0443 \u0438\u0437 \u043a\u0440\u0430\u043d\u0430 \u2014 \u0445\u043e\u0442\u044f, \u043a\u043e\u043d\u0435\u0447\u043d\u043e, \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0435 \u0440\u0430\u0441\u0442\u043e\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0433\u043b\u0443\u043f\u043e\u0441\u0442\u0438 \u0432\u043f\u043e\u043b\u043d\u0435 \u0441\u0435\u0431\u0435 \u0432 \u043d\u043e\u0440\u043c\u0435 \u0434\u043b\u044f \u041d\u0430\u0448\u0435\u0433\u043e \u043e\u0431\u0449\u0435\u0441\u0442\u0432\u0430, \u043d\u043e \u0442\u0435\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435&#8230;<\/p>\n<p>  <\/p>\n<hr\/>\n<p>  <\/p>\n<h2 id=\"ssylki\">\u0421\u0441\u044b\u043b\u043a\u0438<\/h2>\n<p>  <\/p>\n<p><a href=\"https:\/\/github.com\/mr-amirka\/minimalist-notation\">\u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 MN<\/a><\/p>\n<p>  <\/p>\n<p><a href=\"https:\/\/github.com\/mr-amirka\/mn-get-started\">MN get started example<\/a><\/p>\n<\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/post\/510600\/\"> https:\/\/habr.com\/ru\/post\/510600\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/post\/510600\/\">\n<p>Minimalist Notation (MN) (\u043c\u0438\u043d\u0438\u043c\u0430\u043b\u0438\u0441\u0442\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u043d\u043e\u0442\u0430\u0446\u0438\u044f) \u2014 \u0433\u0438\u0431\u043a\u0430\u044f \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u0430\u044f \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u0441\u0442\u0438\u043b\u0435\u0439.<\/p>\n<p>  <\/p>\n<p>\u041e\u043d\u0430 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u0441\u0442\u0438\u043b\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 html, jsx, \u0438 \u0442.\u043f. \u2014 \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0447\u0435\u043c\u0443 \u043e\u0442\u043f\u0430\u0434\u0430\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u0437\u0430\u0431\u043e\u0442\u0438\u0442\u044c\u0441\u044f \u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u0435 \u0432 CSS, \u043c\u0451\u0440\u0442\u0432\u043e\u043c CSS \u043a\u043e\u0434\u0435, \u0438 \u043e\u0442\u043f\u0430\u0434\u0430\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u043f\u0438\u0441\u0430\u0442\u044c CSS \u043a\u043e\u0434 \u0432\u043e\u043e\u0431\u0449\u0435.<\/p>\n<p>  <\/p>\n<p>\u0412 \u043d\u0435\u0439 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0431\u0440\u0435\u0439\u043a\u043f\u043e\u043d\u0442\u044b (\u043c\u0435\u0434\u0438\u0430-\u0437\u0430\u043f\u0440\u043e\u0441\u044b), \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b, \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u044b, \u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u043a\u0438, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0430\u0432\u0442\u043e\u043f\u0440\u0435\u0444\u0438\u043a\u0441\u044b \u0438 \u043f\u043e\u043b\u0438\u0444\u0438\u043b\u044b.<\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u044d\u0442\u043e\u0439 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u043f\u043e\u0445\u043e\u0436\u0435 \u043d\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0438\u043d\u043b\u0430\u0439\u043d\u043e\u0432\u044b\u0445 \u0441\u0442\u0438\u043b\u0435\u0439, \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0431\u043e\u043b\u0435\u0435 \u0432\u044b\u0440\u0430\u0437\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u043e\u043c \u0438 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e\u043c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 MN \u043c\u043e\u0436\u043d\u043e \u0434\u0430\u0436\u0435 \u043d\u0430\u0437\u0432\u0430\u0442\u044c \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0435\u0439 inline styles 2.0.<\/p>\n<p>  <\/p>\n<p>MN \u043f\u043e\u0434\u0440\u0430\u0437\u0443\u043c\u0435\u0432\u0430\u0435\u0442 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u043d\u043e\u0442\u0430\u0446\u0438\u0438 \u043a\u0430\u043a \u0442\u0430\u043a\u043e\u0432\u044b\u0435, \u043d\u043e \u0438, \u043f\u043e-\u0441\u0443\u0442\u0438, \u0434\u0430\u0436\u0435 \u0443\u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u0441\u0442\u0432\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u043a\u0430\u0441\u043a\u0430\u0434\u043d\u043e\u0433\u043e \u044f\u0437\u044b\u043a\u0430 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0441\u0442\u0438\u043b\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d \u043d\u0430 \u0438\u043d\u043b\u0430\u0439\u043d\u043e\u0432\u043e\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435.<\/p>\n<p>  <\/p>\n<p>\u042f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043b MN \u0432 2017 \u0433\u043e\u0434\u0443, \u0438 \u0441 \u0442\u043e\u0433\u043e \u043c\u043e\u043c\u0435\u043d\u0442\u0430 \u0443\u0441\u043f\u0435\u043b \u0432\u043e \u043c\u043d\u043e\u0433\u043e\u043c \u0443\u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u0443 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044e, \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u0440\u0435\u0441\u0435\u0442\u043e\u0432 \u0438 \u0443\u0434\u043e\u0431\u043d\u044b\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0434\u043b\u044f \u0435\u0451 \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u043a\u0442\u043e-\u0442\u043e \u0436\u0435\u043b\u0430\u0435\u0442 \u0443\u0437\u043d\u0430\u0442\u044c \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u043c\u043d\u0435 \u043f\u0440\u0438\u0448\u043b\u043e \u0432 \u0433\u043e\u043b\u043e\u0432\u0443 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u0443\u044e \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044e, \u044f <a href=\"https:\/\/github.com\/mr-amirka\/minimalist-notation\/blob\/master\/from-author-ru.md\">\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u0441\u0432\u043e\u0439 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439<\/a>, \u0434\u0430\u0431\u044b \u043d\u0435 \u043f\u043b\u0430\u0433\u0438\u0430\u0442\u0438\u0442\u044c \u0443 \u0441\u0430\u043c\u043e\u0433\u043e \u0441\u0435\u0431\u044f.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-306807","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/306807","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=306807"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/306807\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=306807"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=306807"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=306807"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}