{"id":360416,"date":"2024-05-21T00:52:49","date_gmt":"2024-05-21T00:52:49","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=360416"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=360416","title":{"rendered":"Tailwind vs BEM \u2014 1 (\u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438)<\/span>"},"content":{"rendered":"
<\/div>\n
\n
\n
\n
\n

\u0412\u0442\u043e\u0440\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f \u0437\u0434\u0435\u0441\u044c<\/a><\/p>\n

\u0412 \u044d\u0442\u0438\u0445 \u0434\u0432\u0443\u0445 \u0441\u0442\u0430\u0442\u044c\u044f\u0445 \u044f \u0431\u0443\u0434\u0443 \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0442\u044c TailwindCSS \u0441 \u0447\u0438\u0441\u0442\u044b\u043c CSS + BEM. \u0426\u0435\u043b\u044c — \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u0447\u0442\u043e \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043b\u0443\u0447\u0448\u0438\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c \u0434\u043b\u044f \u0445\u043e\u0440\u043e\u0448\u0435\u0439 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u042d\u0442\u043e \u043d\u0435 \u0432\u043e\u043f\u0440\u043e\u0441 \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0442\u0435\u043d\u0438\u0439, \u043e\u0442 \u044d\u0442\u043e\u0433\u043e \u0432\u044b\u0431\u043e\u0440\u0430 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0432\u0438\u0441\u0435\u0442\u044c \u043e\u0447\u0435\u043d\u044c \u043c\u043d\u043e\u0433\u043e\u0435 \u043d\u0430 \u043f\u043e\u0437\u0434\u043d\u0438\u0445 \u044d\u0442\u0430\u043f\u0430\u0445 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438 \u043e\u043d\u043e \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u043e\u0447\u0435\u043d\u044c \u0445\u043e\u0440\u043e\u0448\u043e \u043e\u0431\u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043e. \u041d\u0430\u0447\u043d\u0443 \u0441\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438. Tailwind \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440 \u0438\u0442\u043e\u0433\u043e\u0432\u043e\u0433\u043e CSS \u0438 \u0442\u0435\u043c \u0441\u0430\u043c\u044b\u043c \u0443\u0441\u043a\u043e\u0440\u0438\u0442\u044c \u0432\u0440\u0435\u043c\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u041d\u043e \u044d\u0442\u043e \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u0435\u0441\u043b\u0438 Tailwind \u043a\u043b\u0430\u0441\u0441\u044b \u0431\u0443\u0434\u0443\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u044b \u043f\u0440\u044f\u043c\u043e \u0432 HTML \u043a\u043e\u0434\u0435, \u0430 \u043d\u0435 \u0432 \u0432\u0438\u0434\u0435 @apply<\/code> \u0432 CSS. Tailwind \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0435\u0442 CSS, \u043d\u043e \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u0442 HTML. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u0447\u0438\u0442\u0430\u0435\u043c \u0440\u0430\u0437\u043d\u0438\u0446\u0443 \u0441 \u0443\u0447\u0435\u0442\u043e\u043c HTML. \u0411\u0443\u0434\u0435\u043c \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0442\u044c \u0447\u0438\u0441\u0442\u044b\u0439 Tailwind \u0441 \u0447\u0438\u0441\u0442\u044b\u043c CSS + BEM.<\/p>\n

\u0420\u0430\u0441\u0447\u0435\u0442\u044b<\/h3>\n

\u041d\u0430 \u043a\u0430\u0436\u0434\u044b\u0439 Tailwind \u043a\u043b\u0430\u0441\u0441 — \u043e\u0434\u043d\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e. \u041d\u0430 \u043a\u0430\u0436\u0434\u044b\u0439 HTML \u044d\u043b\u0435\u043c\u0435\u043d\u0442 — \u043f\u043e\u043b\u0442\u043e\u0440\u0430 BEM \u043a\u043b\u0430\u0441\u0441\u0430 (\u0435\u0441\u043b\u0438 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u044b).<\/p>\n

lt - \u0441\u0440\u0435\u0434\u043d\u044f\u044f \u0434\u043b\u0438\u043d\u0430 Tailwind \u043a\u043b\u0430\u0441\u0441\u0430 lc - \u0441\u0440\u0435\u0434\u043d\u044f\u044f \u0434\u043b\u0438\u043d\u0430 BEM \u043a\u043b\u0430\u0441\u0441\u0430 lp - \u0441\u0440\u0435\u0434\u043d\u044f\u044f \u0434\u043b\u0438\u043d\u0430 CSS \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 Pu - \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 P - \u0441\u0440\u0435\u0434\u043d\u0435\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 C - \u0441\u0440\u0435\u0434\u043d\u0435\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e BEM \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 E - \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 Eu - \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432  \u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 CSS \u0434\u043b\u044f Tailwind: .lt * Pu {   lp * Pu; }  \u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 CSS \u0434\u043b\u044f BEM: .lc * Eu * C {    lp * Eu * P; }  \u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 HTML \u0434\u043b\u044f Tailwind: <div class=\"lt * E * P\">  \u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 HTML \u0434\u043b\u044f BEM <div class=\"lc * E * C\">  \u0421\u0447\u0438\u0442\u0430\u0435\u043c \u043e\u0431\u0449\u0438\u0439 \u0440\u0430\u0437\u043c\u0435\u0440: Tailwind: lt * Pu + lp * Pu + lt * E * P BEM: lc * Eu * C + lp * Eu * P + lc * E * C <\/code><\/pre>\n
\u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435:<\/p>\n
function calc({lt, lc, lp, Pu, P, C, E, Eu}) {   const Tailwind = lt * Pu + lp * Pu + lt * E * P   const BEM = lc * Eu * C + lp * Eu * P + lc * E * C   return {     Tailwind,     BEM,     diff: Tailwind \/ BEM   } } <\/code><\/pre>\n
\u0414\u043b\u044f \u0430\u043d\u0430\u043b\u0438\u0437\u0430 \u044f \u0432\u0437\u044f\u043b \u0433\u043b\u0430\u0432\u043d\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 GitHub \u043f\u043e\u0441\u043b\u0435 \u043b\u043e\u0433\u0438\u043d\u0430. \u0412\u043e\u0442 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0434\u043b\u044f \u0430\u043d\u0430\u043b\u0438\u0437\u0430:<\/p>\n
\/\/ \u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 \u0441\u0430\u0439\u0442\u0435: console.log(Array.from(document.querySelectorAll('[class]')).length)  \/\/ \u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0445 (\u043f\u043e \u043a\u043b\u0430\u0441\u0441\u0430\u043c) \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 \u0441\u0430\u0439\u0442\u0435: console.log(Array.from(document.querySelectorAll('[class]'))   .reduce((a, o) => {     a.add(Array.from(o.classList.values()).sort().join(' '))     return a   }, new Set()).size) <\/code><\/pre>\n
\u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430 https:\/\/github.com\/ 3164 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 502 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 12101 \u0432\u0441\u0435\u0445 CSS \u0441\u0432\u043e\u0439\u0441\u0442\u0432 3956 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0445 CSS \u0441\u0432\u043e\u0439\u0441\u0442\u0432 404088 \u043e\u0431\u0449\u0430\u044f \u0434\u043b\u0438\u043d\u0430 \u0432\u0441\u0435\u0445 CSS \u0441\u0432\u043e\u0439\u0441\u0442\u0432 163733 \u043e\u0431\u0449\u0430\u044f \u0434\u043b\u0438\u043d\u0430 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0445 CSS \u0441\u0432\u043e\u0439\u0441\u0442\u0432 33 \u0441\u0440\u0435\u0434\u043d\u044f\u044f \u0434\u043b\u0438\u043d\u0430 \u0432\u0441\u0435\u0445 CSS \u0441\u0432\u043e\u0439\u0441\u0442\u0432 41 \u0441\u0440\u0435\u0434\u043d\u044f\u044f \u0434\u043b\u0438\u043d\u0430 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0445 CSS \u0441\u0432\u043e\u0439\u0441\u0442\u0432 24 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <\/code><\/pre>\n
calc({   lt:  10, \/\/ \u0441\u0440\u0435\u0434\u043d\u044f\u044f \u0434\u043b\u0438\u043d\u0430 Tailwind \u043a\u043b\u0430\u0441\u0441\u0430   lc:  35, \/\/ \u0441\u0440\u0435\u0434\u043d\u044f\u044f \u0434\u043b\u0438\u043d\u0430 BEM \u043a\u043b\u0430\u0441\u0441\u0430   lp:  35, \/\/ \u0441\u0440\u0435\u0434\u043d\u044f\u044f \u0434\u043b\u0438\u043d\u0430 CSS \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430   Pu:  3956, \/\/ \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432   P:  24, \/\/ \u0441\u0440\u0435\u0434\u043d\u0435\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442   C:  1.5, \/\/ \u0441\u0440\u0435\u0434\u043d\u0435\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e BEM \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442   E:  3164, \/\/ \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432   Eu:  502, \/\/ \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 })  \/\/ Tailwind: 937380, \/\/ BEM: 614145, \/\/ Tailwind \/ BEM: 1.5263170749578682 <\/code><\/pre>\n
\u0420\u0430\u0437\u043c\u0435\u0440 Tailwind \u0432 1.5 \u0440\u0430\u0437\u0430 \u0431\u043e\u043b\u044c\u0448\u0435<\/strong><\/p>\n
\u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f<\/h3>\n
\u0414\u043b\u044f BEM \u043c\u044b \u043c\u043e\u0433\u043b\u0438 \u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044e CSS \u0438 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0432\u0441\u0435 \u043a\u043b\u0430\u0441\u0441\u044b \u0441 \u044d\u0442\u0438\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0432 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0435. \u0422\u043e\u0433\u0434\u0430 \u043e\u0431\u0449\u0430\u044f \u0434\u043b\u0438\u043d\u0430 \u0432\u0441\u0435\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0434\u043e\u043b\u0436\u043d\u0430 \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c\u0441\u044f:<\/p>\n
.lc * Eu * C * P {    lp * Eu; } <\/code><\/pre>\n
\u0424\u043e\u0440\u043c\u0443\u043b\u0430 \u0434\u043b\u044f BEM \u0431\u0443\u0434\u0435\u0442 \u0442\u0430\u043a\u043e\u0439:<\/p>\n
lc * Eu * C * P + lp * Eu + lc * E * C <\/code><\/pre>\n
\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0442\u043e\u0442 \u0436\u0435 GitHub, \u043d\u043e \u0441 \u043e\u0431\u0444\u0443\u0441\u043a\u0430\u0446\u0438\u0435\u0439 \u0438\u043c\u0435\u043d \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0438 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0435\u0439:<\/p>\n
function calc({lt, lc, lp, Pu, P, C, E, Eu}) {   const Tailwind = lt * Pu + lp * Pu + lt * E * P   const BEM = lc * Eu * C * P + lp * Eu + lc * E * C   return {     Tailwind,     BEM,     diff: Tailwind \/ BEM   } }  calc({   lt:  5, \/\/ \u0441\u0440\u0435\u0434\u043d\u044f\u044f \u0434\u043b\u0438\u043d\u0430 Tailwind \u043a\u043b\u0430\u0441\u0441\u0430 (\u0441 \u043e\u0431\u0444\u0443\u0441\u043a\u0430\u0446\u0438\u0435\u0439)   lc:  5, \/\/ \u0441\u0440\u0435\u0434\u043d\u044f\u044f \u0434\u043b\u0438\u043d\u0430 BEM \u043a\u043b\u0430\u0441\u0441\u0430 (\u0441 \u043e\u0431\u0444\u0443\u0441\u043a\u0430\u0446\u0438\u0435\u0439)   lp:  35, \/\/ \u0441\u0440\u0435\u0434\u043d\u044f\u044f \u0434\u043b\u0438\u043d\u0430 CSS \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430   Pu:  3956, \/\/ \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432   P:  24, \/\/ \u0441\u0440\u0435\u0434\u043d\u0435\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442   C:  1.5, \/\/ \u0441\u0440\u0435\u0434\u043d\u0435\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e BEM \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442   E:  3164, \/\/ \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432   Eu:  502, \/\/ \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 })  \/\/ Tailwind: 537920 \/\/ BEM: 131660 \/\/ Tailwind \/ BEM: 4.085675224061978 <\/code><\/pre>\n
\u0421 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u0438 \u043e\u0431\u0444\u0443\u0441\u043a\u0430\u0446\u0438\u0435\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 Tailwind \u0443\u0436\u0435 \u0432 4 \u0440\u0430\u0437 \u0431\u043e\u043b\u044c\u0448\u0435 BEM.<\/p>\n
\u041d\u043e, \u043a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u0442\u0430\u043a\u0430\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u0430. \u042d\u0442\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u0442 \u043f\u043e\u0447\u0435\u043c\u0443:<\/p>\n
<style> .a {   color: red; } .b {   color: blue; } .c {   color: red; } <\/style>  <div class=\"a b\"><\/div> <!-- Blue --> <div class=\"b c\"><\/div> <!-- Red -->  =========================  <style> .a, .c {   color: red; } .b {   color: blue; } <\/style>  <div class=\"a b\"><\/div> <!-- Blue --> <div class=\"b c\"><\/div> <!-- Blue -->  =========================  <style> .b {   color: blue; } .a, .c {   color: red; } <\/style>  <div class=\"a b\"><\/div> <!-- Red --> <div class=\"b c\"><\/div> <!-- Red --> <\/code><\/pre>\n
\u041d\u043e \u043e\u0431\u0444\u0443\u0441\u043a\u0430\u0446\u0438\u044f \u0438\u043c\u0435\u043d \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u0430. \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0441\u043b\u0443\u0447\u0430\u0439 \u0431\u0435\u0437 \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0439 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438, \u043d\u043e \u0441 \u043e\u0431\u0444\u0443\u0441\u043a\u0430\u0446\u0438\u0435\u0439.<\/p>\n
calc({   lt:  5, \/\/ \u0441\u0440\u0435\u0434\u043d\u044f\u044f \u0434\u043b\u0438\u043d\u0430 Tailwind \u043a\u043b\u0430\u0441\u0441\u0430 (\u0441 \u043e\u0431\u0444\u0443\u0441\u043a\u0430\u0446\u0438\u0435\u0439)   lc:  5, \/\/ \u0441\u0440\u0435\u0434\u043d\u044f\u044f \u0434\u043b\u0438\u043d\u0430 BEM \u043a\u043b\u0430\u0441\u0441\u0430 (\u0441 \u043e\u0431\u0444\u0443\u0441\u043a\u0430\u0446\u0438\u0435\u0439)   lp:  35, \/\/ \u0441\u0440\u0435\u0434\u043d\u044f\u044f \u0434\u043b\u0438\u043d\u0430 CSS \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430   Pu:  3956, \/\/ \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432   P:  24, \/\/ \u0441\u0440\u0435\u0434\u043d\u0435\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442   C:  1.5, \/\/ \u0441\u0440\u0435\u0434\u043d\u0435\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e BEM \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442   E:  3164, \/\/ \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432   Eu:  502, \/\/ \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 })  \/\/ Tailwind: 537920, \/\/ BEM: 449175, \/\/ Tailwind \/ BEM: 1.1975733288807258 <\/code><\/pre>\n
\u0415\u0449\u0435, \u0440\u0430\u0437\u043c\u0435\u0440 \u043a\u043b\u0430\u0441\u0441\u0430 Tailwind \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u0441\u0438\u043b\u044c\u043d\u0435\u0435 \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u043e\u0431\u0449\u0438\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 HTML\/CSS, \u0447\u0435\u043c \u0440\u0430\u0437\u043c\u0435\u0440 \u043a\u043b\u0430\u0441\u0441\u0430 BEM. \u0418 \u044d\u0442\u043e \u043f\u043e\u043d\u044f\u0442\u043d\u043e, \u0432\u0435\u0434\u044c \u043e\u0431\u0449\u0435\u0435 \u0447\u0438\u0441\u043b\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0432 7 \u0440\u0430\u0437 \u0431\u043e\u043b\u044c\u0448\u0435 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0445.<\/p>\n
\u0412\u0430\u0436\u0435\u043d \u043b\u0438 \u0440\u0430\u0437\u043c\u0435\u0440 CSS\/HTML \u0438 \u043d\u0430 \u0441\u043a\u043e\u043b\u044c\u043a\u043e?<\/h3>\n
\u041d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u043e\u043e\u0431\u0449\u0435 \u0431\u043e\u043b\u044c\u0448\u0438\u043c \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c CSS? \u041d\u0430 BEM \u043d\u0435 \u0441\u043b\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c 3 \u043c\u0435\u0433\u0430\u0431\u0430\u0439\u0442\u0430. \u041d\u043e gzip \u0441\u0436\u0438\u043c\u0430\u0435\u0442 3MB \u0434\u043e \u0432\u0441\u0435\u0433\u043e 60kB. \u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u043f\u043e\u0441\u043b\u0435 \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0443 \u043d\u0443\u0436\u043d\u043e \u0435\u0449\u0435 \u0440\u0430\u0441\u043f\u0430\u043a\u043e\u0432\u0430\u0442\u044c CSS, \u0430 \u0437\u0430\u0442\u0435\u043c \u043f\u0440\u043e\u0430\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u0447\u0442\u043e \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u043a\u0430\u043a\u043e\u0435-\u0442\u043e \u0432\u0440\u0435\u043c\u044f. \u041f\u043e \u043c\u043e\u0438\u043c \u0442\u0435\u0441\u0442\u0430\u043c \u044d\u0442\u043e 0.5-1 \u0441\u0435\u043a \u043d\u0430 \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u0435. \u041d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445 \u044d\u0442\u043e \u0432\u0440\u0435\u043c\u044f \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u0435. \u0411\u044b\u0441\u0442\u0440\u0430\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0438 \u0431\u044b\u0441\u0442\u0440\u044b\u0439 \u0430\u043d\u0430\u043b\u0438\u0437 CSS\/HTML \u0432\u0430\u0436\u043d\u0435\u0435, \u0447\u0435\u043c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438\u043b\u0438 \u0434\u0430\u0436\u0435 \u0441\u043a\u0440\u0438\u043f\u0442\u044b. \u0421\u043a\u0440\u0438\u043f\u0442\u0430\u043c \u0434\u0430\u0435\u0442\u0441\u044f \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0430\u044f \u0444\u043e\u0440\u0430, \u0442.\u043a. \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0435 \u0441\u0440\u0430\u0437\u0443 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0443\u0435\u0442 \u0441\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435\u0439. \u0410 \u0431\u0435\u0437 HTML\/CSS \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0434\u0430\u0436\u0435 \u043d\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u0441\u044f \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e, \u0438 \u043d\u0435 \u043d\u0430\u0447\u043d\u0435\u0442\u0441\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439.<\/p>\n
\u0421\u043a\u0440\u0438\u043f\u0442 \u0434\u043b\u044f \u0430\u043d\u0430\u043b\u0438\u0437\u0430 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u0441\u0430\u0439\u0442\u0430<\/h3>\n
\u0417\u0430\u043f\u0443\u0441\u0442\u0438 \u044d\u0442\u043e\u0442 \u0441\u043a\u0440\u0438\u043f\u0442 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 \u0434\u043b\u044f \u043b\u044e\u0431\u043e\u0433\u043e \u0441\u0430\u0439\u0442\u0430 \u0438 \u0442\u044b \u0443\u0437\u043d\u0430\u0435\u0448\u044c \u0440\u0430\u0437\u043d\u0438\u0446\u0443 \u0432 \u0440\u0430\u0437\u043c\u0435\u0440\u0430\u0445 \u043c\u0435\u0436\u0434\u0443 Tailwind \u0438 BEM.
 \u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u0436\u0435\u043b\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0442\u043a\u043b\u044e\u0447\u0438\u0432 \u0437\u0430\u0449\u0438\u0442\u0443 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430, \u0447\u0442\u043e\u0431\u044b \u0441\u043a\u0440\u0438\u043f\u0442 \u0443\u0447\u0435\u043b \u0432\u0441\u0435 \u0441\u0442\u0438\u043b\u0438 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c\u044b\u0435 \u0438\u0437 CDN:<\/p>\n
chrome.exe --disable-web-security --user-data-dir=\"C:\/Temp\/ChromeDevSession\" <\/code><\/pre>\n
\u0410\u043b\u0433\u043e\u0440\u0438\u0442\u043c \u043d\u0435 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442 \u043a\u0430\u0441\u043a\u0430\u0434\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438, \u0442.\u0435 \u0432\u0441\u0435 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 \u0441\u0438\u043c\u0432\u043e\u043b\u044b » >+~». \u0423\u0447\u0435\u0441\u0442\u044c \u0438\u0445 \u043e\u0447\u0435\u043d\u044c \u0441\u043b\u043e\u0436\u043d\u043e, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043b\u0443\u0447\u0448\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u044b\u0431\u0438\u0440\u0430\u0442\u044c \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0441\u0432\u0435\u0440\u0441\u0442\u0430\u043d\u043d\u044b\u0435 \u0441\u0430\u0439\u0442\u044b, \u0433\u0434\u0435 \u043a\u0430\u0441\u043a\u0430\u0434\u0430 \u043d\u0435\u043c\u043d\u043e\u0433\u043e. \u0422\u0430\u043a \u0436\u0435 \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c \u0441\u0447\u0438\u0442\u0430\u0435\u0442, \u0447\u0442\u043e \u0434\u043b\u044f BEM \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0435\u0441\u0442\u044c \u0441\u0432\u043e\u044f \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u0430\u044f \u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u0441\u0442\u0438\u043b\u0435\u0439. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0440\u0430\u0437\u043c\u0435\u0440 CSS \u0434\u043b\u044f BEM \u0431\u0443\u0434\u0435\u0442 \u043c\u0435\u043d\u044c\u0448\u0435 \u0447\u0435\u043c \u043e\u0446\u0435\u043d\u0438\u0432\u0430\u0435\u043c\u044b\u0439 \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u043e\u043c.
 \u0412 \u0440\u0430\u0441\u0447\u0435\u0442\u0430\u0445 \u043d\u0435 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u043b\u0430\u0441\u0441\u043e\u0432. \u041d\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432\u043b\u0438\u044f\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e \u0434\u0438\u0437\u0430\u0439\u043d\u0430 \u0438 \u0435\u0433\u043e \u0432\u0435\u0440\u0441\u0442\u043a\u0438. Utility first \u043f\u043e\u0434\u0445\u043e\u0434 \u0437\u0430\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0434\u0435\u043b\u0430\u0442\u044c \u0434\u0438\u0437\u0430\u0439\u043d \u0438 \u0432\u0435\u0440\u0441\u0442\u043a\u0443 \u0431\u043e\u043b\u0435\u0435 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0439, \u0442.\u0435. \u043f\u0440\u0438\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0445 \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u043d\u0430\u0431\u043e\u0440\u043e\u0432 \u0441\u0442\u0438\u043b\u0435\u0439. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0430\u0432\u0435\u0440\u043d\u043e\u0435 \u0441\u0430\u0439\u0442\u044b \u0441\u0432\u0435\u0440\u0441\u0442\u0430\u043d\u043d\u044b\u0435 \u043d\u0430 Tailwind \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442 \u043b\u0443\u0447\u0448\u0438\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u043f\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0443 HTML\/CSS.
 \u0421\u043a\u0440\u0438\u043f\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u043c\u0438\u043d\u0443\u0442\u0443 \u0438\u0437-\u0437\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 element.matches(rule.selectorText)<\/code>. \u042f \u043d\u0435 \u0437\u043d\u0430\u044e \u043a\u0430\u043a \u044d\u0442\u043e \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c.<\/p>\n
function walkRules(rules, callback, mediaRule) {   Array.from(rules).forEach(rule => {     if (rule instanceof CSSStyleRule) {       callback(rule, mediaRule)     } else if (rule instanceof CSSMediaRule) {       walkRules(rule.cssRules, callback, rule)     }   }) }  function getRules() {   const rules = []   Array.from(document.styleSheets).forEach(sheet => {     \/\/ ignore cross-origin stylesheets     try {       sheet.cssRules     } catch (err) {       console.warn(`Stylesheet ${sheet.href} is not accessible`)       return     }      walkRules(sheet.cssRules, (rule, mediaRule) => {       if (         !\/\\.[\\w-]\/.test(rule.selectorText) || \/\/ only class selectors         \/[ >+~]\/.test(rule.selectorText) \/\/ exclude cascading selectors       ) {         return       }       const style = {}       for (let i = 0; i < rule.style.length; i++) {         const key = rule.style[i]         style[key] = rule.style.getPropertyValue(key).trim().toLowerCase()       }       rules.push({ rule, mediaRule, style })     })   })    return rules }  function getElements(rules) {   const allElements = Array.from(document.querySelectorAll('[class]'))   const filteredElements = []    const time0 = Date.now()   console.log('getElements START')    let logTime = Date.now()   const nonVisualTags = ['SCRIPT', 'STYLE', 'LINK', 'META', 'TITLE', 'NOSCRIPT']   allElements.forEach((element, i) => {     if (nonVisualTags.includes(element.tagName)) {       return     }     const elementRules = rules.filter(({ rule }) => {       return element.matches(rule.selectorText)     })     if (elementRules.length === 0) {       return     }     filteredElements.push({ element, rules: elementRules })     if (Date.now() - logTime > 1000) {       console.log(         `getElements: ${((i \/ allElements.length) * 100).toFixed(2)}% ${           (Date.now() - time0) \/ 1000         }s`,       )       logTime = Date.now()     }   })    console.log('getElements END', performance.now() - time0)    return filteredElements }  function calcStat() {   const rules = getRules()   const elements = getElements(rules)    const uniqueElements = Array.from(     elements       .reduce((a, e) => {         const key = e.rules.map(({ rule }) => rule.selectorText).join(' ')         if (!a.has(key)) {           a.set(key, e)         }         return a       }, new Map())       .values(),   )    const stat = {     total: {       html: {         elementsCount: 0,       },       css: {         selectorCount: 0,         mediaCount: 0,         mediaSize: 0,         styleSize: 0,         propCount: 0,       },     },     tailwind: {       html: {         classCount: 0,       },       css: {         selectorCount: 0,         styleSize: 0,         propCount: 0,       },     },     bem: {       html: {         elementsCount: 0,       },       css: {         selectorCount: 0,         mediaCount: 0,         mediaSize: 0,         styleSize: 0,         propCount: 0,       },     },   }    const uniqueProps = uniqueElements.reduce((a, e) => {     e.rules.forEach(({ style }) => {       Object.keys(style).forEach(key => {         a.add(key + ':' + style[key] + ';')       })     })     return a   }, new Set())    \/\/ Total   stat.total.html.elementsCount = elements.length   rules.forEach(({ rule, mediaRule, style }) => {     Object.keys(style).forEach(key => {       stat.total.css.propCount++       const prop = key + ':' + style[key] + ';'       stat.total.css.styleSize += prop.length     })     stat.total.css.selectorCount++     if (mediaRule) {       stat.total.css.mediaCount++       stat.total.css.mediaSize += mediaRule.media.mediaText.trim().length     }   })    \/\/ Tailwind   stat.tailwind.css.selectorCount = uniqueProps.size   stat.tailwind.css.propCount = uniqueProps.size   uniqueProps.forEach(prop => {     stat.tailwind.css.styleSize += prop.length   })   elements.forEach(({ element, rules }) => {     const elemUniqueProps = new Set()     rules.forEach(({ rule, mediaRule, style }) => {       Object.keys(style).forEach(key => {         elemUniqueProps.add(           key +             ':' +             style[key] +             ';' +             (mediaRule?.media?.mediaText?.trim() || ''),         )       })     })     if (!elemUniqueProps.size) {       debugger     }     stat.tailwind.html.classCount += elemUniqueProps.size   })    \/\/ BEM   stat.bem.html.elementsCount = elements.length   stat.bem.css.selectorCount = uniqueElements.length   uniqueElements.forEach(({ element, rules }) => {     const uniqueMedia = new Set()     rules.forEach(({ rule, mediaRule, style }) => {       const mediaText = mediaRule?.media?.mediaText?.trim() || ''       if (mediaText) {         uniqueMedia.add(mediaText)       }       Object.keys(style).forEach(key => {         const prop = key + ':' + style[key] + ';'         stat.bem.css.styleSize += prop.length         stat.bem.css.propCount++       })     })     stat.bem.css.mediaCount += uniqueMedia.size     uniqueMedia.forEach(media => {       stat.bem.css.mediaSize += media.length     })   })    return stat }  var stat = calcStat() console.log(JSON.stringify(stat, null, 2))  function tailwindVsBem({   stat,   bemClassSize,   bemClassesPerElement,   tailwindClassSize, }) {   const bemCssSize =     stat.bem.css.styleSize +     stat.bem.css.mediaSize +     stat.bem.css.selectorCount * bemClassSize +     stat.bem.css.mediaCount * bemClassSize   const bemHtmlSize =     stat.bem.html.elementsCount * bemClassSize * bemClassesPerElement    const tailwindCssSize =     stat.tailwind.css.styleSize +     stat.tailwind.css.selectorCount * tailwindClassSize   const tailwindHtmlSize = stat.tailwind.html.classCount * tailwindClassSize    const bemSize = bemCssSize + bemHtmlSize   const tailwindSize = tailwindCssSize + tailwindHtmlSize   const diff = tailwindSize \/ bemSize    console.log(` ${document.location.href} Tailwind = ${tailwindCssSize} (CSS) + ${tailwindHtmlSize} (HTML) = ${tailwindSize} BEM = ${bemCssSize} (CSS) + ${bemHtmlSize} (HTML) = ${bemSize} Tailwind \/ BEM = ${diff} `) }  tailwindVsBem({   stat,   bemClassSize: 35,   bemClassesPerElement: 1.5,   tailwindClassSize: 10, }) <\/code><\/pre>\n
\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b<\/h4>\n
\u0421\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043d\u0430 \u0447\u0438\u0441\u0442\u043e\u043c CSS:<\/p>\n
https:\/\/www.youtube.com Tailwind = 38936 (CSS) + 347670 (HTML) = 386606 BEM = 129424 (CSS) + 202230 (HTML) = 331654 Tailwind \/ BEM = 1.1656907499984923  https:\/\/dzen.ru\/ Tailwind = 19449 (CSS) + 165240 (HTML) = 184689 BEM = 80186 (CSS) + 75232.5 (HTML) = 155418.5 Tailwind \/ BEM = 1.1883334352088073   https:\/\/habr.com\/ru\/articles\/774524\/ Tailwind = 1173 (CSS) + 370 (HTML) = 1543 BEM = 946 (CSS) + 157.5 (HTML) = 1103.5 Tailwind \/ BEM = 1.3982782057091074 <\/code><\/pre>\n
\u0421\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043d\u0430 Tailwind \u0438\u043b\u0438 \u0434\u0440\u0443\u0433\u043e\u043c Utility First \u043f\u043e\u0434\u0445\u043e\u0434\u0435:<\/p>\n
https:\/\/github.com (\u041c\u0438\u043a\u0441 \u0447\u0438\u0441\u0442\u043e\u0433\u043e CSS \u0438 Tailwind) Tailwind = 25103 (CSS) + 482850 (HTML) = 507953 BEM = 155295 (CSS) + 155190 (HTML) = 310485 Tailwind \/ BEM = 1.6359985184469459  https:\/\/stackoverflow.com\/questions\/588004\/is-floating-point-math-broken\/588014 Tailwind = 25317 (CSS) + 449170 (HTML) = 474487 BEM = 132373 (CSS) + 140437.5 (HTML) = 272810.5 Tailwind \/ BEM = 1.7392549040451155  https:\/\/www.facebook.com\/random_user Tailwind = 42286 (CSS) + 400300 (HTML) = 442586 BEM = 378248 (CSS) + 170415 (HTML) = 548663 Tailwind \/ BEM = 0.8066627419745819  https:\/\/tailwindcss.com Tailwind = 22325 (CSS) + 159330 (HTML) = 181655 BEM = 120739 (CSS) + 121800 (HTML) = 242539 Tailwind \/ BEM = 0.7489723302231805  https:\/\/www.shopify.com Tailwind = 25053 (CSS) + 102080 (HTML) = 127133 BEM = 179634 (CSS) + 78750 (HTML) = 258384 Tailwind \/ BEM = 0.4920312403244783  https:\/\/www.netflix.com\/tudum\/top10\/ Tailwind = 13288 (CSS) + 80360 (HTML) = 93648 BEM = 48737 (CSS) + 60375 (HTML) = 109112 Tailwind \/ BEM = 0.8582740670137107  https:\/\/io.google\/2022\/ Tailwind = 11124 (CSS) + 27390 (HTML) = 38514 BEM = 43079 (CSS) + 21682.5 (HTML) = 64761.5 Tailwind \/ BEM = 0.5947051874956572  https:\/\/dotnet.microsoft.com\/en-us\/ Tailwind = 15199 (CSS) + 27520 (HTML) = 42719 BEM = 49361 (CSS) + 13860 (HTML) = 63221 Tailwind \/ BEM = 0.6757090207367805 <\/code><\/pre>\n
\u0412\u044b\u0432\u043e\u0434\u044b<\/h3>\n
Tailwind \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0440 HTML\/CSS \u0442\u043e\u043b\u044c\u043a\u043e \u0435\u0441\u043b\u0438 \u0432\u0441\u044f \u0432\u0435\u0431 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 (\u0438 \u0434\u0438\u0437\u0430\u0439\u043d, \u0438 \u0432\u0435\u0440\u0441\u0442\u043a\u0430) \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c Utility First \u043f\u043e\u0434\u0445\u043e\u0434\u0430. \u041e\u0431 \u044d\u0442\u043e\u043c \u043a\u043e\u043d\u0435\u0447\u043d\u043e \u0434\u043e\u043b\u0436\u043d\u044b \u0434\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c\u0441\u044f \u0432\u0441\u0435: \u0438 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440, \u0438 \u0432\u0435\u0440\u0441\u0442\u0430\u043b\u044c\u0449\u0438\u043a, \u0438 \u0437\u0430\u043a\u0430\u0437\u0447\u0438\u043a. \u041f\u0440\u0438 \u043e\u0447\u0435\u043d\u044c \u0445\u043e\u0440\u043e\u0448\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u0438 \u0432\u0435\u0440\u0441\u0442\u043a\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440 \u0432 2 \u0440\u0430\u0437\u0430 \u043c\u0435\u043d\u044c\u0448\u0435 \u0447\u0435\u043c \u043f\u0440\u0438 \u0432\u0435\u0440\u0441\u0442\u043a\u0435 \u043d\u0430 BEM.
 \u0415\u0441\u043b\u0438 \u0435\u0441\u0442\u044c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u043b\u044c\u043d\u044b\u0439 \u043c\u0430\u043a\u0435\u0442 \u0438 \u043d\u0443\u0436\u043d\u043e \u0432\u0435\u0440\u0441\u0442\u0430\u0442\u044c \u0432 Pixel Perfect, \u0442\u043e Tailwind \u0441\u043a\u043e\u0440\u0435\u0435 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0442 \u0440\u0430\u0437\u043c\u0435\u0440 \u0432 1.5 \u0440\u0430\u0437\u0430. \u0422\u0430\u043a \u0436\u0435 Tailwind \u043d\u0435 \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0435\u0441\u043b\u0438 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043e\u0447\u0435\u043d\u044c \u043c\u043d\u043e\u0433\u043e \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u044e\u0449\u0438\u0445\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0441\u0430\u0439\u0442 StackOverflow)<\/p>\n
P.S.<\/h3>\n
Tailwind \u0432\u0440\u0435\u0442<\/a> \u043e \u0444\u0435\u043d\u043e\u043c\u0435\u043d\u0430\u043b\u044c\u043d\u043e\u043c \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438. (\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043e\u043d \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437\u043c\u0435\u0440 \u0444\u0430\u0439\u043b\u043e\u0432 \u0434\u043b\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438). \u041e\u043d \u043f\u0438\u0448\u0435\u0442, \u0447\u0442\u043e \u043d\u0430 Netflix \u0432\u0441\u0435\u0433\u043e 10KB CSS, \u043d\u043e \u043d\u0438 \u0441\u043b\u043e\u0432\u0430 \u043d\u0435 \u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u043e\u0431 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0448\u0435\u043c\u0441\u044f \u0440\u0430\u0437\u043c\u0435\u0440\u0435 HTML. \u041e\u0431\u0449\u0430\u044f \u0434\u043b\u0438\u043d\u0430 \u0432\u0441\u0435\u0445 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 «class» \u0440\u0430\u0432\u043d\u0430 87231. \u042d\u0442\u043e \u0447\u0443\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435, \u0447\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c \u043f\u043e \u043c\u043e\u0438\u043c \u0440\u0430\u0441\u0447\u0435\u0442\u0430\u043c \u0437\u0434\u0435\u0441\u044c. \u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 Tailwind \u0441\u044d\u043a\u043e\u043d\u043e\u043c\u0438\u043b \u0442\u043e\u043b\u044c\u043a\u043e 15% \u043e\u0431\u0449\u0435\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u043d\u0435\u0441\u0436\u0430\u0442\u043e\u0433\u043e HTML+CSS.<\/p>\n
\u0412\u043e\u0442 \u0441\u043a\u0440\u0438\u043f\u0442 \u0434\u043b\u044f \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f \u043e\u0431\u0449\u0435\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0432 HTML:<\/p>\n
Array.from(document.querySelectorAll('[class]'))   .reduce((a, o) => {     a += o.getAttribute('class').length     return a   }, 0) <\/code><\/pre>\n\n
\u0411\u0443\u0434\u0443 \u0440\u0430\u0434 \u0443\u0441\u043b\u044b\u0448\u0430\u0442\u044c \u043b\u044e\u0431\u0443\u044e \u043a\u0440\u0438\u0442\u0438\u043a\u0443, \u0437\u0430\u043c\u0435\u0447\u0430\u043d\u0438\u044f, \u0432\u0430\u0448 \u043b\u0438\u0447\u043d\u044b\u0439 \u043e\u043f\u044b\u0442, …<\/p>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n

 \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438  https:\/\/habr.com\/ru\/articles\/774524\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
<\/div>\n
\n
\n
\n
\n
\u0412\u0442\u043e\u0440\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f \u0437\u0434\u0435\u0441\u044c<\/a><\/p>\n
\u0412 \u044d\u0442\u0438\u0445 \u0434\u0432\u0443\u0445 \u0441\u0442\u0430\u0442\u044c\u044f\u0445 \u044f \u0431\u0443\u0434\u0443 \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0442\u044c TailwindCSS \u0441 \u0447\u0438\u0441\u0442\u044b\u043c CSS + BEM. \u0426\u0435\u043b\u044c — \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u0447\u0442\u043e \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043b\u0443\u0447\u0448\u0438\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c \u0434\u043b\u044f \u0445\u043e\u0440\u043e\u0448\u0435\u0439 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u042d\u0442\u043e \u043d\u0435 \u0432\u043e\u043f\u0440\u043e\u0441 \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0442\u0435\u043d\u0438\u0439, \u043e\u0442 \u044d\u0442\u043e\u0433\u043e \u0432\u044b\u0431\u043e\u0440\u0430 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0432\u0438\u0441\u0435\u0442\u044c \u043e\u0447\u0435\u043d\u044c \u043c\u043d\u043e\u0433\u043e\u0435 \u043d\u0430 \u043f\u043e\u0437\u0434\u043d\u0438\u0445 \u044d\u0442\u0430\u043f\u0430\u0445 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438 \u043e\u043d\u043e \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u043e\u0447\u0435\u043d\u044c \u0445\u043e\u0440\u043e\u0448\u043e \u043e\u0431\u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043e. \u041d\u0430\u0447\u043d\u0443 \u0441\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438. Tailwind \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440 \u0438\u0442\u043e\u0433\u043e\u0432\u043e\u0433\u043e CSS \u0438 \u0442\u0435\u043c \u0441\u0430\u043c\u044b\u043c \u0443\u0441\u043a\u043e\u0440\u0438\u0442\u044c \u0432\u0440\u0435\u043c\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u041d\u043e \u044d\u0442\u043e \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u0435\u0441\u043b\u0438 Tailwind \u043a\u043b\u0430\u0441\u0441\u044b \u0431\u0443\u0434\u0443\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u044b \u043f\u0440\u044f\u043c\u043e \u0432 HTML \u043a\u043e\u0434\u0435, \u0430 \u043d\u0435 \u0432 \u0432\u0438\u0434\u0435 @apply<\/code> \u0432 CSS. Tailwind \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0435\u0442 CSS, \u043d\u043e \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u0442 HTML. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u0447\u0438\u0442\u0430\u0435\u043c \u0440\u0430\u0437\u043d\u0438\u0446\u0443 \u0441 \u0443\u0447\u0435\u0442\u043e\u043c HTML. \u0411\u0443\u0434\u0435\u043c \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0442\u044c \u0447\u0438\u0441\u0442\u044b\u0439 Tailwind \u0441 \u0447\u0438\u0441\u0442\u044b\u043c CSS + BEM.<\/p>\n
\u0420\u0430\u0441\u0447\u0435\u0442\u044b<\/h3>\n
\u041d\u0430 \u043a\u0430\u0436\u0434\u044b\u0439 Tailwind \u043a\u043b\u0430\u0441\u0441 — \u043e\u0434\u043d\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e. \u041d\u0430 \u043a\u0430\u0436\u0434\u044b\u0439 HTML \u044d\u043b\u0435\u043c\u0435\u043d\u0442 — \u043f\u043e\u043b\u0442\u043e\u0440\u0430 BEM \u043a\u043b\u0430\u0441\u0441\u0430 (\u0435\u0441\u043b\u0438 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u044b).<\/p>\n
lt - \u0441\u0440\u0435\u0434\u043d\u044f\u044f \u0434\u043b\u0438\u043d\u0430 Tailwind \u043a\u043b\u0430\u0441\u0441\u0430 lc - \u0441\u0440\u0435\u0434\u043d\u044f\u044f \u0434\u043b\u0438\u043d\u0430 BEM \u043a\u043b\u0430\u0441\u0441\u0430 lp - \u0441\u0440\u0435\u0434\u043d\u044f\u044f \u0434\u043b\u0438\u043d\u0430 CSS \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 Pu - \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 P - \u0441\u0440\u0435\u0434\u043d\u0435\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 C - \u0441\u0440\u0435\u0434\u043d\u0435\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e BEM \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 E - \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 Eu - \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432  \u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 CSS \u0434\u043b\u044f Tailwind: .lt * Pu {   lp * Pu; }  \u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 CSS \u0434\u043b\u044f BEM: .lc * Eu * C {    lp * Eu * P; }  \u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 HTML \u0434\u043b\u044f Tailwind: <div class=\"lt * E * P\">  \u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 HTML \u0434\u043b\u044f BEM <div class=\"lc * E * C\">  \u0421\u0447\u0438\u0442\u0430\u0435\u043c \u043e\u0431\u0449\u0438\u0439 \u0440\u0430\u0437\u043c\u0435\u0440: Tailwind: lt * Pu + lp * Pu + lt * E * P BEM: lc * Eu * C + lp * Eu * P + lc * E * C <\/code><\/pre>\n
\u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435:<\/p>\n
function calc({lt, lc, lp, Pu, P, C, E, Eu}) {   const Tailwind = lt * Pu + lp * Pu + lt * E * P   const BEM = lc * Eu * C + lp * Eu * P + lc * E * C   return {     Tailwind,     BEM,     diff: Tailwind \/ BEM   } } <\/code><\/pre>\n
\u0414\u043b\u044f \u0430\u043d\u0430\u043b\u0438\u0437\u0430 \u044f \u0432\u0437\u044f\u043b \u0433\u043b\u0430\u0432\u043d\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 GitHub \u043f\u043e\u0441\u043b\u0435 \u043b\u043e\u0433\u0438\u043d\u0430. \u0412\u043e\u0442 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0434\u043b\u044f \u0430\u043d\u0430\u043b\u0438\u0437\u0430:<\/p>\n
\/\/ \u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 \u0441\u0430\u0439\u0442\u0435: console.log(Array.from(document.querySelectorAll('[class]')).length)  \/\/ \u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0445 (\u043f\u043e \u043a\u043b\u0430\u0441\u0441\u0430\u043c) \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 \u0441\u0430\u0439\u0442\u0435: console.log(Array.from(document.querySelectorAll('[class]'))   .reduce((a, o) => {     a.add(Array.from(o.classList.values()).sort().join(' '))     return a   }, new Set()).size) <\/code><\/pre>\n
\u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430 https:\/\/github.com\/ 3164 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 502 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 12101 \u0432\u0441\u0435\u0445 CSS \u0441\u0432\u043e\u0439\u0441\u0442\u0432 3956 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0445 CSS \u0441\u0432\u043e\u0439\u0441\u0442\u0432 404088 \u043e\u0431\u0449\u0430\u044f \u0434\u043b\u0438\u043d\u0430 \u0432\u0441\u0435\u0445 CSS \u0441\u0432\u043e\u0439\u0441\u0442\u0432 163733 \u043e\u0431\u0449\u0430\u044f \u0434\u043b\u0438\u043d\u0430 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0445 CSS \u0441\u0432\u043e\u0439\u0441\u0442\u0432 33 \u0441\u0440\u0435\u0434\u043d\u044f\u044f \u0434\u043b\u0438\u043d\u0430 \u0432\u0441\u0435\u0445 CSS \u0441\u0432\u043e\u0439\u0441\u0442\u0432 41 \u0441\u0440\u0435\u0434\u043d\u044f\u044f \u0434\u043b\u0438\u043d\u0430 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0445 CSS \u0441\u0432\u043e\u0439\u0441\u0442\u0432 24 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <\/code><\/pre>\n
calc({   lt:  10, \/\/ \u0441\u0440\u0435\u0434\u043d\u044f\u044f \u0434\u043b\u0438\u043d\u0430 Tailwind \u043a\u043b\u0430\u0441\u0441\u0430   lc:  35, \/\/ \u0441\u0440\u0435\u0434\u043d\u044f\u044f \u0434\u043b\u0438\u043d\u0430 BEM \u043a\u043b\u0430\u0441\u0441\u0430   lp:  35, \/\/ \u0441\u0440\u0435\u0434\u043d\u044f\u044f \u0434\u043b\u0438\u043d\u0430 CSS \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430   Pu:  3956, \/\/ \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432   P:  24, \/\/ \u0441\u0440\u0435\u0434\u043d\u0435\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442   C:  1.5, \/\/ \u0441\u0440\u0435\u0434\u043d\u0435\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e BEM \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442   E:  3164, \/\/ \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432   Eu:  502, \/\/ \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 })  \/\/ Tailwind: 937380, \/\/ BEM: 614145, \/\/ Tailwind \/ BEM: 1.5263170749578682 <\/code><\/pre>\n
\u0420\u0430\u0437\u043c\u0435\u0440 Tailwind \u0432 1.5 \u0440\u0430\u0437\u0430 \u0431\u043e\u043b\u044c\u0448\u0435<\/strong><\/p>\n
\u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f<\/h3>\n
\u0414\u043b\u044f BEM \u043c\u044b \u043c\u043e\u0433\u043b\u0438 \u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044e CSS \u0438 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0432\u0441\u0435 \u043a\u043b\u0430\u0441\u0441\u044b \u0441 \u044d\u0442\u0438\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0432 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0435. \u0422\u043e\u0433\u0434\u0430 \u043e\u0431\u0449\u0430\u044f \u0434\u043b\u0438\u043d\u0430 \u0432\u0441\u0435\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0434\u043e\u043b\u0436\u043d\u0430 \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c\u0441\u044f:<\/p>\n
.lc * Eu * C * P {    lp * Eu; } <\/code><\/pre>\n
\u0424\u043e\u0440\u043c\u0443\u043b\u0430 \u0434\u043b\u044f BEM \u0431\u0443\u0434\u0435\u0442 \u0442\u0430\u043a\u043e\u0439:<\/p>\n
lc * Eu * C * P + lp * Eu + lc * E * C <\/code><\/pre>\n
\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0442\u043e\u0442 \u0436\u0435 GitHub, \u043d\u043e \u0441 \u043e\u0431\u0444\u0443\u0441\u043a\u0430\u0446\u0438\u0435\u0439 \u0438\u043c\u0435\u043d \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0438 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0435\u0439:<\/p>\n
function calc({lt, lc, lp, Pu, P, C, E, Eu}) {   const Tailwind = lt * Pu + lp * Pu + lt * E * P   const BEM = lc * Eu * C * P + lp * Eu + lc * E * C   return {     Tailwind,     BEM,     diff: Tailwind \/ BEM   } }  calc({   lt:  5, \/\/ \u0441\u0440\u0435\u0434\u043d\u044f\u044f \u0434\u043b\u0438\u043d\u0430 Tailwind \u043a\u043b\u0430\u0441\u0441\u0430 (\u0441 \u043e\u0431\u0444\u0443\u0441\u043a\u0430\u0446\u0438\u0435\u0439)   lc:  5, \/\/ \u0441\u0440\u0435\u0434\u043d\u044f\u044f \u0434\u043b\u0438\u043d\u0430 BEM \u043a\u043b\u0430\u0441\u0441\u0430 (\u0441 \u043e\u0431\u0444\u0443\u0441\u043a\u0430\u0446\u0438\u0435\u0439)   lp:  35, \/\/ \u0441\u0440\u0435\u0434\u043d\u044f\u044f \u0434\u043b\u0438\u043d\u0430 CSS \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430   Pu:  3956, \/\/ \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432   P:  24, \/\/ \u0441\u0440\u0435\u0434\u043d\u0435\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442   C:  1.5, \/\/ \u0441\u0440\u0435\u0434\u043d\u0435\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e BEM \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442   E:  3164, \/\/ \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432   Eu:  502, \/\/ \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 })  \/\/ Tailwind: 537920 \/\/ BEM: 131660 \/\/ Tailwind \/ BEM: 4.085675224061978 <\/code><\/pre>\n
\u0421 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u0438 \u043e\u0431\u0444\u0443\u0441\u043a\u0430\u0446\u0438\u0435\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 Tailwind \u0443\u0436\u0435 \u0432 4 \u0440\u0430\u0437 \u0431\u043e\u043b\u044c\u0448\u0435 BEM.<\/p>\n
\u041d\u043e, \u043a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u0442\u0430\u043a\u0430\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u0430. \u042d\u0442\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u0442 \u043f\u043e\u0447\u0435\u043c\u0443:<\/p>\n
<style> .a {   color: red; } .b {   color: blue; } .c {   color: red; } <\/style>  <div class=\"a b\"><\/div> <!-- Blue --> <div class=\"b c\"><\/div> <!-- Red -->  =========================  <style> .a, .c {   color: red; } .b {   color: blue; } <\/style>  <div class=\"a b\"><\/div> <!-- Blue --> <div class=\"b c\"><\/div> <!-- Blue -->  =========================  <style> .b {   color: blue; } .a, .c {   color: red; } <\/style>  <div class=\"a b\"><\/div> <!-- Red --> <div class=\"b c\"><\/div> <!-- Red --> <\/code><\/pre>\n
\u041d\u043e \u043e\u0431\u0444\u0443\u0441\u043a\u0430\u0446\u0438\u044f \u0438\u043c\u0435\u043d \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u0430. \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0441\u043b\u0443\u0447\u0430\u0439 \u0431\u0435\u0437 \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0439 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438, \u043d\u043e \u0441 \u043e\u0431\u0444\u0443\u0441\u043a\u0430\u0446\u0438\u0435\u0439.<\/p>\n
calc({   lt:  5, \/\/ \u0441\u0440\u0435\u0434\u043d\u044f\u044f \u0434\u043b\u0438\u043d\u0430 Tailwind \u043a\u043b\u0430\u0441\u0441\u0430 (\u0441 \u043e\u0431\u0444\u0443\u0441\u043a\u0430\u0446\u0438\u0435\u0439)   lc:  5, \/\/ \u0441\u0440\u0435\u0434\u043d\u044f\u044f \u0434\u043b\u0438\u043d\u0430 BEM \u043a\u043b\u0430\u0441\u0441\u0430 (\u0441 \u043e\u0431\u0444\u0443\u0441\u043a\u0430\u0446\u0438\u0435\u0439)   lp:  35, \/\/ \u0441\u0440\u0435\u0434\u043d\u044f\u044f \u0434\u043b\u0438\u043d\u0430 CSS \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430   Pu:  3956, \/\/ \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432   P:  24, \/\/ \u0441\u0440\u0435\u0434\u043d\u0435\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442   C:  1.5, \/\/ \u0441\u0440\u0435\u0434\u043d\u0435\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e BEM \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442   E:  3164, \/\/ \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432   Eu:  502, \/\/ \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 })  \/\/ Tailwind: 537920, \/\/ BEM: 449175, \/\/ Tailwind \/ BEM: 1.1975733288807258 <\/code><\/pre>\n
\u0415\u0449\u0435, \u0440\u0430\u0437\u043c\u0435\u0440 \u043a\u043b\u0430\u0441\u0441\u0430 Tailwind \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u0441\u0438\u043b\u044c\u043d\u0435\u0435 \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u043e\u0431\u0449\u0438\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 HTML\/CSS, \u0447\u0435\u043c \u0440\u0430\u0437\u043c\u0435\u0440 \u043a\u043b\u0430\u0441\u0441\u0430 BEM. \u0418 \u044d\u0442\u043e \u043f\u043e\u043d\u044f\u0442\u043d\u043e, \u0432\u0435\u0434\u044c \u043e\u0431\u0449\u0435\u0435 \u0447\u0438\u0441\u043b\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0432 7 \u0440\u0430\u0437 \u0431\u043e\u043b\u044c\u0448\u0435 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0445.<\/p>\n
\u0412\u0430\u0436\u0435\u043d \u043b\u0438 \u0440\u0430\u0437\u043c\u0435\u0440 CSS\/HTML \u0438 \u043d\u0430 \u0441\u043a\u043e\u043b\u044c\u043a\u043e?<\/h3>\n
\u041d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u043e\u043e\u0431\u0449\u0435 \u0431\u043e\u043b\u044c\u0448\u0438\u043c \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c CSS? \u041d\u0430 BEM \u043d\u0435 \u0441\u043b\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c 3 \u043c\u0435\u0433\u0430\u0431\u0430\u0439\u0442\u0430. \u041d\u043e gzip \u0441\u0436\u0438\u043c\u0430\u0435\u0442 3MB \u0434\u043e \u0432\u0441\u0435\u0433\u043e 60kB. \u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u043f\u043e\u0441\u043b\u0435 \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0443 \u043d\u0443\u0436\u043d\u043e \u0435\u0449\u0435 \u0440\u0430\u0441\u043f\u0430\u043a\u043e\u0432\u0430\u0442\u044c CSS, \u0430 \u0437\u0430\u0442\u0435\u043c \u043f\u0440\u043e\u0430\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u0447\u0442\u043e \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u043a\u0430\u043a\u043e\u0435-\u0442\u043e \u0432\u0440\u0435\u043c\u044f. \u041f\u043e \u043c\u043e\u0438\u043c \u0442\u0435\u0441\u0442\u0430\u043c \u044d\u0442\u043e 0.5-1 \u0441\u0435\u043a \u043d\u0430 \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u0435. \u041d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445 \u044d\u0442\u043e \u0432\u0440\u0435\u043c\u044f \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u0435. \u0411\u044b\u0441\u0442\u0440\u0430\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0438 \u0431\u044b\u0441\u0442\u0440\u044b\u0439 \u0430\u043d\u0430\u043b\u0438\u0437 CSS\/HTML \u0432\u0430\u0436\u043d\u0435\u0435, \u0447\u0435\u043c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438\u043b\u0438 \u0434\u0430\u0436\u0435 \u0441\u043a\u0440\u0438\u043f\u0442\u044b. \u0421\u043a\u0440\u0438\u043f\u0442\u0430\u043c \u0434\u0430\u0435\u0442\u0441\u044f \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0430\u044f \u0444\u043e\u0440\u0430, \u0442.\u043a. \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0435 \u0441\u0440\u0430\u0437\u0443 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0443\u0435\u0442 \u0441\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435\u0439. \u0410 \u0431\u0435\u0437 HTML\/CSS \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0434\u0430\u0436\u0435 \u043d\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u0441\u044f \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e, \u0438 \u043d\u0435 \u043d\u0430\u0447\u043d\u0435\u0442\u0441\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439.<\/p>\n
\u0421\u043a\u0440\u0438\u043f\u0442 \u0434\u043b\u044f \u0430\u043d\u0430\u043b\u0438\u0437\u0430 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u0441\u0430\u0439\u0442\u0430<\/h3>\n
\u0417\u0430\u043f\u0443\u0441\u0442\u0438 \u044d\u0442\u043e\u0442 \u0441\u043a\u0440\u0438\u043f\u0442 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 \u0434\u043b\u044f \u043b\u044e\u0431\u043e\u0433\u043e \u0441\u0430\u0439\u0442\u0430 \u0438 \u0442\u044b \u0443\u0437\u043d\u0430\u0435\u0448\u044c \u0440\u0430\u0437\u043d\u0438\u0446\u0443 \u0432 \u0440\u0430\u0437\u043c\u0435\u0440\u0430\u0445 \u043c\u0435\u0436\u0434\u0443 Tailwind \u0438 BEM.
 \u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u0436\u0435\u043b\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0442\u043a\u043b\u044e\u0447\u0438\u0432 \u0437\u0430\u0449\u0438\u0442\u0443 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430, \u0447\u0442\u043e\u0431\u044b \u0441\u043a\u0440\u0438\u043f\u0442 \u0443\u0447\u0435\u043b \u0432\u0441\u0435 \u0441\u0442\u0438\u043b\u0438 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c\u044b\u0435 \u0438\u0437 CDN:<\/p>\n
chrome.exe --disable-web-security --user-data-dir=\"C:\/Temp\/ChromeDevSession\" <\/code><\/pre>\n
\u0410\u043b\u0433\u043e\u0440\u0438\u0442\u043c \u043d\u0435 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442 \u043a\u0430\u0441\u043a\u0430\u0434\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438, \u0442.\u0435 \u0432\u0441\u0435 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 \u0441\u0438\u043c\u0432\u043e\u043b\u044b » >+~». \u0423\u0447\u0435\u0441\u0442\u044c \u0438\u0445 \u043e\u0447\u0435\u043d\u044c \u0441\u043b\u043e\u0436\u043d\u043e, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043b\u0443\u0447\u0448\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u044b\u0431\u0438\u0440\u0430\u0442\u044c \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0441\u0432\u0435\u0440\u0441\u0442\u0430\u043d\u043d\u044b\u0435 \u0441\u0430\u0439\u0442\u044b, \u0433\u0434\u0435 \u043a\u0430\u0441\u043a\u0430\u0434\u0430 \u043d\u0435\u043c\u043d\u043e\u0433\u043e. \u0422\u0430\u043a \u0436\u0435 \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c \u0441\u0447\u0438\u0442\u0430\u0435\u0442, \u0447\u0442\u043e \u0434\u043b\u044f BEM \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0435\u0441\u0442\u044c \u0441\u0432\u043e\u044f \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u0430\u044f \u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u0441\u0442\u0438\u043b\u0435\u0439. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0440\u0430\u0437\u043c\u0435\u0440 CSS \u0434\u043b\u044f BEM \u0431\u0443\u0434\u0435\u0442 \u043c\u0435\u043d\u044c\u0448\u0435 \u0447\u0435\u043c \u043e\u0446\u0435\u043d\u0438\u0432\u0430\u0435\u043c\u044b\u0439 \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u043e\u043c.
 \u0412 \u0440\u0430\u0441\u0447\u0435\u0442\u0430\u0445 \u043d\u0435 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u043b\u0430\u0441\u0441\u043e\u0432. \u041d\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432\u043b\u0438\u044f\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e \u0434\u0438\u0437\u0430\u0439\u043d\u0430 \u0438 \u0435\u0433\u043e \u0432\u0435\u0440\u0441\u0442\u043a\u0438. Utility first \u043f\u043e\u0434\u0445\u043e\u0434 \u0437\u0430\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0434\u0435\u043b\u0430\u0442\u044c \u0434\u0438\u0437\u0430\u0439\u043d \u0438 \u0432\u0435\u0440\u0441\u0442\u043a\u0443 \u0431\u043e\u043b\u0435\u0435 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0439, \u0442.\u0435. \u043f\u0440\u0438\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0445 \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u043d\u0430\u0431\u043e\u0440\u043e\u0432 \u0441\u0442\u0438\u043b\u0435\u0439. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0430\u0432\u0435\u0440\u043d\u043e\u0435 \u0441\u0430\u0439\u0442\u044b \u0441\u0432\u0435\u0440\u0441\u0442\u0430\u043d\u043d\u044b\u0435 \u043d\u0430 Tailwind \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442 \u043b\u0443\u0447\u0448\u0438\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u043f\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0443 HTML\/CSS.
 \u0421\u043a\u0440\u0438\u043f\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u043c\u0438\u043d\u0443\u0442\u0443 \u0438\u0437-\u0437\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 element.matches(rule.selectorText)<\/code>. \u042f \u043d\u0435 \u0437\u043d\u0430\u044e \u043a\u0430\u043a \u044d\u0442\u043e \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c.<\/p>\n
function walkRules(rules, callback, mediaRule) {   Array.from(rules).forEach(rule => {     if (rule instanceof CSSStyleRule) {       callback(rule, mediaRule)     } else if (rule instanceof CSSMediaRule) {       walkRules(rule.cssRules, callback, rule)     }   }) }  function getRules() {   const rules = []   Array.from(document.styleSheets).forEach(sheet => {     \/\/ ignore cross-origin stylesheets     try {       sheet.cssRules     } catch (err) {       console.warn(`Stylesheet ${sheet.href} is not accessible`)       return     }      walkRules(sheet.cssRules, (rule, mediaRule) => {       if (         !\/\\.[\\w-]\/.test(rule.selectorText) || \/\/ only class selectors         \/[ >+~]\/.test(rule.selectorText) \/\/ exclude cascading selectors       ) {         return       }       const style = {}       for (let i = 0; i < rule.style.length; i++) {         const key = rule.style[i]         style[key] = rule.style.getPropertyValue(key).trim().toLowerCase()       }       rules.push({ rule, mediaRule, style })     })   })    return rules }  function getElements(rules) {   const allElements = Array.from(document.querySelectorAll('[class]'))   const filteredElements = []    const time0 = Date.now()   console.log('getElements START')    let logTime = Date.now()   const nonVisualTags = ['SCRIPT', 'STYLE', 'LINK', 'META', 'TITLE', 'NOSCRIPT']   allElements.forEach((element, i) => {     if (nonVisualTags.includes(element.tagName)) {       return     }     const elementRules = rules.filter(({ rule }) => {       return element.matches(rule.selectorText)     })     if (elementRules.length === 0) {       return     }     filteredElements.push({ element, rules: elementRules })     if (Date.now() - logTime > 1000) {       console.log(         `getElements: ${((i \/ allElements.length) * 100).toFixed(2)}% ${           (Date.now() - time0) \/ 1000         }s`,       )       logTime = Date.now()     }   })    console.log('getElements END', performance.now() - time0)    return filteredElements }  function calcStat() {   const rules = getRules()   const elements = getElements(rules)    const uniqueElements = Array.from(     elements       .reduce((a, e) => {         const key = e.rules.map(({ rule }) => rule.selectorText).join(' ')         if (!a.has(key)) {           a.set(key, e)         }         return a       }, new Map())       .values(),   )    const stat = {     total: {       html: {         elementsCount: 0,       },       css: {         selectorCount: 0,         mediaCount: 0,         mediaSize: 0,         styleSize: 0,         propCount: 0,       },     },     tailwind: {       html: {         classCount: 0,       },       css: {         selectorCount: 0,         styleSize: 0,         propCount: 0,       },     },     bem: {       html: {         elementsCount: 0,       },       css: {         selectorCount: 0, <\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\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-360416","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/360416","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=360416"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/360416\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=360416"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=360416"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=360416"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}