{"id":330451,"date":"2022-03-09T21:00:21","date_gmt":"2022-03-09T21:00:21","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=330451"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=330451","title":{"rendered":"<span>CSS @layer \u2014 \u043f\u043e\u043b\u043d\u043e\u0435 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e \u043f\u043e \u043a\u0430\u0441\u043a\u0430\u0434\u043d\u044b\u043c \u0441\u043b\u043e\u044f\u043c<\/span>"},"content":{"rendered":"<div><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/5a6\/93b\/97c\/5a693b97cfae3a737cf5bcac7f022392.png\" width=\"780\" height=\"440\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/5a6\/93b\/97c\/5a693b97cfae3a737cf5bcac7f022392.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u041f\u043e\u043b\u043d\u044b\u043c \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e\u043c \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u043a\u0430\u0441\u043a\u0430\u0434\u043d\u044b\u0435 \u0441\u043b\u043e\u0438, \u043a\u0430\u043a\u043e\u0439 \u0443 \u043d\u0438\u0445 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441, \u0437\u0430\u0447\u0435\u043c \u043e\u043d\u0438 \u043c\u043e\u0433\u0443\u0442 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u0438 \u043a\u0430\u043a \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c\u0438 \u0434\u0435\u043b\u0438\u043c\u0441\u044f \u043a \u0441\u0442\u0430\u0440\u0442\u0443 \u043a\u0443\u0440\u0441\u0430 \u043f\u043e <a href=\"https:\/\/skillfactory.ru\/python-fullstack-web-developer?utm_source=habr&amp;utm_medium=habr&amp;utm_campaign=article&amp;utm_content=coding_fpw_090322&amp;utm_term=lead\">Fullstack-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u043d\u0430 Python<\/a>.<\/p>\n<hr\/>\n<p>\u042d\u0442\u043e \u043f\u043e\u043b\u043d\u043e\u0435 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e \u043f\u043e \u043a\u0430\u0441\u043a\u0430\u0434\u043d\u044b\u043c \u0441\u043b\u043e\u044f\u043c \u2014 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0443 CSS, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0435\u043c\u0443 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u044f\u0432\u043d\u044b\u0435 \u0441\u043b\u043e\u0438 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u043e\u0441\u0442\u0438 \u0438 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442 \u0441\u0442\u0438\u043b\u0435\u0439 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435, \u043d\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044f \u00ab\u043a\u043e\u0441\u0442\u044b\u043b\u0438\u00bb \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u043e\u0441\u0442\u0438 \u0438\u043b\u0438 !important.\u00a0<\/p>\n<h4>\u041d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440<\/h4>\n<pre><code class=\"css\">\/* establish a layer order up-front, from lowest to highest priority *\/ @layer reset, defaults, patterns, components, utilities, overrides;  \/* import stylesheets into a layer (dot syntax represents nesting) *\/ @import url('framework.css') layer(components.framework);  \/* add styles to layers *\/ @layer utilities {   \/* high layer priority, despite low specificity *\/   [data-color='brand'] {      color: var(--brand, rebeccapurple);   } }  @layer defaults {   \/* higher specificity, but lower layer priority *\/   a:any-link { color: maroon; } }  \/* un-layered styles have the highest priority *\/ a {   color: mediumvioletred; }<\/code><\/pre>\n<h3>\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435. \u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u00ab\u043a\u0430\u0441\u043a\u0430\u0434\u043d\u044b\u0435 \u0441\u043b\u043e\u0438\u00bb?<\/h3>\n<p>\u041a\u0430\u0441\u043a\u0430\u0434\u043d\u044b\u0435 \u0441\u043b\u043e\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u044b \u0440\u0435\u0448\u0430\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b CSS. \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c <strong>\u0433\u043b\u0430\u0432\u043d\u0443\u044e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443<\/strong> \u0435\u0451 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u0430\u0441\u043a\u0430\u0434\u043d\u044b\u0445 \u0441\u043b\u043e\u0451\u0432.<\/p>\n<h4>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430: \u0440\u0430\u0437\u0440\u0430\u0441\u0442\u0430\u043d\u0438\u0435 \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u043e\u0432 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u043e\u0441\u0442\u0438<\/h4>\n<p>\u041c\u043d\u043e\u0433\u0438\u0435 \u0441\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u043b\u0438\u0441\u044c \u0441 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f\u043c\u0438, \u043a\u043e\u0433\u0434\u0430 \u0438\u0437-\u0437\u0430 \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u0443\u044e\u0449\u0438\u0445 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u0432 \u043d\u0443\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0441\u0442\u0438\u043b\u0438 \u0438\u0437 \u0434\u0440\u0443\u0433\u0438\u0445 \u0447\u0430\u0441\u0442\u0435\u0439 \u043a\u043e\u0434\u0430 \u0438\u043b\u0438 \u0438\u0437 \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0435\u0433\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430. \u0418 \u043c\u043d\u043e\u0433\u0438\u0435 \u0433\u043e\u0434\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043b\u0438\u0441\u044c \u0440\u0430\u0437\u043d\u044b\u0435 \u00ab\u043c\u0435\u0442\u043e\u0434\u043e\u043b\u043e\u0433\u0438\u0438\u00bb \u0438 \u00ab\u043b\u0443\u0447\u0448\u0438\u0435 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0438\u00bb, \u0447\u0442\u043e\u0431\u044b \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0445 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0439, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u00ab\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u043d\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430\u00bb \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u0432. \u042d\u0442\u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u043e\u0431\u044b\u0447\u043d\u043e \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u044b \u0441\u043a\u043e\u0440\u0435\u0435 \u043d\u0430 \u0443\u0445\u043e\u0434 \u043e\u0442 \u043a\u0430\u0441\u043a\u0430\u0434\u0430, \u0447\u0435\u043c \u043d\u0430 <a href=\"https:\/\/css-tricks.com\/dont-fight-the-cascade-control-it\/\">\u0435\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435<\/a>.<\/p>\n<p>\u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043a\u0430\u0441\u043a\u0430\u0434\u043d\u044b\u043c\u0438 \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u0430\u043c\u0438 \u0438 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u043e\u0441\u0442\u044c\u044e \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u0432 \u0441\u0447\u0438\u0442\u0430\u043b\u043e\u0441\u044c \u043e\u0434\u043d\u0438\u043c \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u0441\u043b\u043e\u0436\u043d\u044b\u0445 (\u0438\u043b\u0438 \u043f\u043e \u043a\u0440\u0430\u0439\u043d\u0435\u0439 \u043c\u0435\u0440\u0435 \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0437\u0430\u043f\u0443\u0442\u0430\u043d\u043d\u044b\u0445) \u0430\u0441\u043f\u0435\u043a\u0442\u043e\u0432 CSS. \u041e\u0442\u0447\u0430\u0441\u0442\u0438 \u044d\u0442\u043e \u043c\u043e\u0433\u043b\u043e \u0431\u044b\u0442\u044c \u0441\u0432\u044f\u0437\u0430\u043d\u043e \u0441 \u0442\u0435\u043c, \u0447\u0442\u043e \u043c\u0430\u043b\u043e \u0432 \u043a\u0430\u043a\u0438\u0445 \u0435\u0449\u0451 \u044f\u0437\u044b\u043a\u0430\u0445 \u043a\u0430\u0441\u043a\u0430\u0434 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b. <\/p>\n<p>\u041d\u043e \u0442\u0430\u043a \u0436\u0435 \u0432\u0435\u0440\u043d\u043e \u0438 \u0442\u043e, \u0447\u0442\u043e \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u0430\u0441\u043a\u0430\u0434 \u0441\u0438\u043b\u044c\u043d\u043e \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u0441\u043a\u043e\u0440\u0435\u0435 \u043e\u0442 <em>\u044d\u0432\u0440\u0438\u0441\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u043f\u043e\u0434\u0445\u043e\u0434\u043e\u0432<\/em> (\u043e\u0431\u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0438 \u0434\u043e\u043f\u0443\u0449\u0435\u043d\u0438\u0439, \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0445 \u0432 \u043a\u043e\u0434), \u0447\u0435\u043c \u043e\u0442 \u043f\u0440\u044f\u043c\u043e\u0433\u043e \u0438 \u044f\u0432\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044f \u0432\u0435\u0431-\u0430\u0432\u0442\u043e\u0440\u0430\u043c.<\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u043e\u0441\u0442\u044c \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u0432 \u2014 \u043f\u0435\u0440\u0432\u0438\u0447\u043d\u043e\u0435 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0441 \u043a\u0430\u0441\u043a\u0430\u0434\u043e\u043c \u2014 \u043e\u0441\u043d\u043e\u0432\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0438, \u0447\u0442\u043e \u0443\u0437\u043a\u043e\u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 (\u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u0440\u0430\u0437), \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e, \u0432\u0430\u0436\u043d\u0435\u0435 \u0431\u043e\u043b\u0435\u0435 \u043e\u0431\u0449\u0438\u0445 \u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0445 (\u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a \u043a\u043b\u0430\u0441\u0441\u044b \u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b). <\/p>\n<p>\u0418\u043d\u044b\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438, \u044d\u0442\u043e \u0442\u043e, \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e <em>\u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u0435\u043d<\/em> \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440. \u0418 \u044d\u0442\u043e \u0445\u043e\u0440\u043e\u0448\u0435\u0435 \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043d\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u043e \u043d\u0435 \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e \u043d\u0430\u0434\u0451\u0436\u043d\u043e\u0435, \u0447\u0442\u043e \u0447\u0440\u0435\u0432\u0430\u0442\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430\u043c\u0438:<\/p>\n<ul>\n<li>\n<p><em>\u0412\u044b\u0431\u043e\u0440 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432<\/em> \u0441\u043e\u0447\u0435\u0442\u0430\u0435\u0442\u0441\u044f \u0441 <em>\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435\u043c \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u0430 \u043d\u0430\u0431\u043e\u0440\u043e\u0432 \u043f\u0440\u0430\u0432\u0438\u043b<\/em>.<\/p>\n<\/li>\n<li>\n<p>\u0421\u0430\u043c\u044b\u0439 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u00ab\u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c\u00bb \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442 \u0441\u043e \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u043e\u0441\u0442\u044c\u044e \u2014 \u0443\u0441\u0443\u0433\u0443\u0431\u0438\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u043d\u0435\u043d\u0443\u0436\u043d\u044b\u0435 \u0432 \u0438\u043d\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b, \u0438\u043b\u0438 <a href=\"https:\/\/css-tricks.com\/when-using-important-is-the-right-choice\/\">\u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c<\/a> !important:<\/p>\n<\/li>\n<\/ul>\n<pre><code class=\"css\">.overly#powerful .framework.widget {   color: maroon; }  .my-single_class { \/* add some IDs to this ??? *\/   color: rebeccapurple; \/* add !important ??? *\/ }<\/code><\/pre>\n<h4>\u0420\u0435\u0448\u0435\u043d\u0438\u0435: \u043a\u0430\u0441\u043a\u0430\u0434\u043d\u044b\u0435 \u0441\u043b\u043e\u0438 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u044e\u0442 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c<\/h4>\n<p>\u041a\u0430\u0441\u043a\u0430\u0434\u043d\u044b\u0435 \u0441\u043b\u043e\u0438 \u0434\u0430\u044e\u0442 \u0430\u0432\u0442\u043e\u0440\u0430\u043c CSS \u0431\u043e\u043b\u044c\u0448\u0435 \u043f\u0440\u044f\u043c\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044f \u043d\u0430\u0434 \u043a\u0430\u0441\u043a\u0430\u0434\u043e\u043c, \u0442\u0430\u043a \u0447\u0442\u043e \u043a\u0430\u0441\u043a\u0430\u0434\u043d\u044b\u0435 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u0446\u0435\u043b\u0435\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043d\u043e, \u0430\u043a\u0442\u0438\u0432\u043d\u043e \u043d\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044f \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0435 \u0441 \u0432\u044b\u0431\u043e\u0440\u043e\u043c \u044d\u0432\u0440\u0438\u0441\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>\u0421 @layer \u0438 \u043c\u043d\u043e\u0433\u043e\u0441\u043b\u043e\u0439\u043d\u044b\u043c\u0438 @import \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 <em>\u0441\u043b\u043e\u0438 \u043a\u0430\u0441\u043a\u0430\u0434\u0430<\/em>, \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u044f \u0441\u0442\u0438\u043b\u0438 \u043e\u0442 \u043d\u0438\u0437\u043a\u043e\u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043d\u044b\u0445, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 resets \u0438 defaults \u0447\u0435\u0440\u0435\u0437 themes, frameworks \u0438 design systems, \u0434\u043e \u0432\u044b\u0441\u043e\u043a\u043e\u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043d\u044b\u0445, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a components, utilities \u0438 overrides. <\/p>\n<p>\u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043a \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u0430\u043c <em>\u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0441\u043b\u043e\u044f<\/em>, \u043d\u043e \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u044b \u0441\u043b\u043e\u0451\u0432 \u0432\u0441\u0435\u0433\u0434\u0430 \u0440\u0430\u0437\u0440\u0435\u0448\u0430\u044e\u0442\u0441\u044f \u0432 \u043f\u043e\u043b\u044c\u0437\u0443 \u0441\u043b\u043e\u044f \u0441 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043e\u043c \u0432\u044b\u0448\u0435:<\/p>\n<pre><code class=\"css\">@layer framework {   .overly#powerful .framework.widget {     color: maroon;   } }  @layer site {   .my-single_class {     color: rebeccapurple;   } }<\/code><\/pre>\n<p>\u042d\u0442\u0438 \u0441\u043b\u043e\u0438 \u0443\u043f\u043e\u0440\u044f\u0434\u043e\u0447\u0435\u043d\u044b \u0438 \u0441\u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0438 \u043d\u0435 \u0440\u0430\u0437\u0440\u0430\u0441\u0442\u0430\u043b\u0438\u0441\u044c \u043f\u043e\u0434\u043e\u0431\u043d\u043e \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u043e\u0441\u0442\u0438 \u0438 \u0432\u0430\u0436\u043d\u043e\u0441\u0442\u0438. \u041a\u0430\u0441\u043a\u0430\u0434\u043d\u044b\u0435 \u0441\u043b\u043e\u0438 \u043d\u0435 \u0441\u0442\u043e\u043b\u044c \u043a\u0443\u043c\u0443\u043b\u044f\u0442\u0438\u0432\u043d\u044b, \u043a\u0430\u043a \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b. <em>\u0412\u0430\u0436\u043d\u043e\u0441\u0442\u0438<\/em> \u043e\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f <em>\u0441\u043b\u043e\u0451\u0432<\/em> \u043d\u0435 \u043f\u0440\u0438\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f. <\/p>\n<p>\u0418, \u0432 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 \u0432\u0430\u0436\u043d\u043e\u0441\u0442\u0438, \u0441\u043b\u043e\u0438 \u043d\u0435 \u0434\u0432\u043e\u0438\u0447\u043d\u044b: \u043e\u043d\u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044f\u0442 \u0441\u0440\u0430\u0437\u0443 \u043d\u0430 \u0432\u0435\u0440\u0448\u0438\u043d\u0443 \u0441\u0442\u0435\u043a\u0430 \u0438\u043b\u0438 \u0438\u043c\u0435\u044e\u0442 \u043d\u0443\u043c\u0435\u0440\u0430\u0446\u0438\u044e, \u043f\u043e\u0434\u043e\u0431\u043d\u0443\u044e z-index, \u0433\u0434\u0435 \u043d\u0443\u0436\u043d\u043e \u0443\u0433\u0430\u0434\u044b\u0432\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u0447\u0438\u0441\u043b\u043e (z-index: 9999999?). \u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u043c\u043d\u043e\u0433\u043e\u0441\u043b\u043e\u0439\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e <em>\u043c\u0435\u043d\u0435\u0435 \u0432\u0430\u0436\u043d\u044b<\/em>, \u0447\u0435\u043c \u0441\u0442\u0438\u043b\u0438 \u0431\u0435\u0437 \u0441\u043b\u043e\u0451\u0432:<\/p>\n<pre><code class=\"css\">@layer defaults {   a:any-link { color: maroon; } }  \/* un-layered styles have the highest priority *\/ a {   color: mediumvioletred; }<\/code><\/pre>\n<h3>\u0413\u0434\u0435 \u0441\u043b\u043e\u0438 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u044e\u0442\u0441\u044f \u0432 \u043a\u0430\u0441\u043a\u0430\u0434\u0435?<\/h3>\n<p>\u041a\u0430\u0441\u043a\u0430\u0434 \u2014 \u044d\u0442\u043e \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u043e\u0432 \u0441\u0442\u0438\u043b\u0435\u0439:<\/p>\n<pre><code class=\"css\">html { --button: teal; } button { background: rebeccapurple !important; } .warning { background: maroon; }<\/code><\/pre>\n<pre><code class=\"xml\">&lt;button class=\"warning\" style=\"background: var(--button);\">   what color background? &lt;\/button><\/code><\/pre>\n<p>\u0412\u043e\u0442 \u044d\u0442\u0430\u043f\u044b \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u0430 \u0441 \u0443\u0447\u0451\u0442\u043e\u043c \u043a\u0430\u0441\u043a\u0430\u0434\u043d\u044b\u0445 \u0441\u043b\u043e\u0451\u0432:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/0c5\/e7c\/7cc\/0c5e7c7ccbbaec046f20b5a0cc219f4f.png\" width=\"936\" height=\"1557\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/0c5\/e7c\/7cc\/0c5e7c7ccbbaec046f20b5a0cc219f4f.png\"\/><figcaption><\/figcaption><\/figure>\n<p><em>\u0421\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u043e\u0441\u0442\u044c \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u0432<\/em> \u2014 \u044d\u0442\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u043d\u0430, \u043c\u0430\u043b\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u043a\u0430\u0441\u043a\u0430\u0434\u0430, \u043d\u043e \u0442\u0430\u043a\u0436\u0435 \u044d\u0442\u043e \u044d\u0442\u0430\u043f, \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043c\u044b \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0443\u0435\u043c \u0447\u0430\u0449\u0435 \u0432\u0441\u0435\u0433\u043e. \u041e\u0431\u044b\u0447\u043d\u043e \u043e\u043d \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043e\u0431\u0449\u0435\u0433\u043e <em>\u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u0430 \u043a\u0430\u0441\u043a\u0430\u0434\u0430<\/em>. <\/p>\n<p>\u041c\u043e\u0436\u043d\u043e \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e \u0444\u043b\u0430\u0433 !important \u0438\u043b\u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 style \u00ab\u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u043e\u0441\u0442\u0438\u00bb: \u044d\u0442\u043e \u0431\u044b\u0441\u0442\u0440\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0438\u0442\u044c, \u0447\u0442\u043e \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442 \u0441\u0442\u0438\u043b\u044f \u0432 \u043a\u0430\u0441\u043a\u0430\u0434\u0435 \u043f\u043e\u0432\u044b\u0448\u0430\u0435\u0442\u0441\u044f. \u041a\u0430\u0441\u043a\u0430\u0434\u043d\u044b\u0435 \u0441\u043b\u043e\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u044b \u043f\u0440\u044f\u043c\u043e \u043d\u0430\u0434 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u043e\u0441\u0442\u044c\u044e, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0440\u0430\u0437\u0443\u043c\u043d\u043e \u0441\u0447\u0438\u0442\u0430\u0442\u044c \u0438\u0445 \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043d\u044b\u043c\u0438, \u0447\u0435\u043c \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u043e\u0432.<\/p>\n<p>\u041a\u0430\u0441\u043a\u0430\u0434\u043d\u044b\u0435 \u0441\u043b\u043e\u0438 \u043f\u043e\u0432\u044b\u0448\u0430\u044e\u0442 \u0437\u043d\u0430\u0447\u0438\u043c\u043e\u0441\u0442\u044c \u043f\u043e\u043b\u043d\u043e\u0433\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u0440\u043e\u043b\u0438 !important \u0432 \u043a\u0430\u0441\u043a\u0430\u0434\u0435 \u2014 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u0430\u043a \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430 \u0434\u043b\u044f \u00ab\u043f\u043e\u0432\u044b\u0448\u0435\u043d\u0438\u044f \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u043e\u0441\u0442\u0438\u00bb, \u043d\u043e \u0438 \u043a\u0430\u043a \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0431\u0430\u043b\u0430\u043d\u0441\u0438\u0440\u043e\u0432\u043a\u0438 \u0437\u0430\u0434\u0430\u0447.<\/p>\n<h3>\u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0438, \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u0438 \u0441\u043b\u043e\u0438 !important \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u044e\u0442\u0441\u044f \u0432 \u043f\u0440\u043e\u0442\u0438\u0432\u043e\u043f\u043e\u043b\u043e\u0436\u043d\u043e\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435<\/h3>\n<p>\u041a\u0430\u043a \u0432\u0435\u0431-\u0430\u0432\u0442\u043e\u0440\u044b \u043c\u044b \u0447\u0430\u0441\u0442\u043e \u0441\u0447\u0438\u0442\u0430\u0435\u043c !important \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c \u043f\u043e\u0432\u044b\u0448\u0435\u043d\u0438\u044f \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u043e\u0441\u0442\u0438, \u0447\u0442\u043e\u0431\u044b \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u0438\u043b\u0438 \u0432\u044b\u0441\u043e\u043a\u043e\u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u044b\u0435 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b. \u0412 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0435 \u0441\u043b\u0443\u0447\u0430\u0435\u0432 \u044d\u0442\u043e \u043e\u0431\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0431\u0435\u0437 \u043f\u0440\u043e\u0431\u043b\u0435\u043c, \u0435\u0441\u043b\u0438 \u0440\u0430\u0437\u0440\u0430\u0441\u0442\u0430\u043d\u0438\u0435 \u0434\u043b\u044f \u0432\u0430\u0441 \u043d\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430, \u043d\u043e \u0443\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u043f\u0435\u0440\u0432\u043e\u043e\u0447\u0435\u0440\u0435\u0434\u043d\u0430\u044f \u0446\u0435\u043b\u044c <em>\u0432\u0430\u0436\u043d\u043e\u0441\u0442\u0438<\/em> \u043a\u0430\u043a \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0432 \u043e\u0431\u0449\u0435\u043c \u043a\u0430\u0441\u043a\u0430\u0434\u0435.<\/p>\n<p>\u0412\u0430\u0436\u043d\u043e\u0441\u0442\u044c \u043d\u0443\u0436\u043d\u0430 \u043d\u0435 \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0442\u044c \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442, \u0430 \u0447\u0442\u043e\u0431\u044b \u0441\u0431\u0430\u043b\u0430\u043d\u0441\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442 \u043a\u043e\u043d\u043a\u0443\u0440\u0438\u0440\u0443\u044e\u0449\u0438\u0445 \u0437\u0430\u0434\u0430\u0447.<\/p>\n<h4>\u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0438 \u0432\u0430\u0436\u043d\u043e\u0441\u0442\u0438<\/h4>\n<p>\u0412\u0441\u0451 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0441 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u043e\u0432, \u043e\u0442\u043a\u0443\u0434\u0430 \u0432 \u0432\u0435\u0431-\u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0435 \u0431\u0435\u0440\u0451\u0442\u0441\u044f \u0441\u0442\u0438\u043b\u044c. \u0412 CSS \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0430 \u0442\u0440\u0438. \u042d\u0442\u043e:<\/p>\n<ul>\n<li>\n<p><strong>\u0431\u0440\u0430\u0443\u0437\u0435\u0440<\/strong> (\u0438\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0430\u0433\u0435\u043d\u0442);<\/p>\n<\/li>\n<li>\n<p><strong>\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c<\/strong> (\u0447\u0430\u0441\u0442\u043e \u0447\u0435\u0440\u0435\u0437 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430);<\/p>\n<\/li>\n<li>\n<p><strong>\u0432\u0435\u0431<\/strong>&#8212;<strong>\u0430\u0432\u0442\u043e\u0440\u044b<\/strong> (\u044d\u0442\u043e \u043c\u044b!).<\/p>\n<\/li>\n<\/ul>\n<p>\u0412 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0447\u0438\u0442\u0430\u0435\u043c\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u0437\u0430\u0442\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u044e\u0442 \u0441\u0432\u043e\u0438 \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0442\u0435\u043d\u0438\u044f, \u0438 \u0443\u0436\u0435 \u043c\u044b (\u0430\u0432\u0442\u043e\u0440\u044b) \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u0434\u0438\u0437\u0430\u0439\u043d \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446. \u0418\u0442\u0430\u043a, \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u0443 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 \u0441\u0430\u043c\u044b\u0439 \u043d\u0438\u0437\u043a\u0438\u0439 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442, \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0432 \u043d\u0438\u0445 \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442\u0441\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u043c\u0438 \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0442\u0435\u043d\u0438\u044f\u043c\u0438, \u0430 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0438\u0445 \u0432\u0441\u0435. \u041d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u0435\u043b\u0438 CSS \u043e\u0447\u0435\u043d\u044c \u0447\u0451\u0442\u043a\u043e \u0434\u0430\u043b\u0438 \u043f\u043e\u043d\u044f\u0442\u044c, \u0447\u0442\u043e \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435 \u0441\u043b\u043e\u0432\u043e \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u043e\u0441\u0442\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u0437\u0430 \u043d\u0430\u043c\u0438:<\/p>\n<blockquote>\n<p>\u00ab\u041f\u0440\u0438 \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u0438 \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u043e\u0432 <strong>\u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435 \u0441\u043b\u043e\u0432\u043e \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0437\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c<\/strong>, \u043d\u043e \u0438 \u0430\u0432\u0442\u043e\u0440\u0443 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u043f\u043e\u0437\u0432\u043e\u043b\u0435\u043d\u043e \u043f\u0440\u0438\u043a\u0440\u0435\u043f\u043b\u044f\u0442\u044c \u0441\u0442\u0438\u043b\u0435\u0432\u044b\u0435 \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0438\u00bb.<\/p>\n<p>\u2014 \u0425\u043e\u043a\u043e\u043d \u041b\u0438 (\u0432\u044b\u0434\u0435\u043b\u0435\u043d\u043e \u043c\u043d\u043e\u0439)<\/p>\n<\/blockquote>\n<p>\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, <em>\u0432\u0430\u0436\u043d\u043e\u0441\u0442\u044c<\/em> \u0434\u0430\u0451\u0442 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0443 \u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0432\u0435\u0440\u043d\u0443\u0442\u044c \u0441\u0432\u043e\u0439 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442, \u043a\u043e\u0433\u0434\u0430 \u044d\u0442\u043e \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0432\u0430\u0436\u043d\u043e. \u041a\u043e\u0433\u0434\u0430 \u043a \u0441\u0442\u0438\u043b\u044e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0444\u043b\u0430\u0433 !important, \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u0442\u0440\u0438 \u043d\u043e\u0432\u044b\u0445 \u0441\u043b\u043e\u044f, \u0430 \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043e\u0431\u0440\u0430\u0442\u043d\u044b\u043c!<\/p>\n<p>1) \u0441\u0442\u0438\u043b\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 !important (\u0441\u0430\u043c\u044b\u0435 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043d\u044b\u0435);<\/p>\n<p>2) \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0442\u0435\u043d\u0438\u044f !important;<\/p>\n<p>3) \u0430\u0432\u0442\u043e\u0440\u0441\u043a\u0438\u0435 \u0441\u0442\u0438\u043b\u0438 !important;<\/p>\n<p>4) \u043e\u0431\u044b\u0447\u043d\u044b\u0435 \u0430\u0432\u0442\u043e\u0440\u0441\u043a\u0438\u0435 \u0441\u0442\u0438\u043b\u0438;<\/p>\n<p>5) \u043e\u0431\u044b\u0447\u043d\u044b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0442\u0435\u043d\u0438\u044f;<\/p>\n<p>6) \u043e\u0431\u044b\u0447\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 (\u043d\u0430\u0438\u043c\u0435\u043d\u0435\u0435 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043d\u044b\u0435).<\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0441 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 !important \u043c\u0430\u043b\u043e \u0447\u0442\u043e \u043c\u0435\u043d\u044f\u0435\u0442: \u0432\u0430\u0436\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0431\u043b\u0438\u0437\u043a\u0438 \u043a \u043e\u0431\u044b\u0447\u043d\u044b\u043c; \u043d\u043e \u044d\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u043c\u043e\u0449\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0432\u043e\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044f \u0434\u043b\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f. \u0422\u0430\u0431\u043b\u0438\u0446\u044b \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0441\u0442\u0438\u043b\u0435\u0439 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 \u0440\u044f\u0434 \u0432\u0430\u0436\u043d\u044b\u0445 \u0441\u0442\u0438\u043b\u0435\u0439, \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u043d\u0435 \u0441\u043c\u043e\u0433\u043b\u0438 \u0431\u044b, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<pre><code class=\"css\">iframe:fullscreen {   \/* iframes in full-screen mode don't show a border. *\/   border: none !important;   padding: unset !important; }<\/code><\/pre>\n<p>\u0425\u043e\u0442\u044f \u0432 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0435 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u043f\u0435\u0440\u0432\u043e\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u0442\u0430\u0431\u043b\u0438\u0446 \u0441\u0442\u0438\u043b\u0435\u0439 \u0437\u0430\u0442\u0440\u0443\u0434\u043d\u0435\u043d\u0430, \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0438 \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0434\u043b\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u0441\u0442\u0438\u043b\u0435\u0439 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e\u0442\u0441\u044f \u0432\u043e \u0432\u0441\u0435\u0445. <\/p>\n<p>\u0412 \u044d\u0442\u043e\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u0435\u0441\u0442\u044c \u0444\u043b\u0430\u0436\u043e\u043a, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u0432\u044b\u0431\u0438\u0440\u0430\u043b\u0438, \u0440\u0430\u0437\u0440\u0435\u0448\u0438\u0442\u044c \u0441\u0430\u0439\u0442\u0443 \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u0438\u0445 \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0442\u0435\u043d\u0438\u044f. \u042d\u0442\u043e \u0442\u043e \u0436\u0435, \u0447\u0442\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 !important \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0435 \u0441\u0442\u0438\u043b\u0435\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/995\/54b\/cb3\/99554bcb3e532846379848992c5caf27.jpeg\" width=\"1320\" height=\"996\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/995\/54b\/cb3\/99554bcb3e532846379848992c5caf27.jpeg\" data-blurred=\"true\"\/><figcaption><\/figcaption><\/figure>\n<h4>\u0412\u0430\u0436\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442<\/h4>\n<p>\u0422\u0430 \u0436\u0435 \u0431\u0430\u0437\u043e\u0432\u0430\u044f \u043b\u043e\u0433\u0438\u043a\u0430 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043a <em>\u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0443<\/em> \u0432 \u043a\u0430\u0441\u043a\u0430\u0434\u0435. \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0441\u0442\u0438\u043b\u0438 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430 (\u0442\u0435\u043d\u0435\u0432\u043e\u0439 DOM) \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442\u0441\u044f \u0441\u0442\u0438\u043b\u044f\u043c\u0438 \u0433\u043b\u0430\u0432\u043d\u043e\u0433\u043e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430 (\u043e\u0431\u044b\u0447\u043d\u044b\u0439 DOM). \u041d\u043e \u043f\u0440\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0438 !important \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043d\u0430 \u043f\u0440\u043e\u0442\u0438\u0432\u043e\u043f\u043e\u043b\u043e\u0436\u043d\u044b\u0439:<\/p>\n<ol>\n<li>\n<p>\u0422\u0435\u043d\u0435\u0432\u043e\u0439 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 !important (\u0441\u0430\u043c\u044b\u0439 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043d\u044b\u0439).<\/p>\n<\/li>\n<li>\n<p>\u0413\u043b\u0430\u0432\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 !important.<\/p>\n<\/li>\n<li>\n<p>\u041e\u0431\u044b\u0447\u043d\u044b\u0439 \u0433\u043b\u0430\u0432\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442.<\/p>\n<\/li>\n<li>\n<p>\u041e\u0431\u044b\u0447\u043d\u044b\u0439 \u0442\u0435\u043d\u0435\u0432\u043e\u0439 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 (\u043d\u0430\u0438\u043c\u0435\u043d\u0435\u0435 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043d\u044b\u0439).<\/p>\n<\/li>\n<\/ol>\n<p>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u044b\u0435 \u0432 \u0433\u043b\u0430\u0432\u043d\u043e\u043c \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0435 \u0432\u0430\u0436\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442\u0441\u044f \u0432\u0430\u0436\u043d\u044b\u043c\u0438 \u0441\u0442\u0438\u043b\u044f\u043c\u0438 \u0442\u0435\u043d\u0435\u0432\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430. <\/p>\n<p>\u0412\u043e\u0442 <a href=\"https:\/\/css-tricks.com\/an-introduction-to-web-components\/\">\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442<\/a> odd-bird. \u041e\u0434\u043d\u0438 \u0435\u0433\u043e \u0441\u0442\u0438\u043b\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u044b \u0432 \u0448\u0430\u0431\u043b\u043e\u043d\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 (\u0442\u0435\u043d\u0435\u0432\u043e\u0439 DOM), \u0434\u0440\u0443\u0433\u0438\u0435 \u2014 \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0435 \u0441\u0442\u0438\u043b\u0435\u0439 \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b (\u043e\u0431\u044b\u0447\u043d\u044b\u0439 DOM):<\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/6228fe745af7f3126792b5b8\" data-style=\"\" id=\"6228fe745af7f3126792b5b8\" width=\"\"><\/div>\n<p>\u0423 \u043e\u0431\u043e\u0438\u0445 \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0438\u0439 color \u0432\u0430\u0436\u043d\u043e\u0441\u0442\u044c \u043e\u0431\u044b\u0447\u043d\u0430\u044f, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0433\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 mediumvioletred \u043e\u0431\u043b\u0430\u0434\u0430\u0435\u0442 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043e\u043c. \u041d\u043e \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0438\u044f font-family \u043f\u043e\u043c\u0435\u0447\u0435\u043d\u044b \u043a\u0430\u043a !important, \u0447\u0442\u043e \u0434\u0430\u0451\u0442 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u043e \u0442\u0435\u043d\u0435\u0432\u043e\u043c\u0443 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0443, \u0433\u0434\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f fantasy.<\/p>\n<h4>\u0412\u0430\u0436\u043d\u044b\u0435 \u0441\u043b\u043e\u0438<\/h4>\n<p>\u041f\u0440\u0438\u043d\u0446\u0438\u043f \u0440\u0430\u0431\u043e\u0442\u044b \u043a\u0430\u0441\u043a\u0430\u0434\u043d\u044b\u0445 \u0441\u043b\u043e\u0451\u0432 \u0442\u043e\u0442 \u0436\u0435, \u0447\u0442\u043e \u0443 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u043e\u0432 \u0438 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430, \u043f\u0440\u0438\u0447\u0451\u043c \u0432\u0430\u0436\u043d\u044b\u0435 \u0441\u043b\u043e\u0438 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u044e\u0442\u0441\u044f \u0432 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435. \u0415\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u0430\u044f \u0440\u0430\u0437\u043d\u0438\u0446\u0430 \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u044d\u0442\u043e \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0431\u043e\u043b\u0435\u0435 \u0437\u0430\u043c\u0435\u0442\u043d\u043e \u0438\u0437-\u0437\u0430 \u0441\u043b\u043e\u0451\u0432.<\/p>\n<p>\u041f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u043a\u0430\u0441\u043a\u0430\u0434\u043d\u044b\u0445 \u0441\u043b\u043e\u0451\u0432 \u0432 \u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0438 !important \u043d\u0443\u0436\u043d\u044b \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u0431\u043e\u043b\u0435\u0435 \u043e\u0441\u0442\u043e\u0440\u043e\u0436\u043d\u044b\u0435 \u0438 \u043f\u0440\u043e\u0434\u0443\u043c\u0430\u043d\u043d\u044b\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f. \u042d\u0442\u043e \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0431\u044b\u0441\u0442\u0440\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0437\u0430\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0432\u0435\u0440\u0448\u0438\u043d\u0443 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043e\u0432, \u043d\u043e \u0438 \u043d\u0435\u043e\u0442\u044a\u0435\u043c\u043b\u0435\u043c\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u043a\u0430\u0441\u043a\u0430\u0434\u043d\u043e\u0433\u043e \u043d\u0430\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441\u043b\u043e\u0451\u0432, \u0441\u043f\u043e\u0441\u043e\u0431 <em>\u043f\u043e\u0434\u0447\u0435\u0440\u043a\u043d\u0443\u0442\u044c<\/em> \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u0442\u0435\u0445 \u0438\u043b\u0438 \u0438\u043d\u044b\u0445 \u0441\u0442\u0438\u043b\u0435\u0439 \u043d\u0438\u0436\u043d\u0438\u0445 \u0441\u043b\u043e\u0451\u0432.<\/p>\n<p>\u041a\u0430\u0441\u043a\u0430\u0434\u043d\u044b\u0435 \u0441\u043b\u043e\u0438 \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u044e\u0442\u0441\u044f, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u0435\u0434\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u043e\u0433\u043e \u043f\u043e\u0440\u044f\u0434\u043a\u0430 \u043d\u0435\u0442. \u041d\u043e \u043d\u0430\u0447\u0430\u0442\u044c \u043c\u043e\u0436\u043d\u043e \u0441 \u0442\u0440\u0451\u0445 \u0441\u043b\u043e\u0451\u0432:<\/p>\n<p>1) utilities (\u0441\u0430\u043c\u044b\u0439 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043d\u044b\u0439);<\/p>\n<p>2) components (\u0441\u0440\u0435\u0434\u043d\u0435\u0433\u043e \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u0430);<\/p>\n<p>3) defaults (\u043d\u0430\u0438\u043c\u0435\u043d\u0435\u0435 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043d\u044b\u0439).<\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 \u0441\u0442\u0438\u043b\u0438 \u0432 \u044d\u0442\u0438\u0445 \u0441\u043b\u043e\u044f\u0445 \u043e\u0442\u043c\u0435\u0447\u0430\u044e\u0442\u0441\u044f \u043a\u0430\u043a \u0432\u0430\u0436\u043d\u044b\u0435, \u0432 \u043d\u0438\u0445 \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u0442\u0440\u0438 \u043d\u043e\u0432\u044b\u0445 \u0441\u043b\u043e\u044f, \u043e\u0442\u043c\u0435\u0447\u0435\u043d\u043d\u044b\u0445 !important, \u0432 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435:<\/p>\n<ol>\n<li>\n<p>!important defaults (\u0441\u0430\u043c\u044b\u0439 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043d\u044b\u0439).<\/p>\n<\/li>\n<li>\n<p>!important components.<\/p>\n<\/li>\n<li>\n<p>!important utilities.<\/p>\n<\/li>\n<li>\n<p>\u041e\u0431\u044b\u0447\u043d\u044b\u0435 utilities.<\/p>\n<\/li>\n<li>\n<p>\u041e\u0431\u044b\u0447\u043d\u044b\u0435 components.<\/p>\n<\/li>\n<li>\n<p>\u041e\u0431\u044b\u0447\u043d\u044b\u0435 defaults (\u043d\u0430\u0438\u043c\u0435\u043d\u0435\u0435 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043d\u044b\u0439).<\/p>\n<\/li>\n<\/ol>\n<p>\u0412 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0446\u0432\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u043e \u0432\u0441\u0435\u0445 \u0442\u0440\u0451\u0445 \u043e\u0431\u044b\u0447\u043d\u044b\u0445 \u0441\u043b\u043e\u044f\u0445; \u0437\u0430 \u0441\u0447\u0451\u0442 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0446\u0432\u0435\u0442\u0430 maroon \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442 \u0440\u0430\u0437\u0440\u0435\u0448\u0430\u0435\u0442\u0441\u044f \u0432 \u043f\u043e\u043b\u044c\u0437\u0443 utilities: \u0438\u043c\u0435\u043d\u043d\u043e \u0443 \u043d\u0435\u0433\u043e \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442 \u0432 @layer \u0432\u044b\u0448\u0435. \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435: text-decoration \u043e\u0442\u043c\u0435\u0447\u0435\u043d\u043e \u043a\u0430\u043a !important \u0432 \u0441\u043b\u043e\u044f\u0445 defaults \u0438 components, \u0433\u0434\u0435 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043e\u043c \u043e\u0431\u043b\u0430\u0434\u0430\u044e\u0442 \u0432\u0430\u0436\u043d\u044b\u0435 defaults, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e\u0442 \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u043d\u043e\u0435 \u0432 \u0441\u043b\u043e\u0435 defaults \u043f\u043e\u0434\u0447\u0451\u0440\u043a\u0438\u0432\u0430\u043d\u0438\u0435:<\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/6228fe74e1af860b1c6b9993\" data-style=\"\" id=\"6228fe74e1af860b1c6b9993\" width=\"\"><\/div>\n<h3>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u043e\u0440\u044f\u0434\u043a\u0430 \u0441\u043b\u043e\u0451\u0432<\/h3>\n<p>\u041c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043b\u044e\u0431\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u043b\u043e\u0451\u0432 \u0438 \u043d\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0438\u043b\u0438 \u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0445 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u043c\u0438 \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u043c\u0438. \u041d\u043e \u0441\u0430\u043c\u043e\u0435 \u0432\u0430\u0436\u043d\u043e\u0435 \u2014 \u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u0441\u043b\u043e\u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u0432 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435.<\/p>\n<p>\u041e\u0434\u0438\u043d \u0441\u043b\u043e\u0439 \u0432 \u043a\u043e\u0434\u043e\u0432\u043e\u0439 \u0431\u0430\u0437\u0435 \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437 (\u0432 \u0441\u0442\u0435\u043a\u0435 \u043a\u0430\u0441\u043a\u0430\u0434\u043d\u044b\u0445 \u0441\u043b\u043e\u0451\u0432) \u0432 \u0442\u043e\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044f. \u041f\u0435\u0440\u0432\u044b\u0439 \u0432\u0441\u0442\u0440\u0435\u0442\u0438\u0432\u0448\u0438\u0439\u0441\u044f \u0441\u043b\u043e\u0439 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432\u043d\u0438\u0437\u0443, \u043e\u043d \u043d\u0430\u0438\u043c\u0435\u043d\u0435\u0435 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043d\u044b\u0439, \u0430 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u2014 \u0432\u0432\u0435\u0440\u0445\u0443, \u043e\u043d \u0441\u0430\u043c\u044b\u0439 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043d\u044b\u0439. \u041d\u043e \u0442\u043e\u0433\u0434\u0430 \u0432\u044b\u0441\u0448\u0438\u043c \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043e\u043c \u043e\u0431\u043b\u0430\u0434\u0430\u044e\u0442 \u0441\u0442\u0438\u043b\u0438 \u0431\u0435\u0437 \u0441\u043b\u043e\u0451\u0432:<\/p>\n<pre><code class=\"css\">@layer layer-1 { a { color: red; } } @layer layer-2 { a { color: orange; } } @layer layer-3 { a { color: yellow; } } \/* un-layered *\/ a { color: green; }<\/code><\/pre>\n<ol>\n<li>\n<p>\u0421\u0442\u0438\u043b\u0438 \u0431\u0435\u0437 \u0441\u043b\u043e\u0451\u0432 (\u0441\u0430\u043c\u044b\u0435 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043d\u044b\u0435).<\/p>\n<\/li>\n<li>\n<p>layer-3.<\/p>\n<\/li>\n<li>\n<p>layer-2.<\/p>\n<\/li>\n<li>\n<p>layer-1 (\u043d\u0430\u0438\u043c\u0435\u043d\u0435\u0435 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043d\u044b\u0439).<\/p>\n<\/li>\n<\/ol>\n<p>\u0418, \u043a\u0430\u043a \u0433\u043e\u0432\u043e\u0440\u0438\u043b\u043e\u0441\u044c \u0432\u044b\u0448\u0435, \u043b\u044e\u0431\u044b\u0435 \u0432\u0430\u0436\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u0432 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435:<\/p>\n<pre><code class=\"css\">@layer layer-1 { a { color: red !important; } } @layer layer-2 { a { color: orange !important; } } @layer layer-3 { a { color: yellow !important; } } \/* un-layered *\/ a { color: green !important; }<\/code><\/pre>\n<ol>\n<li>\n<p>layer-1 !important (\u0441\u0430\u043c\u044b\u0439 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043d\u044b\u0439).<\/p>\n<\/li>\n<li>\n<p>layer-2 !important.<\/p>\n<\/li>\n<li>\n<p>layer-3!important.<\/p>\n<\/li>\n<li>\n<p>\u0421\u0442\u0438\u043b\u0438 \u0431\u0435\u0437 \u0441\u043b\u043e\u0451\u0432 !important.<\/p>\n<\/li>\n<li>\n<p>\u041e\u0431\u044b\u0447\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u0431\u0435\u0437 \u0441\u043b\u043e\u0451\u0432.<\/p>\n<\/li>\n<li>\n<p>\u041e\u0431\u044b\u0447\u043d\u044b\u0439 layer-3.<\/p>\n<\/li>\n<li>\n<p>\u041e\u0431\u044b\u0447\u043d\u044b\u0439 layer-2.<\/p>\n<\/li>\n<li>\n<p>\u041e\u0431\u044b\u0447\u043d\u044b\u0439 layer-1 (\u043d\u0430\u0438\u043c\u0435\u043d\u0435\u0435 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043d\u044b\u0439).<\/p>\n<\/li>\n<\/ol>\n<p>\u0421\u043b\u043e\u0438 \u043c\u043e\u0436\u043d\u043e \u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u0443\u044e \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0443 \u0441\u043b\u043e\u0451\u0432 \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f \u0438 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u0441\u043b\u043e\u0451\u0432:<\/p>\n<pre><code class=\"css\">@layer layer-1 { a { color: red; } } @layer layer-2 { a { color: orange; } } @layer layer-3 {   @layer sub-layer-1 { a { color: yellow; } }   @layer sub-layer-2 { a { color: green; } }   \/* un-nested *\/ a { color: blue; } } \/* un-layered *\/ a { color: indigo; }<\/code><\/pre>\n<ol>\n<li>\n<p>\u0421\u0442\u0438\u043b\u0438 \u0431\u0435\u0437 \u0441\u043b\u043e\u0451\u0432 (\u0441\u0430\u043c\u044b\u0435 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043d\u044b\u0435).<\/p>\n<\/li>\n<li>\n<p>layer-3:<\/p>\n<\/li>\n<\/ol>\n<ol>\n<li>\n<p>layer-3 \u043d\u0435\u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0439.<\/p>\n<\/li>\n<li>\n<p>layer-3, sub-layer-2.<\/p>\n<\/li>\n<li>\n<p>layer-3, sub-layer-1.<\/p>\n<\/li>\n<\/ol>\n<ol start=\"3\">\n<li>\n<p>layer-2.<\/p>\n<\/li>\n<li>\n<p>layer-1 (\u043d\u0430\u0438\u043c\u0435\u043d\u0435\u0435 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043d\u044b\u0439).<\/p>\n<\/li>\n<\/ol>\n<p>\u0421\u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0441\u043b\u043e\u0438 \u0432 \u043e\u043a\u043e\u043d\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435 \u0441\u043b\u043e\u0451\u0432 \u0432\u0441\u0435\u0433\u0434\u0430 \u043e\u0441\u0442\u0430\u044e\u0442\u0441\u044f \u0432\u043c\u0435\u0441\u0442\u0435 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u0441\u0435 \u043f\u043e\u0434\u0441\u043b\u043e\u0438 layer-3 \u043e\u043a\u0430\u0436\u0443\u0442\u0441\u044f \u0440\u044f\u0434\u043e\u043c \u0434\u0440\u0443\u0433 \u0441 \u0434\u0440\u0443\u0433\u043e\u043c). \u041d\u043e \u0432 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u043c \u0437\u0434\u0435\u0441\u044c \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0442\u0430\u043a\u043e\u0435 \u0436\u0435, \u043a\u0430\u043a \u0435\u0441\u043b\u0438 \u0431\u044b \u0441\u043f\u0438\u0441\u043e\u043a \u0431\u044b\u043b \u00ab\u0443\u043f\u0440\u043e\u0449\u0451\u043d\u043d\u044b\u043c\u00bb, \u0442. \u0435. \u0435\u0434\u0438\u043d\u044b\u043c \u0441\u043f\u0438\u0441\u043a\u043e\u043c \u0438\u0437 \u0448\u0435\u0441\u0442\u0438 \u043f\u0443\u043d\u043a\u0442\u043e\u0432. \u041a\u043e\u0433\u0434\u0430 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0441\u043b\u043e\u0451\u0432 !important, \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0432\u0441\u0435\u0433\u043e \u0443\u043f\u0440\u043e\u0449\u0451\u043d\u043d\u043e\u0433\u043e \u0441\u043f\u0438\u0441\u043a\u0430 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043e\u0431\u0440\u0430\u0442\u043d\u044b\u043c.<\/p>\n<p>\u041d\u043e \u0441\u043b\u043e\u0438 \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c\u0441\u044f \u0435\u0434\u0438\u043d\u043e\u0436\u0434\u044b \u0432 \u043e\u0434\u043d\u043e\u043c \u043c\u0435\u0441\u0442\u0435. \u041c\u044b \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0441\u043b\u043e\u0438, \u0447\u0442\u043e\u0431\u044b \u0438\u0445 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u0432 \u043e\u0434\u043d\u043e\u043c \u043c\u0435\u0441\u0442\u0435 \u0434\u043b\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0438\u0445 \u043f\u043e\u0440\u044f\u0434\u043a\u0430, \u0430 \u0437\u0430\u0442\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043a \u043d\u0438\u043c \u0441\u0442\u0438\u043b\u0438 \u0438\u0437 \u043b\u044e\u0431\u043e\u0433\u043e \u043c\u0435\u0441\u0442\u0430:<\/p>\n<pre><code class=\"css\">\/* describe the layer in one place *\/ @layer my-layer;  \/* append styles to it from anywhere *\/ @layer my-layer { a { color: red; } }<\/code><\/pre>\n<p>\u0412 \u043e\u0434\u043d\u043e\u043c \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0438\u0438 \u043c\u044b \u0434\u0430\u0436\u0435 \u043c\u043e\u0436\u0435\u043c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u0446\u0435\u043b\u044b\u0439 \u0443\u043f\u043e\u0440\u044f\u0434\u043e\u0447\u0435\u043d\u043d\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u0441\u043b\u043e\u0451\u0432:<\/p>\n<pre><code class=\"css\">@layer one, two, three, four, five, etc;<\/code><\/pre>\n<p>\u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0430\u0432\u0442\u043e\u0440\u0443 \u0441\u0430\u0439\u0442\u0430 \u0432 \u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0438 \u043f\u043e\u0440\u044f\u0434\u043a\u0430 \u0441\u043b\u043e\u0451\u0432 \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435 \u0441\u043b\u043e\u0432\u043e \u0437\u0430 \u0441\u043e\u0431\u043e\u0439. \u041c\u043e\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0441\u043b\u043e\u0451\u0432 \u0437\u0430\u0440\u0430\u043d\u0435\u0435, \u0442\u043e \u0435\u0441\u0442\u044c \u0434\u043e \u0438\u043c\u043f\u043e\u0440\u0442\u0430 \u043b\u044e\u0431\u043e\u0433\u043e \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0435\u0433\u043e \u043a\u043e\u0434\u0430, \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0438 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0432 \u043e\u0434\u043d\u043e\u043c \u043c\u0435\u0441\u0442\u0435, \u043d\u0435 \u0431\u0435\u0441\u043f\u043e\u043a\u043e\u044f\u0441\u044c \u043e\u0431 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0441\u043b\u043e\u0451\u0432 \u0432 \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0435\u043c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0435.<\/p>\n<h3>\u0421\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441: \u0440\u0430\u0431\u043e\u0442\u0430 \u0441 \u043a\u0430\u0441\u043a\u0430\u0434\u043d\u044b\u043c\u0438 \u0441\u043b\u043e\u044f\u043c\u0438<\/h3>\n<p>\u041f\u0435\u0440\u0435\u0439\u0434\u0451\u043c \u043a \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0443.<\/p>\n<h4>\u0418\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u0434\u0430\u0442\u044c \u043f\u043e\u0440\u044f\u0434\u043e\u043a @layer<\/h4>\n<p>\u0421\u043b\u043e\u0438 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u044e\u0442\u0441\u044f \u0432 \u043f\u043e\u0440\u044f\u0434\u043a\u0435 \u0438\u0445 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u0430\u0436\u043d\u043e \u0438\u043c\u0435\u0442\u044c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442, \u0437\u0430\u0434\u0430\u044e\u0449\u0438\u0439 \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0432 \u043e\u0434\u043d\u043e\u043c \u043c\u0435\u0441\u0442\u0435. \u0417\u0434\u0435\u0441\u044c \u043c\u043e\u0436\u043d\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0435\u0439 @layer:<\/p>\n<pre><code class=\"css\">@layer &lt;layer-name>#;<\/code><\/pre>\n<p>\u0420\u0435\u0448\u0451\u0442\u043a\u0430 \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u0432 \u0441\u043f\u0438\u0441\u043e\u043a \u0441\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u0442\u043e\u043b\u044c\u043a\u043e \u0443\u0433\u043e\u0434\u043d\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u0451\u043d\u043d\u044b\u043c\u0438 \u0437\u0430\u043f\u044f\u0442\u044b\u043c\u0438 \u0438\u043c\u0451\u043d \u0441\u043b\u043e\u0451\u0432:<\/p>\n<pre><code class=\"css\">@layer reset, defaults, framework, components, utilities;<\/code><\/pre>\n<p>\u0418\u0445 \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0441\u0442\u0430\u043d\u0435\u0442 \u0442\u0430\u043a\u0438\u043c:<\/p>\n<ol>\n<li>\n<p>\u0441\u0442\u0438\u043b\u0438 \u0431\u0435\u0437 \u0441\u043b\u043e\u0451\u0432 (\u0441\u0430\u043c\u044b\u0435 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043d\u044b\u0435);<\/p>\n<\/li>\n<li>\n<p>utilities;<\/p>\n<\/li>\n<li>\n<p>components;<\/p>\n<\/li>\n<li>\n<p>framework;<\/p>\n<\/li>\n<li>\n<p>defaults;<\/p>\n<\/li>\n<li>\n<p>reset (\u043d\u0430\u0438\u043c\u0435\u043d\u0435\u0435 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043d\u044b\u0439).<\/p>\n<\/li>\n<\/ol>\n<p>\u041c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0443\u0433\u043e\u0434\u043d\u043e \u0438\u043c\u0451\u043d, \u043d\u0435 \u0437\u0430\u0431\u044b\u0432\u0430\u044f, \u0447\u0442\u043e \u0432\u0430\u0436\u0435\u043d \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0438\u0445 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044f. \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0431\u0443\u0434\u0435\u0442 \u0442\u0435\u043c \u0436\u0435:<\/p>\n<pre><code class=\"css\">@layer reset, defaults, framework, components, utilities;<\/code><\/pre>\n<p>\u0412 \u043b\u043e\u0433\u0438\u043a\u0435 \u0443\u043f\u043e\u0440\u044f\u0434\u043e\u0447\u0435\u043d\u0438\u044f \u043f\u043e\u0440\u044f\u0434\u043e\u043a reset, defaults \u0438 framework \u0432\u043e \u0432\u0442\u043e\u0440\u043e\u043c @layer \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0438\u0433\u043d\u043e\u0440\u0438\u0440\u043e\u0432\u0430\u043d, \u0432\u0435\u0434\u044c \u044d\u0442\u0438 \u0441\u043b\u043e\u0438 \u0443\u0436\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u044b. \u0421 \u044d\u0442\u0438\u043c \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u043e\u043c \u0441\u043f\u0438\u0441\u043a\u0430 @layer \u0432 \u043b\u043e\u0433\u0438\u043a\u0443 \u0443\u043f\u043e\u0440\u044f\u0434\u043e\u0447\u0435\u043d\u0438\u044f \u0441\u043b\u043e\u0451\u0432 \u043d\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0438\u043a\u0430\u043a\u043e\u0439 \u043e\u0441\u043e\u0431\u043e\u0439 \u043c\u0430\u0433\u0438\u0438: \u0441\u043b\u043e\u0438 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u044e\u0442\u0441\u044f \u0441\u043e\u0433\u043b\u0430\u0441\u043d\u043e <em>\u043f\u043e\u0440\u044f\u0434\u043a\u0443 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044f \u0432 \u043a\u043e\u0434\u0435<\/em>. <\/p>\n<p>\u041f\u0435\u0440\u0432\u044b\u043c \u0437\u0434\u0435\u0441\u044c \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f reset \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0441\u043f\u0438\u0441\u043a\u0430 @layer. \u0412\u0441\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 @layer \u043c\u043e\u0433\u0443\u0442 \u043b\u0438\u0448\u044c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0438\u043c\u0435\u043d\u0430 \u0441\u043b\u043e\u0451\u0432 \u0432 \u0441\u043f\u0438\u0441\u043e\u043a \u2014 <em>\u0443\u0436\u0435 \u0438\u043c\u0435\u044e\u0449\u0438\u0435\u0441\u044f \u0441\u043b\u043e\u0438 \u0441 \u0438\u0445 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043d\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u0441\u0442\u044f\u0442\u0441\u044f<\/em>. \u042d\u0442\u043e \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u044f, \u0447\u0442\u043e \u0432\u044b \u0432\u0441\u0435\u0433\u0434\u0430 \u0441\u043c\u043e\u0436\u0435\u0442\u0435 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043e\u043a\u043e\u043d\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043e\u0431\u0449\u0438\u0439 \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0441\u043b\u043e\u0451\u0432 \u0438\u0437 \u043e\u0434\u043d\u043e\u0433\u043e \u043c\u0435\u0441\u0442\u0430, \u0442\u043e \u0435\u0441\u0442\u044c \u0432 \u0441\u0430\u043c\u043e\u043c \u043d\u0430\u0447\u0430\u043b\u0435 \u0441\u0442\u0438\u043b\u0435\u0439.<\/p>\n<p>\u0418\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438 \u0443\u043f\u043e\u0440\u044f\u0434\u043e\u0447\u0438\u0432\u0430\u043d\u0438\u044f \u0441\u043b\u043e\u0451\u0432 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u044b \u043d\u0430\u0432\u0435\u0440\u0445\u0443 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0441\u0442\u0438\u043b\u0435\u0439, \u043f\u0435\u0440\u0435\u0434 \u043f\u0440\u0430\u0432\u0438\u043b\u043e\u043c @import, \u043d\u043e \u043d\u0435 \u043c\u0435\u0436\u0434\u0443 \u0438\u043c\u043f\u043e\u0440\u0442\u0430\u043c\u0438. \u041c\u044b \u043e\u0447\u0435\u043d\u044c \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u043e\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u0441\u043b\u043e\u0438 \u0432 \u043e\u0434\u043d\u043e\u043c \u043c\u0435\u0441\u0442\u0435: \u0442\u0430\u043a \u0432\u044b \u0432\u0441\u0435\u0433\u0434\u0430 \u0431\u0443\u0434\u0435\u0442\u0435 \u0437\u043d\u0430\u0442\u044c, \u0433\u0434\u0435 \u0438\u0441\u043a\u0430\u0442\u044c \u0438\u043b\u0438 \u0432\u043d\u043e\u0441\u0438\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f.<\/p>\n<h4>\u0411\u043b\u043e\u0447\u043d\u044b\u0439 @layer<\/h4>\n<p>\u0412 \u0431\u043b\u043e\u0447\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u0430 @layer \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u043d\u043e \u0438\u043c\u044f \u0441\u043b\u043e\u044f, \u043d\u043e \u0437\u0430\u0442\u0435\u043c \u043a \u044d\u0442\u043e\u043c\u0443 \u0441\u043b\u043e\u044e \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0441\u0442\u0438\u043b\u0438:<\/p>\n<pre><code class=\"css\">@layer &lt;layer-name> {   \/* styles added to the layer *\/ }<\/code><\/pre>\n<p>\u041f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0432 \u0431\u043b\u043e\u043a @layer \u043c\u043e\u0436\u043d\u043e \u043c\u043d\u043e\u0433\u043e\u0435 \u2014 \u044d\u0442\u043e \u043c\u0443\u043b\u044c\u0442\u0438\u043c\u0435\u0434\u0438\u0439\u043d\u044b\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b, \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b, \u0441\u0442\u0438\u043b\u0438, \u0437\u0430\u043f\u0440\u043e\u0441\u044b @support \u0438 \u0442. \u0434. \u041d\u0435\u043b\u044c\u0437\u044f \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0442\u0443\u0434\u0430 \u043d\u0430\u0431\u043e\u0440 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432, \u0438\u043c\u043f\u043e\u0440\u0442\u044b \u0438 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430 \u0438\u043c\u0451\u043d. \u0417\u0430\u0442\u043e \u0435\u0441\u0442\u044c \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u0442\u0438\u043b\u0435\u0439 \u0432 \u0441\u043b\u043e\u0439.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0438\u043c\u044f \u0441\u043b\u043e\u044f \u043d\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043e, \u043e\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043e \u0432 \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0441\u043b\u043e\u0451\u0432 \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u0430\u0432\u0438\u043b\u0443. \u041d\u043e, \u0435\u0441\u043b\u0438 \u0438\u043c\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043e, \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0441\u0442\u0438\u043b\u0438 \u043a \u0438\u043c\u0435\u044e\u0449\u0438\u043c\u0441\u044f \u0441\u043b\u043e\u044f\u043c \u0438\u0437 \u043b\u044e\u0431\u043e\u0433\u043e \u043c\u0435\u0441\u0442\u0430 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430 \u0431\u0435\u0437 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u0430 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0441\u043b\u043e\u044f.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0441\u043b\u043e\u0451\u0432 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f @layer, \u0442\u043e \u0431\u0435\u0441\u043f\u043e\u043a\u043e\u0438\u0442\u044c\u0441\u044f \u043e \u043f\u043e\u0440\u044f\u0434\u043a\u0435 \u0431\u043b\u043e\u043a\u043e\u0432 \u0441\u043b\u043e\u0451\u0432 \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u043d\u0443\u0436\u043d\u043e:<\/p>\n<pre><code class=\"css\">\/* establish the order up-front *\/ @layer defaults, components, utilities;  \/* add styles to layers in any order *\/ @layer utilities {   [hidden] { display: none; } }  \/* utilities will override defaults, based on established order *\/ @layer defaults {   * { box-sizing: border-box; }   img { display: block; } }<\/code><\/pre>\n<h4>\u0413\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u043a\u0430 (\u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445) \u0441\u043b\u043e\u0451\u0432<\/h4>\n<p>\u0421\u043b\u043e\u0438 \u043c\u043e\u0436\u043d\u043e \u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u0430\u043c \u0438\u0445 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u0438:<\/p>\n<pre><code class=\"css\">@layer one {   \/* sorting the sub-layers *\/   @layer two, three;    \/* styles ... *\/   @layer three { \/* styles ... *\/ }   @layer two { \/* styles ... *\/ } }<\/code><\/pre>\n<p>\u0422\u0430\u043a \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0441\u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0441\u043b\u043e\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043a\u0430\u043a \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0435 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0438 \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u0433\u043e \u0438\u043c\u0451\u043d \u0441 \u0442\u043e\u0447\u043a\u043e\u0439. \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u043f\u0440\u044f\u043c\u043e\u0439 \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043f\u043e\u0434\u0441\u043b\u043e\u044f\u043c \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u043c\u0438 \u0433\u0440\u0443\u043f\u043f\u044b:<\/p>\n<pre><code class=\"css\">\/* sorting nested layers directly *\/ @layer one.two, one.three;  \/* adding to nested layers directly *\/ @layer one.three { \/* ... *\/ } @layer one.two { \/* ... *\/ }<\/code><\/pre>\n<p>\u041f\u0440\u0430\u0432\u0438\u043b\u0430 \u0443\u043f\u043e\u0440\u044f\u0434\u043e\u0447\u0435\u043d\u0438\u044f \u0441\u043b\u043e\u0451\u0432 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u043c \u0443\u0440\u043e\u0432\u043d\u0435 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u0438. \u041b\u044e\u0431\u044b\u0435 \u0441\u0442\u0438\u043b\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u0432\u043b\u043e\u0436\u0435\u043d\u044b \u0433\u043b\u0443\u0431\u0436\u0435, \u0432 \u044d\u0442\u043e\u043c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 \u0441\u0447\u0438\u0442\u0430\u044e\u0442\u0441\u044f \u00ab\u0441\u0442\u0438\u043b\u044f\u043c\u0438 \u0431\u0435\u0437 \u0441\u043b\u043e\u0451\u0432\u00bb, \u0430 \u0437\u043d\u0430\u0447\u0438\u0442, \u043e\u0431\u043b\u0430\u0434\u0430\u044e\u0442 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043e\u043c \u043d\u0430\u0434 \u0431\u043e\u043b\u0435\u0435 \u0433\u043b\u0443\u0431\u043e\u043a\u0438\u043c\u0438 \u0441\u043b\u043e\u044f\u043c\u0438:<\/p>\n<pre><code class=\"css\">@layer defaults {   \/* un-layered defaults (higher priority) *\/   :any-link { color: rebeccapurple; }    \/* layered defaults (lower priority) *\/   @layer reset {     a[href] { color: blue; }   } }<\/code><\/pre>\n<p>\u0421\u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0441\u043b\u043e\u0438 \u0442\u0430\u043a\u0436\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u0438\u0445 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0441\u043b\u043e\u044f, \u0442\u0430\u043a \u0447\u0442\u043e \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0441\u043b\u043e\u0451\u0432 \u043d\u0435 \u0441\u043c\u0435\u0448\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u043e \u0433\u0440\u0443\u043f\u043f\u0430\u043c. \u0412 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0441\u043e\u0440\u0442\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u043b\u043e\u0438 \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f, \u0430 \u0437\u0430\u0442\u0435\u043c \u0441\u043b\u043e\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u0439 \u0433\u0440\u0443\u043f\u043f\u044b:<\/p>\n<pre><code class=\"css\">@layer reset.type, default.type, reset.media, default.media;<\/code><\/pre>\n<p>\u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0441\u043b\u043e\u0451\u0432:<\/p>\n<ul>\n<li>\n<p><em>\u0431\u0435\u0437 \u0441\u043b\u043e\u0451\u0432<\/em> (\u0441\u0430\u043c\u044b\u0439 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043d\u044b\u0439);<\/p>\n<\/li>\n<li>\n<p>\u0433\u0440\u0443\u043f\u043f\u0430 default:<\/p>\n<\/li>\n<\/ul>\n<ul>\n<li>\n<p>default<em> \u0431\u0435\u0437 \u0441\u043b\u043e\u0451\u0432;<\/em><\/p>\n<\/li>\n<li>\n<p>default.media;<\/p>\n<\/li>\n<\/ul>\n<ul>\n<li>\n<p>default.type;<\/p>\n<\/li>\n<li>\n<p>\u0433\u0440\u0443\u043f\u043f\u0430 reset:<\/p>\n<\/li>\n<\/ul>\n<ul>\n<li>\n<p>reset<em> \u0431\u0435\u0437 \u0441\u043b\u043e\u0451\u0432<\/em>;<\/p>\n<\/li>\n<li>\n<p>reset.media;<\/p>\n<\/li>\n<li>\n<p>reset.type.<\/p>\n<\/li>\n<\/ul>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435: \u0438\u043c\u0435\u043d\u0430 \u0441\u043b\u043e\u0451\u0432 \u0442\u043e\u0436\u0435 \u0432 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0438 \u043d\u0435 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u043b\u0438 \u0438 \u043d\u0435 \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u043e\u0432\u0430\u043b\u0438 \u0441 \u043e\u0434\u043d\u043e\u0438\u043c\u0451\u043d\u043d\u044b\u043c\u0438 \u0441\u043b\u043e\u044f\u043c\u0438 \u0432\u043d\u0435 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u0438. \u041e\u0431\u0435 \u0433\u0440\u0443\u043f\u043f\u044b \u043c\u043e\u0433\u0443\u0442 \u0438\u043c\u0435\u0442\u044c \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u043f\u043e\u0434\u0441\u043b\u043e\u0438 media.<\/p>\n<p>\u0422\u0430\u043a\u0430\u044f \u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u043a\u0430 \u043f\u0440\u0438\u043e\u0431\u0440\u0435\u0442\u0430\u0435\u0442 \u043e\u0441\u043e\u0431\u0443\u044e \u0432\u0430\u0436\u043d\u043e\u0441\u0442\u044c \u0432 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0438 @import \u0438\u043b\u0438 &lt;link> \u043a \u0446\u0435\u043b\u044b\u043c \u0442\u0430\u0431\u043b\u0438\u0446\u0430\u043c \u0441\u0442\u0438\u043b\u0435\u0439 \u0441\u043b\u043e\u0451\u0432. \u0412 \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u0445 \u0442\u0438\u043f\u0430 <a href=\"https:\/\/getbootstrap.com\/\">Bootstrap<\/a> \u0432\u043d\u0443\u0442\u0440\u0438 \u043c\u043e\u0433\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u043b\u043e\u0438. \u041d\u043e \u044d\u0442\u0438 \u0441\u043b\u043e\u0438 \u043c\u043e\u0436\u043d\u043e \u0432\u043b\u043e\u0436\u0438\u0442\u044c \u0432 \u0438\u043c\u043f\u043e\u0440\u0442\u0435 \u0432 \u043e\u0431\u0449\u0443\u044e \u0433\u0440\u0443\u043f\u043f\u0443 \u0441\u043b\u043e\u0451\u0432 bootstrap, \u0447\u0442\u043e\u0431\u044b \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u043e\u0432 \u0438\u0445 \u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u0438\u044f.<\/p>\n<h4>\u041d\u0430\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441\u043b\u043e\u0451\u0432 \u0446\u0435\u043b\u044b\u0445 \u0442\u0430\u0431\u043b\u0438\u0446 \u0441\u0442\u0438\u043b\u0435\u0439 \u0447\u0435\u0440\u0435\u0437 @import \u0438\u043b\u0438 &lt;link><\/h4>\n<p>\u0426\u0435\u043b\u044b\u0435 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0441\u0442\u0438\u043b\u0435\u0439 \u043a \u0441\u043b\u043e\u044e \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043d\u043e\u0432\u043e\u0433\u043e \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 layer() \u0441 \u043f\u0440\u0430\u0432\u0438\u043b\u0430\u043c\u0438 @import:<\/p>\n<pre><code class=\"css\">\/* styles imported into to the &lt;layer-name> layer *\/ @import url('example.css') layer(&lt;layer-name>);<\/code><\/pre>\n<p>\u0415\u0441\u0442\u044c \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0430\u0442\u0440\u0438\u0431\u0443\u0442 layer \u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 HTML &lt;link>, \u0445\u043e\u0442\u044f \u043e\u043d\u043e \u0434\u043e\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0438 \u043f\u043e\u043a\u0430 \u043d\u0438\u0433\u0434\u0435<a href=\"https:\/\/css.oddbird.net\/layers\/guide\/#assigning-layers-in-html-with-the-link-tag\"> \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f<\/a>. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0434\u043b\u044f \u0438\u043c\u043f\u043e\u0440\u0442\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0438\u043b\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u044f \u043b\u044e\u0431\u044b\u0435 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0435 \u0441\u043b\u043e\u0438 \u043f\u043e\u0434 \u0438\u043c\u0435\u043d\u0435\u043c \u043e\u0434\u043d\u043e\u0433\u043e \u0441\u043b\u043e\u044f, \u0438\u043b\u0438 \u043a\u0430\u043a \u0441\u043f\u043e\u0441\u043e\u0431 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u043b\u043e\u0451\u0432 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b.<\/p>\n<h4>\u0410\u043d\u043e\u043d\u0438\u043c\u043d\u044b\u0435 (\u0431\u0435\u0437\u044b\u043c\u044f\u043d\u043d\u044b\u0435) \u0441\u043b\u043e\u0438<\/h4>\n<p>\u0418\u043c\u0435\u043d\u0430 \u0441\u043b\u043e\u0451\u0432 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u043c\u0443 \u0441\u043b\u043e\u044e \u0438\u0437 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043c\u0435\u0441\u0442, \u0447\u0442\u043e\u0431\u044b \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u043b\u0438 \u043a\u043e\u043c\u0431\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0431\u043b\u043e\u043a\u0438 \u0441\u043b\u043e\u0451\u0432, \u043d\u043e \u043e\u043d\u0438 \u043d\u0435\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b. \u0411\u043b\u043e\u0447\u043d\u043e\u0435 <code>@layer<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0431\u0435\u0437\u044b\u043c\u044f\u043d\u043d\u044b\u0435 (\u0430\u043d\u043e\u043d\u0438\u043c\u043d\u044b\u0435) \u0441\u043b\u043e\u0438.<\/p>\n<pre><code class=\"css\">@layer { \/* ... *\/ } @layer { \/* ... *\/ }<\/code><\/pre>\n<p>\u0415\u0449\u0451 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u2014 \u044d\u0442\u043e \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u0438\u043c\u043f\u043e\u0440\u0442\u0430 \u0441 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u043c \u0441\u043b\u043e\u0432\u043e\u043c layer \u0432\u043c\u0435\u0441\u0442\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u0438 layer():<\/p>\n<pre><code class=\"css\">\/* styles imported into to a new anonymous layer *\/ @import url('..\/example.css') layer;<\/code><\/pre>\n<p>\u041a\u0430\u0436\u0434\u044b\u0439 \u0430\u043d\u043e\u043d\u0438\u043c\u043d\u044b\u0439 \u0441\u043b\u043e\u0439 \u0443\u043d\u0438\u043a\u0430\u043b\u0435\u043d \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a \u0442\u043e\u043c\u0443 \u043f\u043e\u0440\u044f\u0434\u043a\u0443 \u0441\u043b\u043e\u0451\u0432, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043e\u043d \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u0435\u0442\u0441\u044f. \u041d\u0435\u043b\u044c\u0437\u044f \u0441\u0441\u044b\u043b\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0430\u043d\u043e\u043d\u0438\u043c\u043d\u044b\u0435 \u0441\u043b\u043e\u0438 \u0438\u0437 \u0434\u0440\u0443\u0433\u0438\u0445 \u043f\u0440\u0430\u0432\u0438\u043b \u0441\u043b\u043e\u0451\u0432 \u0434\u043b\u044f \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438 \u0438\u043b\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u0442\u0438\u043b\u0435\u0439. \u0412\u0435\u0440\u043e\u044f\u0442\u043d\u043e, \u0438\u0445 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u043d\u0435\u0447\u0430\u0441\u0442\u043e. \u0412\u043e\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0435 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b:<\/p>\n<ul>\n<li>\n<p>\u041f\u0440\u043e\u0435\u043a\u0442\u044b \u043c\u043e\u0433\u043b\u0438 \u0431\u044b \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u0447\u0442\u043e \u0432\u0441\u0435 \u0441\u0442\u0438\u043b\u0438 \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0441\u043b\u043e\u044f \u0434\u043e\u043b\u0436\u043d\u044b \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0442\u044c\u0441\u044f \u0432 \u043e\u0434\u043d\u043e\u043c \u043c\u0435\u0441\u0442\u0435.<\/p>\n<\/li>\n<li>\n<p>\u0421\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u043c\u043e\u0433\u043b\u0438 \u0431\u044b \u00ab\u0441\u043a\u0440\u044b\u0432\u0430\u0442\u044c\u00bb \u0441\u0432\u043e\u0451 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0435 \u043d\u0430\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441\u043b\u043e\u0451\u0432 \u0432\u043d\u0443\u0442\u0440\u0438 \u0430\u043d\u043e\u043d\u0438\u043c\u043d\u044b\u0445 \u0441\u043b\u043e\u0451\u0432, \u0447\u0442\u043e\u0431\u044b \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0435 \u043d\u0430\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0435 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u0438\u0441\u044c \u0447\u0430\u0441\u0442\u044c\u044e \u043e\u0442\u043a\u0440\u044b\u0442\u043e\u0433\u043e API.<\/p>\n<\/li>\n<\/ul>\n<h4>\u0412\u043e\u0437\u0432\u0440\u0430\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u043a \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u043c\u0443 \u0441\u043b\u043e\u044e<\/h4>\n<p>\u0415\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u00ab\u0432\u0435\u0440\u043d\u0443\u0442\u044c\u00bb \u0441\u0442\u0438\u043b\u044c \u0432 \u043a\u0430\u0441\u043a\u0430\u0434\u0435 \u043a \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u043c\u0443 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044e, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c\u043e\u043c\u0443 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u043e\u043c \u0438\u043b\u0438 \u0441\u043b\u043e\u0435\u043c \u0441 \u0431\u043e\u043b\u0435\u0435 \u043d\u0438\u0437\u043a\u0438\u043c \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043e\u043c, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u0440\u044f\u0434 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 CSS \u0438 \u043d\u043e\u0432\u043e\u0435 \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0435 \u0441\u043b\u043e\u0432\u043e revert-layer, \u0442\u043e\u0436\u0435 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0435, \u0442\u043e \u0435\u0441\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0435\u0435 \u0432 \u043b\u044e\u0431\u043e\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0435.<\/p>\n<h3>\u041a\u043e\u043d\u0442\u0435\u043a\u0441\u0442: \u0438\u043c\u0435\u044e\u0449\u0438\u0435\u0441\u044f \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u0441\u043b\u043e\u0432\u0430 \u043a\u0430\u0441\u043a\u0430\u0434\u0430<\/h3>\n<p>\u0412 CSS \u0435\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/all#values\">\u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0445 <\/a>\u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0445 \u0441\u043b\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u043b\u044e\u0431\u043e\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0435, \u0447\u0442\u043e\u0431\u044b \u043f\u043e-\u0440\u0430\u0437\u043d\u043e\u043c\u0443 \u043f\u043e\u043c\u043e\u0447\u044c \u043a\u0430\u0441\u043a\u0430\u0434\u0443 \u043e\u0442\u043a\u0430\u0442\u0438\u0442\u044c\u0441\u044f.<\/p>\n<ul>\n<li>\n<p>\u0421 initial \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432 <em>\u0443\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u0435<\/em> \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043b\u044e\u0431\u044b\u0445 \u0441\u0442\u0438\u043b\u0435\u0439, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e. \u042d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0443\u0434\u0438\u0432\u0438\u0442\u044c, \u0432\u0435\u0434\u044c \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u043c\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438 \u0447\u0430\u0441\u0442\u043e \u0441\u0447\u0438\u0442\u0430\u044e\u0442 \u0441\u0442\u0438\u043b\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430. \u041d\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 initial, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 display \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f inline (\u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u043c), \u0432 \u043a\u0430\u043a\u043e\u043c \u0431\u044b \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435 \u043e\u043d\u043e \u043d\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u043e\u0441\u044c.<\/p>\n<\/li>\n<li>\n<p>\u0421 inherit \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430. \u0414\u043b\u044f \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u0435\u043c\u044b\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u044d\u0442\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u043e\u0434\u043d\u0430\u043a\u043e \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f.<\/p>\n<\/li>\n<li>\n<p>\u0421 unset \u0432\u0441\u0435 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043a\u0430\u043a \u0431\u0443\u0434\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0443\u0434\u0430\u043b\u044f\u044e\u0442\u0441\u044f: \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u0435\u043c\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0441\u043d\u043e\u0432\u0430 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e\u0442 inherit (\u043d\u0430\u0441\u043b\u0435\u0434\u0443\u044e\u0442\u0441\u044f), \u0430 \u043d\u0435\u043d\u0430\u0441\u043b\u0435\u0434\u0443\u0435\u043c\u044b\u0435 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044e\u0442\u0441\u044f \u043a initial (\u043f\u0435\u0440\u0432\u043e\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u043c\u0443) \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044e.<\/p>\n<\/li>\n<li>\n<p>\u0421 revert \u0443\u0434\u0430\u043b\u044f\u044e\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u043c\u044b\u0435 \u0432 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0435 \u0430\u0432\u0442\u043e\u0440\u0430, \u0442\u043e \u0435\u0441\u0442\u044c \u0441\u0442\u0438\u043b\u0438 \u0441\u0430\u0439\u0442\u0430, \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u0441\u0442\u0438\u043b\u0438 \u043d\u0435\u0438\u0437\u043c\u0435\u043d\u043d\u044b\u043c\u0438. \u042d\u0442\u043e \u0442\u043e, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0432 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0435 \u0441\u043b\u0443\u0447\u0430\u0435\u0432.<\/p>\n<\/li>\n<\/ul>\n<h3>\u041d\u043e\u0432\u043e\u0435 \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0435 \u0441\u043b\u043e\u0432\u043e revert-layer<\/h3>\n<p>\u0412 \u043a\u0430\u0441\u043a\u0430\u0434\u043d\u044b\u0435 \u0441\u043b\u043e\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u043e\u0432\u043e\u0435 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0435 \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0435 \u0441\u043b\u043e\u0432\u043e revert-layer. \u041e\u043d\u043e \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0442 revert \u0442\u0435\u043c, \u0447\u0442\u043e \u0441 \u0435\u0433\u043e \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0443\u0434\u0430\u043b\u044f\u044e\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u043c\u044b\u0435 \u0432 \u0442\u0435\u043a\u0443\u0449\u0435\u043c \u043a\u0430\u0441\u043a\u0430\u0434\u043d\u043e\u043c \u0441\u043b\u043e\u0435. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0434\u043b\u044f \u043e\u0442\u043a\u0430\u0442\u0430 \u043a\u0430\u0441\u043a\u0430\u0434\u0430, \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u043c\u043e \u043b\u044e\u0431\u043e\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u043e\u0435 \u0432 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0445 \u0441\u043b\u043e\u044f\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435.<\/p>\n<p>\u041d\u0438\u0436\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043b\u0430\u0441\u0441\u0430 .no-theme \u0443\u0434\u0430\u043b\u044f\u044e\u0442\u0441\u044f \u043b\u044e\u0431\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0435 \u0432 <code>@layer theme<\/code>:<\/p>\n<pre><code class=\"css\">@layer default {   a { color: maroon; } }  @layer theme {   a { color: var(--brand-primary, purple); }    .no-theme {     color: revert-layer;   } }<\/code><\/pre>\n<p>\u0422\u0435\u0433 link \u0441 \u043a\u043b\u0430\u0441\u0441\u043e\u043c .no-theme \u0432\u0435\u0440\u043d\u0451\u0442\u0441\u044f \u043a \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u0432 \u0441\u043b\u043e\u0435 default. \u0412 \u0441\u0442\u0438\u043b\u044f\u0445 \u0431\u0435\u0437 \u0441\u043b\u043e\u0451\u0432 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 revert-layer \u0431\u0443\u0434\u0435\u0442 \u0442\u0430\u043a\u0438\u043c \u0436\u0435, \u043a\u0430\u043a revert: \u043e\u0442\u043a\u0430\u0442 \u043a \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u043c\u0443 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0443.<\/p>\n<h3>\u0412\u043e\u0437\u0432\u0440\u0430\u0442 \u0432\u0430\u0436\u043d\u044b\u0445 \u0441\u043b\u043e\u0451\u0432<\/h3>\n<p>\u0421\u0430\u043c\u043e\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0435 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0438 !important \u043a revert-layer. \u0423 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0441\u043b\u043e\u044f \u0435\u0441\u0442\u044c \u0434\u0432\u0430 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 <a href=\"https:\/\/css.oddbird.net\/layers\/guide\/#important-layers\">\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f <\/a>\u0432 \u043a\u0430\u0441\u043a\u0430\u0434\u0435: \u00ab\u043e\u0431\u044b\u0447\u043d\u043e\u0435\u00bb \u0438 \u00ab\u0432\u0430\u0436\u043d\u043e\u0435\u00bb. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442 \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0438\u044f, \u043d\u043e \u0438 \u0442\u043e, \u043a\u0430\u043a\u0438\u0435 \u0441\u043b\u043e\u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044e\u0442\u0441\u044f.<\/p>\n<p>\u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u0432 \u0441\u0442\u0435\u043a\u0435 \u0441\u043b\u043e\u0451\u0432 \u0435\u0441\u0442\u044c \u0442\u0440\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u044b\u0445 \u0441\u043b\u043e\u044f:<\/p>\n<ol>\n<li>\n<p>utilities (\u0441\u0430\u043c\u044b\u0439 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043d\u044b\u0439);<\/p>\n<\/li>\n<li>\n<p>components;<\/p>\n<\/li>\n<li>\n<p>defaults (\u043d\u0430\u0438\u043c\u0435\u043d\u0435\u0435 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043d\u044b\u0439).<\/p>\n<\/li>\n<\/ol>\n<p>\u0412\u043a\u043b\u044e\u0447\u0438\u043c \u0432 \u043d\u0435\u0433\u043e \u043e\u0431\u044b\u0447\u043d\u044b\u0435 \u0438 \u0432\u0430\u0436\u043d\u044b\u0435 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0441\u043b\u043e\u044f, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0438 \u0441\u0442\u0438\u043b\u0438 \u0431\u0435\u0437 \u0441\u043b\u043e\u0451\u0432:<\/p>\n<ol>\n<li>\n<p>!important defaults (\u0441\u0430\u043c\u044b\u0439 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043d\u044b\u0439).<\/p>\n<\/li>\n<li>\n<p>!important components.<\/p>\n<\/li>\n<li>\n<p>!important utilities.<\/p>\n<\/li>\n<li>\n<p>\u0421\u0442\u0438\u043b\u0438 \u0431\u0435\u0437 \u0441\u043b\u043e\u0451\u0432 !important.<\/p>\n<\/li>\n<li>\n<p>CSS-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f.<\/p>\n<\/li>\n<li>\n<p>\u041e\u0431\u044b\u0447\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u0431\u0435\u0437 \u0441\u043b\u043e\u0451\u0432.<\/p>\n<\/li>\n<li>\n<p>\u041e\u0431\u044b\u0447\u043d\u044b\u0435 utilities.<\/p>\n<\/li>\n<li>\n<p>\u041e\u0431\u044b\u0447\u043d\u044b\u0435 components.<\/p>\n<\/li>\n<li>\n<p>\u041e\u0431\u044b\u0447\u043d\u044b\u0435 defaults (\u043d\u0430\u0438\u043c\u0435\u043d\u0435\u0435 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043d\u044b\u0439).<\/p>\n<\/li>\n<\/ol>\n<p>\u041f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 revert-layer \u0432 \u043e\u0431\u044b\u0447\u043d\u043e\u043c \u0441\u043b\u043e\u0435 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, utilities) \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e\u0439. \u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f <em>\u0442\u043e\u043b\u044c\u043a\u043e \u044d\u0442\u043e\u0442 \u0441\u043b\u043e\u0439<\/em>, \u0430 \u0432\u0441\u0451 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0435 \u0431\u0443\u0434\u0435\u0442 \u043a\u0430\u043a \u043e\u0431\u044b\u0447\u043d\u043e:<\/p>\n<ol>\n<li>\n<p>\u2705 !important defaults (\u0441\u0430\u043c\u044b\u0439 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043d\u044b\u0439).<\/p>\n<\/li>\n<li>\n<p>\u2705 !important components.<\/p>\n<\/li>\n<li>\n<p>\u2705 !important utilities.<\/p>\n<\/li>\n<li>\n<p>\u2705 \u0421\u0442\u0438\u043b\u0438 \u0431\u0435\u0437 \u0441\u043b\u043e\u0451\u0432 !important.<\/p>\n<\/li>\n<li>\n<p>\u2705 CSS-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f.<\/p>\n<\/li>\n<li>\n<p>\u2705 \u041e\u0431\u044b\u0447\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u0431\u0435\u0437 \u0441\u043b\u043e\u0451\u0432.<\/p>\n<\/li>\n<li>\n<p>\u274c \u041e\u0431\u044b\u0447\u043d\u044b\u0435 utilities.<\/p>\n<\/li>\n<li>\n<p>\u2705 \u041e\u0431\u044b\u0447\u043d\u044b\u0435 components.<\/p>\n<\/li>\n<li>\n<p>\u2705 \u041e\u0431\u044b\u0447\u043d\u044b\u0435 defaults (\u043d\u0430\u0438\u043c\u0435\u043d\u0435\u0435 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043d\u044b\u0439).<\/p>\n<\/li>\n<\/ol>\n<p>\u041a\u043e\u0433\u0434\u0430 \u044d\u0442\u043e\u0442 revert-layer \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f \u0432 \u0432\u0430\u0436\u043d\u043e\u0435 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044e\u0442\u0441\u044f \u043e\u0431\u0435 \u0432\u0435\u0440\u0441\u0438\u0438 (\u043e\u0431\u044b\u0447\u043d\u0430\u044f \u0438 \u0432\u0430\u0436\u043d\u0430\u044f) <em>\u0438 \u0432\u0441\u0451, \u0447\u0442\u043e \u043c\u0435\u0436\u0434\u0443 \u043d\u0438\u043c\u0438<\/em>:<\/p>\n<ol>\n<li>\n<p>\u2705 !important defaults (\u0441\u0430\u043c\u044b\u0439 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043d\u044b\u0439).<\/p>\n<\/li>\n<li>\n<p>\u2705 !important components.<\/p>\n<\/li>\n<li>\n<p>\u274c !important utilities.<\/p>\n<\/li>\n<li>\n<p>\u274c \u0421\u0442\u0438\u043b\u0438 \u0431\u0435\u0437 \u0441\u043b\u043e\u0451\u0432 !important.<\/p>\n<\/li>\n<li>\n<p>\u274c CSS-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f.<\/p>\n<\/li>\n<li>\n<p>\u274c \u041e\u0431\u044b\u0447\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u0431\u0435\u0437 \u0441\u043b\u043e\u0451\u0432.<\/p>\n<\/li>\n<li>\n<p>\u274c \u041e\u0431\u044b\u0447\u043d\u044b\u0435 utilities.<\/p>\n<\/li>\n<li>\n<p>\u2705 \u041e\u0431\u044b\u0447\u043d\u044b\u0435 components.<\/p>\n<\/li>\n<li>\n<p>\u2705 \u041e\u0431\u044b\u0447\u043d\u044b\u0435 defaults (\u043d\u0430\u0438\u043c\u0435\u043d\u0435\u0435 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043d\u044b\u0439).<\/p>\n<\/li>\n<\/ol>\n<h3>\u041a\u043e\u0433\u0434\u0430 (\u043d\u0435) \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u043a\u0430\u0441\u043a\u0430\u0434\u043d\u044b\u0435 \u0441\u043b\u043e\u0438?<\/h3>\n<p>\u041f\u0440\u0438\u0432\u0435\u0434\u0451\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0442\u043e\u0433\u043e, \u043a\u043e\u0433\u0434\u0430 \u043a\u0430\u0441\u043a\u0430\u0434\u043d\u044b\u0435 \u0441\u043b\u043e\u0438 \u043a\u0441\u0442\u0430\u0442\u0438, \u0430 \u043a\u043e\u0433\u0434\u0430 \u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u0441\u043c\u044b\u0441\u043b\u0430 \u0432 \u043d\u0438\u0445 <em>\u043d\u0435\u0442<\/em>.<\/p>\n<h4>\u041d\u0435 \u0442\u0430\u043a\u0438\u0435 \u043d\u0430\u0434\u043e\u0435\u0434\u043b\u0438\u0432\u044b\u0435 resets \u0438 defaults<\/h4>\n<p>\u041e\u0434\u0438\u043d \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u044b\u0445 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u2014 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043b\u0435\u0433\u043a\u043e \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c\u044b\u0435, \u043d\u0438\u0437\u043a\u043e\u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043d\u044b\u0435 defaults. \u0412 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 resets \u044d\u0442\u043e \u0443\u0436\u0435 \u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u0437\u0430 \u0441\u0447\u0451\u0442 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043f\u0441\u0435\u0432\u0434\u043e\u043a\u043b\u0430\u0441\u0441\u0430 :when() \u0432\u043e\u043a\u0440\u0443\u0433 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430. \u0421 \u0435\u0433\u043e \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0438\u0437 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u0432 \u0443\u0434\u0430\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u0441\u044f \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u043c\u0430\u044f \u043a \u043d\u0438\u043c \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u043e\u0441\u0442\u044c. \u041e\u0441\u043d\u043e\u0432\u043d\u043e\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0435 \u0432\u043e\u0437\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0434\u043e\u0441\u0442\u0438\u0433\u0430\u0435\u0442\u0441\u044f, \u043d\u043e \u0435\u0441\u0442\u044c \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0438:<\/p>\n<ul>\n<li>\n<p>\u0435\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u043a \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0443 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e;<\/p>\n<\/li>\n<li>\n<p>\u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u044b \u0432\u043d\u0443\u0442\u0440\u0438 reset \u0434\u043e\u043b\u0436\u043d\u044b \u0440\u0430\u0437\u0440\u0435\u0448\u0430\u0442\u044c\u0441\u044f \u0431\u0435\u0437 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u043e\u0441\u0442\u0438.<\/p>\n<\/li>\n<\/ul>\n<p>\u0421\u043b\u043e\u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u043f\u0440\u043e\u0449\u0435 \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u044c \u0432\u0441\u044e \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0441\u0442\u0438\u043b\u0435\u0439 reset \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0431\u043b\u043e\u0447\u043d\u043e\u0433\u043e @layer:<\/p>\n<pre><code class=\"css\">\/* reset.css *\/ @layer reset {   \/* all reset styles in here *\/ }<\/code><\/pre>\n<p>\u0418\u043b\u0438 \u0438\u043c\u043f\u043e\u0440\u0442\u0430 reset:<\/p>\n<pre><code class=\"css\">\/* reset.css *\/ @import url(reset.css) layer(reset);<\/code><\/pre>\n<p>\u0418\u043b\u0438 \u0442\u043e\u0433\u043e \u0438 \u0434\u0440\u0443\u0433\u043e\u0433\u043e. \u0421\u043b\u043e\u0438 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0432\u043b\u043e\u0436\u0435\u043d\u044b \u0431\u0435\u0437 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0438\u0445 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u0430. \u0422\u0430\u043a, \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0439 reset \u0438 \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u0447\u0442\u043e \u043e\u043d \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a \u043d\u0443\u0436\u043d\u043e\u043c\u0443 \u0441\u043b\u043e\u044e, \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u043e\u0442 \u0442\u043e\u0433\u043e, \u0437\u0430\u043f\u0438\u0441\u0430\u043d\u0430 \u0441\u0430\u043c\u0430 \u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u0441\u0442\u0438\u043b\u0435\u0439 reset \u0441 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435\u043c \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0445 \u0441\u043b\u043e\u0451\u0432 \u0438\u043b\u0438 \u0431\u0435\u0437 \u043d\u0438\u0445.<\/p>\n<p>\u041f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442 \u043c\u043d\u043e\u0433\u043e\u0441\u043b\u043e\u0439\u043d\u044b\u0445 \u0441\u0442\u0438\u043b\u0435\u0439 \u043d\u0438\u0436\u0435, \u0447\u0435\u043c \u0441\u0442\u0438\u043b\u0435\u0439 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u00ab\u0431\u0435\u0437 \u0441\u043b\u043e\u0451\u0432\u00bb. \u0410 \u0437\u043d\u0430\u0447\u0438\u0442, \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0447\u0430\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u0441\u043a\u0430\u0434\u043d\u044b\u0435 \u0441\u043b\u043e\u0438, \u043d\u0435 \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u044f \u0432\u0441\u044e \u043a\u043e\u0434\u043e\u0432\u0443\u044e \u0431\u0430\u0437\u0443 CSS.<\/p>\n<p>\u0421\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b reset \u043f\u043e-\u043f\u0440\u0435\u0436\u043d\u0435\u043c\u0443 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u043e\u0441\u0442\u0438, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u0440\u0430\u0437\u0440\u0435\u0448\u0430\u0442\u044c \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0435 \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u044b \u0431\u0435\u0437 \u043e\u0431\u0451\u0440\u0442\u044b\u0432\u0430\u043d\u0438\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0432\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0435 \u043d\u0443\u0436\u043d\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442: \u043b\u0435\u0433\u043a\u043e \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c\u044b\u0435 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0441\u0442\u0438\u043b\u0435\u0439 reset.<\/p>\n<h4>\u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 CSS \u0441\u043b\u043e\u0436\u043d\u043e\u0439 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u044b<\/h4>\n<p>\u041f\u043e \u043c\u0435\u0440\u0435 \u0440\u043e\u0441\u0442\u0430 \u0438 \u0443\u0441\u043b\u043e\u0436\u043d\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u0431\u044b\u0432\u0430\u0435\u0442 \u043f\u043e\u043b\u0435\u0437\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u0447\u0451\u0442\u043a\u0438\u0435 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u0434\u043b\u044f \u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u043a\u043e\u0434\u0430 CSS. \u041d\u043e, \u0447\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0435 CSS, \u0442\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u0434\u043b\u044f \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u043e\u0432, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0438\u0437 \u0440\u0430\u0437\u043d\u044b\u0445 \u0447\u0430\u0441\u0442\u0435\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u044b, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a \u0442\u0435\u043c\u0430, \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438\u043b\u0438 \u043d\u0430\u0431\u043e\u0440 \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043a\u043b\u0430\u0441\u0441\u043e\u0432.<\/p>\n<p>\u041e\u0440\u0433\u0430\u043d\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u0445 \u043d\u0443\u0436\u043d\u043e \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u043c, \u043d\u043e \u0438, \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c, \u043f\u043e \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u0443 \u0447\u0430\u0441\u0442\u0435\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u043d\u0430 \u0441\u043b\u0443\u0447\u0430\u0439 \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u0430. \u0413\u0430\u0440\u0440\u0438 \u0420\u043e\u0431\u0435\u0440\u0442 \u043d\u0430<a href=\"https:\/\/csswizardry.com\/2018\/11\/itcss-and-skillshare\/\"> \u043f\u0440\u0438\u043c\u0435\u0440\u0435 <\/a>CSS \u0441 \u043f\u0435\u0440\u0435\u0432\u0451\u0440\u043d\u0443\u0442\u044b\u043c \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u043e\u043c \u0445\u043e\u0440\u043e\u0448\u043e \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442, \u0447\u0442\u043e \u043c\u043e\u0433\u0443\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u044d\u0442\u0438 \u0441\u043b\u043e\u0438:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/c7c\/35d\/cea\/c7c35dceaafe9ee5137601161d56dd40.png\" width=\"732\" height=\"438\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/c7c\/35d\/cea\/c7c35dceaafe9ee5137601161d56dd40.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0424\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0435\u0440\u0432\u044b\u043c \u0448\u0430\u0433\u043e\u043c \u0434\u043b\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043b\u043e\u0451\u0432 \u0432 \u043a\u0430\u0441\u043a\u0430\u0434 CSS \u0431\u044b\u043b\u0430 \u043c\u0435\u0442\u043e\u0434\u043e\u043b\u043e\u0433\u0438\u044f ITCSS \u043a\u0430\u043a \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0438 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e \u043f\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438.<\/p>\n<p>\u0414\u043b\u044f \u043d\u0435\u0451 \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043a\u0430\u043a\u043e\u0433\u043e-\u0442\u043e \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u043c\u0435\u0442\u043e\u0434\u0430, \u043d\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u044b, \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e, \u043b\u0443\u0447\u0448\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0442\u044c \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u044b\u043c \u043d\u0430\u0431\u043e\u0440\u043e\u043c \u0441\u043b\u043e\u0451\u0432 \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f, \u0430 \u0437\u0430\u0442\u0435\u043c \u043f\u0440\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0440\u0430\u0441\u0448\u0438\u0440\u0438\u0442\u044c \u0435\u0433\u043e \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u043c\u0438 \u0441\u043b\u043e\u044f\u043c\u0438.<\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<ol>\n<li>\n<p>\u041d\u0438\u0437\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u044b\u0439 \u0441\u0431\u0440\u043e\u0441 \u0438 \u0441\u0442\u0438\u043b\u0438 \u043d\u043e\u0440\u043c\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438.<\/p>\n<\/li>\n<li>\n<p>\u0417\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0434\u043b\u044f \u0431\u0430\u0437\u043e\u0432\u043e\u0439 \u0442\u0438\u043f\u043e\u0433\u0440\u0430\u0444\u0438\u043a\u0438 \u0438 \u0443\u0434\u043e\u0431\u043e\u0447\u0438\u0442\u0430\u0435\u043c\u043e\u0441\u0442\u0438.<\/p>\n<\/li>\n<li>\n<p>\u0422\u0435\u043c\u044b, \u0441\u0432\u0435\u0442\u043b\u044b\u0439 \u0438 \u0442\u0451\u043c\u043d\u044b\u0439 \u0440\u0435\u0436\u0438\u043c\u044b.<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u043f\u043e\u044f\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445.<\/p>\n<\/li>\n<li>\n<p>\u041c\u0430\u043a\u0435\u0442\u044b \u0438 \u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b \u0441\u0442\u0440\u0430\u043d\u0438\u0446.<\/p>\n<\/li>\n<li>\n<p>\u041e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b.<\/p>\n<\/li>\n<li>\n<p>\u041f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0438 \u0443\u0442\u0438\u043b\u0438\u0442\u044b.<\/p>\n<\/li>\n<\/ol>\n<p>\u042d\u0442\u043e\u0442 \u0441\u0442\u0435\u043a \u0441\u043b\u043e\u0451\u0432 \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0432 \u0441\u0430\u043c\u043e\u043c \u043d\u0430\u0447\u0430\u043b\u0435 CSS \u043e\u0434\u043d\u0438\u043c @layer:<\/p>\n<pre><code class=\"css\">@layer   reset,   default,   themes,   patterns,   layouts,   components,   utilities;<\/code><\/pre>\n<p>\u041d\u0443\u0436\u043d\u044b \u0432\u0437\u044b\u0441\u043a\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0441\u043b\u043e\u0438: \u0438\u0445 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u043c\u043e\u0433\u0443\u0442 \u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u043e\u0442 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043a \u043f\u0440\u043e\u0435\u043a\u0442\u0443. \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0435\u0449\u0451 \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u044b\u0435 \u0440\u0430\u0437\u0431\u0438\u0432\u043a\u0438 \u0441\u043b\u043e\u0451\u0432. \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u0430\u043c\u0438\u0445 components \u0435\u0441\u0442\u044c defaults, structures, themes \u0438 utilities:<\/p>\n<pre><code class=\"css\">@layer components {   @layer defaults, structures, themes, utilities; }<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u0434\u0430\u043b\u044c\u0448\u0435 \u0440\u0430\u0437\u0434\u0435\u043b\u044f\u0442\u044c \u0441\u0442\u0438\u043b\u0438 \u043d\u0430 \u0441\u043b\u043e\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043d\u0435 \u043c\u0435\u043d\u044f\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f, .<\/p>\n<h4>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432<\/h4>\n<p>\u0418\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044f \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0435\u0433\u043e CSS \u0441 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u043c \u2014 \u043e\u0434\u043d\u043e \u0438\u0437 \u043c\u0435\u0441\u0442, \u0433\u0434\u0435 \u0441 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430\u043c\u0438 \u043a\u0430\u0441\u043a\u0430\u0434\u0430 \u0441\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0447\u0430\u0449\u0435 \u0432\u0441\u0435\u0433\u043e. \u041d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u043e\u0441\u0442\u044c \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u0432 \u0438\u043b\u0438 \u0432\u0430\u0436\u043d\u043e\u0441\u0442\u044c \u0432\u0441\u0435\u0433\u043e CSS, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u043e\u0433\u043e \u043d\u0430 \u0441\u0430\u0439\u0442\u0430\u0445. <\/p>\n<p>\u041d\u0435 \u0432\u0430\u0436\u043d\u043e, \u0447\u0442\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f: \u043e\u0431\u0449\u0438\u0439 \u0441\u0431\u0440\u043e\u0441 (Normalizer \u0438\u043b\u0438 CSS Remedy), \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u0430\u044f \u0434\u0438\u0437\u0430\u0439\u043d-\u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0432\u0440\u043e\u0434\u0435 Material Design, \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0442\u0438\u043f\u0430 Bootstrap \u0438\u043b\u0438 \u043d\u0430\u0431\u043e\u0440 \u0441\u043b\u0443\u0436\u0435\u0431\u043d\u044b\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 Tailwind. \u0418\u043d\u043e\u0433\u0434\u0430 \u044d\u0442\u043e \u0432\u0435\u0440\u043d\u043e \u0434\u0430\u0436\u0435 \u0434\u043b\u044f \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a, \u0434\u0438\u0437\u0430\u0439\u043d-\u0441\u0438\u0441\u0442\u0435\u043c \u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0434\u0440\u0443\u0433\u0438\u0445 \u0447\u0430\u0441\u0442\u0435\u0439 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438.<\/p>\n<p>\u0412 \u0438\u0442\u043e\u0433\u0435 \u0447\u0430\u0441\u0442\u043e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0439 CSS \u0432\u043e\u043a\u0440\u0443\u0433 \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0435\u0433\u043e \u043a\u043e\u0434\u0430 \u0438\u043b\u0438 \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0442\u044c \u043f\u043e\u044f\u0432\u043b\u044f\u044e\u0449\u0438\u0435\u0441\u044f \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u044b, \u0438\u0441\u043a\u0443\u0441\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043f\u043e\u0432\u044b\u0448\u0430\u044f \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u043e\u0441\u0442\u044c \u0438\u043b\u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044f \u0444\u043b\u0430\u0433\u0438 !important. \u042d\u0442\u0438 \u00ab\u043a\u043e\u0441\u0442\u044b\u043b\u0438\u00bb \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c, \u0430\u0434\u0430\u043f\u0442\u0438\u0440\u0443\u044f \u043a \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u043c.<\/p>\n<p>\u041a\u0430\u0441\u043a\u0430\u0434\u043d\u044b\u0435 \u0441\u043b\u043e\u0438 \u0434\u0430\u044e\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0432\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0439 \u043a\u043e\u0434 \u0432 \u043a\u0430\u0441\u043a\u0430\u0434 \u043b\u044e\u0431\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u0430\u043c, \u0433\u0434\u0435 \u043e\u043d \u043d\u0443\u0436\u0435\u043d, \u2014 \u043d\u0435 \u0432\u0430\u0436\u043d\u043e, \u043a\u0430\u043a \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u044b \u0432\u043d\u0443\u0442\u0440\u0438. \u0421\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u043c\u0438 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0442\u0438\u043f\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438. \u041f\u0440\u043e\u0434\u0432\u0438\u0433\u0430\u044f\u0441\u044c \u043e\u0442 resets \u043a utilities, \u043d\u0430\u0447\u043d\u0451\u043c \u0441 \u0431\u0430\u0437\u043e\u0432\u043e\u0433\u043e \u0441\u0442\u0435\u043a\u0430 \u0441\u043b\u043e\u0451\u0432:<\/p>\n<pre><code class=\"css\">@layer reset, type, theme, components, utilities;<\/code><\/pre>\n<p>\u0417\u0430\u0442\u0435\u043c \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b\u2026<\/p>\n<h4>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u0431\u0440\u043e\u0441\u0430<\/h4>\n<p>\u041c\u043e\u0436\u043d\u043e \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u0441\u0431\u0440\u043e\u0441\u0430 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u043c \u0442\u0438\u043f\u0430 <a href=\"https:\/\/css-tricks.com\/css-remedy\/\">CSS Remedy<\/a>, \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c CSS Remedy \u0432 \u043f\u043e\u0434\u0441\u043b\u043e\u0439 reset:<\/p>\n<pre><code class=\"css\">@import url('remedy.css') layer(reset.remedy);<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u0441\u0431\u0440\u043e\u0441\u0430 \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 \u0441\u043b\u043e\u0439 reset \u0431\u0435\u0437 \u043a\u0430\u043a\u043e\u0439-\u043b\u0438\u0431\u043e \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u0438, \u0435\u0441\u043b\u0438 \u043e\u043d\u0430 \u043d\u0435 \u043d\u0443\u0436\u043d\u0430. \u041b\u044e\u0431\u044b\u0435 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442\u0441\u044f \u043f\u0440\u044f\u043c\u043e \u0432 reset, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0431\u044b\u0442\u044c \u0443\u0432\u0435\u0440\u0435\u043d\u044b, \u0447\u0442\u043e \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u0430 \u043d\u0430\u0448\u0438 \u0441\u0442\u0438\u043b\u0438 \u0432\u0441\u0435\u0433\u0434\u0430 \u0431\u0443\u0434\u0443\u0442 \u0438\u043c\u0435\u0442\u044c \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442, \u043a\u0430\u043a\u0438\u043c\u0438 \u0431\u044b \u043d\u0438 \u0431\u044b\u043b\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u043d\u043e\u0432\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 CSS Remedy:<\/p>\n<pre><code class=\"css\">@import url('remedy.css') layer(reset.remedy);  @layer reset {   :is(ol, ul)[role='list'] {     list-style: none;     padding-inline-start: 0;   } }<\/code><\/pre>\n<p>\u0410 \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0441\u043b\u043e\u0439 reset \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432\u043d\u0438\u0437\u0443 \u0441\u0442\u0435\u043a\u0430, \u0432 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 CSS \u043d\u0430\u0448\u0435\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0431\u0443\u0434\u0443\u0442 \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u044b \u0438 Remedy, \u0438 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f reset.<\/p>\n<h4>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u043b\u0443\u0436\u0435\u0431\u043d\u044b\u0445 \u043a\u043b\u0430\u0441\u0441\u043e\u0432<\/h4>\n<p>\u00ab\u0421\u043b\u0443\u0436\u0435\u0431\u043d\u044b\u0435 \u043a\u043b\u0430\u0441\u0441\u044b\u00bb \u0432 CSS \u043d\u0430 \u0434\u0440\u0443\u0433\u043e\u043c \u043a\u043e\u043d\u0446\u0435 \u0441\u0442\u0435\u043a\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0448\u0438\u0440\u043e\u043a\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u043c\u044b\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u044c \u043e\u0431\u0449\u0438\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u044b (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u0434\u043b\u044f \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c \u0447\u0442\u0435\u043d\u0438\u044f \u0441 \u044d\u043a\u0440\u0430\u043d\u0430). <\/p>\n<p>\u042d\u0442\u0438 \u043a\u043b\u0430\u0441\u0441\u044b \u0438\u043c\u0435\u044e\u0442 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043d\u0430\u0440\u0443\u0448\u0430\u0442\u044c \u044d\u0432\u0440\u0438\u0441\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044b \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u043e\u0441\u0442\u0438, \u0432\u0435\u0434\u044c \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u043b\u0438\u0441\u044c \u0448\u0438\u0440\u043e\u043a\u043e, \u0447\u0442\u043e \u0432\u0435\u0434\u0451\u0442 \u043a \u043d\u0438\u0437\u043a\u043e\u0439 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u043e\u0441\u0442\u0438. \u0410 \u0435\u0449\u0451 \u043e\u0431\u044b\u0447\u043d\u043e \u043d\u0443\u0436\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u0441\u043b\u0443\u0436\u0435\u0431\u043d\u044b\u0435 \u043a\u043b\u0430\u0441\u0441\u044b \u00ab\u0432\u044b\u0438\u0433\u0440\u044b\u0432\u0430\u043b\u0438\u00bb \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u044b. \u0422\u0430\u043a\u043e\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0441\u043b\u043e\u044e utilities \u0432\u0432\u0435\u0440\u0445\u0443 \u0441\u0442\u0435\u043a\u0430. \u041c\u044b \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c \u0432 \u043f\u043e\u0434\u0441\u043b\u043e\u0439 \u0432\u043d\u0435\u0448\u043d\u0438\u0435 \u0438 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 utilities, \u043a\u0430\u043a \u0432 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0441 reset:<\/p>\n<pre><code class=\"css\">@import url('tailwind.css') layer(utilities.tailwind);  @layer utilities {   \/* from https:\/\/kittygiraudel.com\/snippets\/sr-only-class\/ *\/   \/* but with !important removed from the properties *\/   .sr-only {     border: 0;     clip: rect(1px, 1px, 1px, 1px);     -webkit-clip-path: inset(50%);     clip-path: inset(50%);     height: 1px;     overflow: hidden;     margin: -1px;     padding: 0;     position: absolute;     width: 1px;     white-space: nowrap;   } }<\/code><\/pre>\n<h4>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0434\u0438\u0437\u0430\u0439\u043d-\u0441\u0438\u0441\u0442\u0435\u043c \u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/h4>\n<p>\u041c\u043d\u043e\u0433\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 CSS \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0433\u0434\u0435-\u0442\u043e \u0432 \u0441\u0435\u0440\u0435\u0434\u0438\u043d\u0435 \u0441\u0442\u0435\u043a\u0430 \u0441\u043b\u043e\u0451\u0432, \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u044f \u0442\u0438\u043f\u043e\u0433\u0440\u0430\u0444\u0441\u043a\u0438\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u0442\u0435\u043c\u044b, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0430\u0441\u043f\u0435\u043a\u0442\u044b \u0441\u0438\u0441\u0442\u0435\u043c\u044b.<\/p>\n<p>\u0412 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430 \u043c\u044b \u043c\u043e\u0433\u043b\u0438 \u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u043f\u043e\u0445\u043e\u0436\u0435\u0435 \u043d\u0430 \u043f\u0440\u0438\u0432\u0435\u0434\u0451\u043d\u043d\u044b\u0435 \u0432\u044b\u0448\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0441 reset \u0438 utility, \u043d\u043e \u0435\u0441\u0442\u044c \u0434\u0440\u0443\u0433\u0438\u0435 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b. \u0418\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0441 \u0442\u0435\u0441\u043d\u043e\u0439 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0435\u0439 \u043c\u043e\u0436\u0435\u0442 \u0437\u0430\u0441\u043b\u0443\u0436\u0438\u0432\u0430\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u043b\u043e\u044f \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f:<\/p>\n<pre><code class=\"css\">@layer reset, bootstrap, utilities; @import url('bootstrap.css') layer(bootstrap);<\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 \u0432 \u044d\u0442\u0438\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u0445 \u0441\u043b\u043e\u0438 \u043d\u0430\u0447\u043d\u0443\u0442 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u043a\u0430\u043a \u0447\u0430\u0441\u0442\u044c \u0438\u0445 \u043e\u0431\u0449\u0435\u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0433\u043e API, \u044d\u0442\u043e\u0442 API \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0437\u0431\u0438\u0442\u044c \u043d\u0430 \u0447\u0430\u0441\u0442\u0438, \u0447\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0447\u0435\u0440\u0435\u0434\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u0434 \u0441 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u043e\u0439:<\/p>\n<pre><code class=\"bash\">@import url('bootstrap\/reset.css') layer(reset.bootstrap); @import url('bootstrap\/theme.css') layer(theme.bootstrap); @import url('bootstrap\/components.css') layer(components.bootstrap); @layer theme.local { \/* styles here will override theme.bootstrap \/ \/ but not interfere with styles from components.bootstrap *\/ }<\/code><\/pre>\n<h4>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u043b\u043e\u0451\u0432 \u0441 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430\u043c\u0438<\/h4>\n<p>\u041a\u0430\u043a \u043f\u0440\u0438 \u043b\u044e\u0431\u043e\u043c \u0441\u0435\u0440\u044c\u0451\u0437\u043d\u043e\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u044f\u0437\u044b\u043a\u0430, \u043d\u0430\u0441\u0442\u0443\u043f\u0438\u0442 \u043f\u0435\u0440\u0438\u043e\u0434 \u0430\u0434\u0430\u043f\u0442\u0430\u0446\u0438\u0438, \u043a\u043e\u0433\u0434\u0430 \u043a\u0430\u0441\u043a\u0430\u0434\u043d\u044b\u0435 \u0441\u043b\u043e\u0438 CSS \u043f\u043e\u043b\u0443\u0447\u0430\u0442 \u0448\u0438\u0440\u043e\u043a\u043e\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435. \u0427\u0442\u043e, \u0435\u0441\u043b\u0438 \u0432\u0430\u0448\u0430 \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0433\u043e\u0442\u043e\u0432\u0430 \u043d\u0430\u0447\u0430\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043b\u043e\u0438 \u0443\u0436\u0435 \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u043c\u0435\u0441\u044f\u0446\u0435, \u0430 \u043b\u044e\u0431\u0438\u043c\u043e\u043c\u0443 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0443 \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430 \u043d\u0430 \u043c\u043d\u043e\u0433\u043e\u0441\u043b\u043e\u0439\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u043d\u0443\u0436\u043d\u043e \u0435\u0449\u0451 \u0442\u0440\u0438 \u0433\u043e\u0434\u0430? \u0421\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e, \u0432\u043e \u043c\u043d\u043e\u0433\u0438\u0445 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430\u0445 !important \u043f\u043e-\u043f\u0440\u0435\u0436\u043d\u0435\u043c\u0443 \u0431\u0443\u0434\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0447\u0430\u0449\u0435, \u0447\u0435\u043c \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0431\u044b! \u0410 \u0441 \u043e\u0431\u0440\u0430\u0442\u043d\u044b\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u043e\u043c \u0441\u043b\u043e\u0451\u0432 !important \u044d\u0442\u043e \u043d\u0435\u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e.<\/p>\n<p>\u041d\u043e \u0441\u043b\u043e\u0438 \u0432\u0441\u0451 \u0440\u0430\u0432\u043d\u043e \u043c\u043e\u0433\u0443\u0442 \u043f\u043e\u043c\u043e\u0447\u044c \u0440\u0435\u0448\u0438\u0442\u044c \u044d\u0442\u0443 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443. \u041d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u0434\u043e\u0439\u0442\u0438 \u043a \u0440\u0435\u0448\u0435\u043d\u0438\u044e \u0441 \u0443\u043c\u043e\u043c. \u0422\u043e, \u043a\u0430\u043a\u0438\u0435 \u0441\u043b\u043e\u0438 \u043d\u0443\u0436\u043d\u044b \u0434\u043b\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043c\u044b. \u041c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0441\u043b\u043e\u0438 \u0432\u044b\u0448\u0435 \u0438 \u043d\u0438\u0436\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0445 \u043d\u0430\u043c\u0438 \u0441\u043b\u043e\u0451\u0432 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430. \u0410 \u043f\u043e\u043a\u0430 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043b\u043e\u0439 \u043d\u0438\u0436\u0435 \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f !important \u0441\u0442\u0438\u043b\u0435\u0439 \u0438\u0437 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430, \u0430 \u0441\u043b\u043e\u0439 \u0432\u044b\u0448\u0435 \u2014 \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043e\u0431\u044b\u0447\u043d\u044b\u0445 \u0441\u0442\u0438\u043b\u0435\u0439. \u0427\u0442\u043e-\u0442\u043e \u0432\u0440\u043e\u0434\u0435 \u044d\u0442\u043e\u0433\u043e:<\/p>\n<pre><code class=\"css\">@layer framework.important, framework.bootstrap, framework.local; @import url('bootstrap.css') layer(framework.bootstrap);  @layer framework.local {   \/* most of our normal framework overrides can live here *\/ }  @layer framework.important {   \/* add !important styles in a lower layer *\/   \/* to override any !important framework styles *\/ }<\/code><\/pre>\n<p>\u0412\u0441\u0451 \u0435\u0449\u0451 \u043f\u043e\u0445\u043e\u0436\u0435 \u043d\u0430 \u00ab\u043a\u043e\u0441\u0442\u044b\u043b\u0438\u00bb, \u043d\u043e \u043e\u043d\u0438 \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0442 \u0434\u0432\u0438\u0433\u0430\u0442\u044c\u0441\u044f \u0432 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u043c \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0438, \u043a \u0431\u043e\u043b\u0435\u0435 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u043c\u0443 \u043a\u0430\u0441\u043a\u0430\u0434\u0443. \u041d\u0430\u0434\u0435\u044e\u0441\u044c, \u044d\u0442\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435.<\/p>\n<h4>\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430 \u0438\u043b\u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 CSS<\/h4>\n<p>\u0422\u0435\u043c, \u043a\u0442\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443, \u043a\u0430\u0441\u043a\u0430\u0434\u043d\u044b\u0435 \u0441\u043b\u043e\u0438 \u043c\u043e\u0433\u0443\u0442 \u043f\u043e\u043c\u043e\u0447\u044c \u0441 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0439 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u0438 \u0434\u0430\u0436\u0435 \u0441\u0442\u0430\u0442\u044c \u0447\u0430\u0441\u0442\u044c\u044e API \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430. \u041f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u044f \u0438\u043c\u0435\u043d\u0430 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u043c \u0441\u043b\u043e\u044f\u043c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0437\u0440\u0435\u0448\u0438\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c\u0441\u044f \u043a \u044d\u0442\u0438\u043c \u0441\u043b\u043e\u044f\u043c \u043f\u0440\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0435 \u0438\u043b\u0438 \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0438 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c\u044b\u0445 \u0441\u0442\u0438\u043b\u0435\u0439.<\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 Bootstrap \u043c\u043e\u0433\u0443\u0442 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u0441\u043b\u043e\u0438 \u0434\u043b\u044f reboot, grid \u0438 utilities; \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e, \u0432 \u0442\u0430\u043a\u043e\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435. \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0441\u043c\u043e\u0436\u0435\u0442 \u0440\u0435\u0448\u0438\u0442\u044c, \u043d\u0443\u0436\u043d\u043e \u043b\u0438 \u0435\u043c\u0443 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u044d\u0442\u0438 \u0441\u043b\u043e\u0438 Bootstrap \u0432 \u0440\u0430\u0437\u043d\u044b\u0435 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u043b\u043e\u0438:<\/p>\n<pre><code class=\"css\">@import url(bootstrap\/reboot.css) layer(reset); \/* reboot \u00bb reset.reboot *\/ @import url(bootstrap\/grid.css) layer(layout); \/* grid \u00bb layout.grid *\/ @import url(bootstrap\/utils.css) layer(override); \/* utils \u00bb override.utils *\/<\/code><\/pre>\n<p>\u0418\u043b\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0438\u0445 \u0432 \u0441\u043b\u043e\u0439 Bootstrap \u0441 \u0447\u0435\u0440\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u043b\u043e\u0451\u0432:<\/p>\n<pre><code class=\"css\">@layer bs.reboot, bs.grid, bs.grid-overrides, bs.utils, bs.util-overrides; @import url('bootstrap-all.css') layer(bs);<\/code><\/pre>\n<p>\u041f\u0440\u0438 \u0436\u0435\u043b\u0430\u043d\u0438\u0438 \u043c\u043e\u0436\u043d\u043e \u0441\u043a\u0440\u044b\u0442\u044c \u043e\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0435 \u043d\u0430\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441\u043b\u043e\u0451\u0432, \u0441\u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u0430\u0432 \u043b\u044e\u0431\u044b\u0435 \u0437\u0430\u043a\u0440\u044b\u0442\u044b\u0435\/\u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0435 \u0441\u043b\u043e\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u0430\u043d\u043e\u043d\u0438\u043c\u043d\u043e\u0433\u043e \u0441\u043b\u043e\u044f. \u0410\u043d\u043e\u043d\u0438\u043c\u043d\u044b\u0435 \u0441\u043b\u043e\u0438 \u0431\u0443\u0434\u0443\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u043a \u0442\u043e\u043c\u0443 \u043f\u043e\u0440\u044f\u0434\u043a\u0443 \u0441\u043b\u043e\u0451\u0432, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u044e\u0442\u0441\u044f, \u043d\u043e \u043d\u0435 \u0431\u0443\u0434\u0443\u0442 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u0438\u043b\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442 \u0441\u0442\u0438\u043b\u0438.<\/p>\n<h4>\u041c\u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e, \u0447\u0442\u043e\u0431\u044b \u0441\u0442\u0430\u0442\u044c \u0431\u043e\u043b\u0435\u0435 !important (\u0432\u0430\u0436\u043d\u044b\u043c)<\/h4>\n<p>\u0412\u043e\u043f\u0440\u0435\u043a\u0438 \u043e\u0436\u0438\u0434\u0430\u043d\u0438\u044f\u043c, \u0441\u043b\u043e\u0438 \u043d\u0435 \u043e\u0431\u043b\u0435\u0433\u0447\u0430\u044e\u0442 \u0432\u0437\u0440\u044b\u0432\u043d\u043e\u0439 \u0440\u043e\u0441\u0442 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u0441\u0442\u0438\u043b\u044f \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u043b \u0434\u0440\u0443\u0433\u043e\u0439 \u0441\u0442\u0438\u043b\u044c.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u0441\u0442\u0438\u043b\u0435\u0439 \u043d\u0435 \u0438\u043c\u0435\u044e\u0442 \u0441\u043b\u043e\u0451\u0432, \u0442\u043e \u043b\u044e\u0431\u043e\u0439 \u043d\u043e\u0432\u044b\u0439 \u0441\u043b\u043e\u0439 \u043f\u043e \u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u044e \u043a \u0441\u043b\u043e\u044e \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0431\u0443\u0434\u0435\u0442 \u0438\u043c\u0435\u0442\u044c <em>\u043f\u043e\u043d\u0438\u0436\u0435\u043d\u043d\u044b\u0439 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442<\/em>. \u041c\u044b \u043c\u043e\u0433\u043b\u0438 \u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0430\u043a \u0441 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u043c\u0438 \u0431\u043b\u043e\u043a\u0430\u043c\u0438 \u0441\u0442\u0438\u043b\u0435\u0439, \u043d\u043e \u044d\u0442\u043e \u0431\u044b \u0441\u0440\u0430\u0437\u0443 \u0441\u0442\u0430\u043b\u043e \u0442\u0440\u0443\u0434\u043d\u043e \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c.<\/p>\n<p>\u0421\u043b\u043e\u0438 \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u0444\u0443\u043d\u0434\u0430\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u043c\u0438, \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u044e\u0449\u0438\u043c\u0438 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u044b, \u0430 \u043d\u0435 \u0441\u0442\u0438\u043b\u044c \u0437\u0430 \u0441\u0442\u0438\u043b\u0435\u043c. \u0415\u0441\u043b\u0438 \u043c\u044b \u0432\u0441\u0451 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u043b\u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e, \u0442\u043e \u0432 \u0438\u0434\u0435\u0430\u043b\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0438\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442, \u043f\u0435\u0440\u0435\u043c\u0435\u0441\u0442\u0438\u0432 \u0441\u0442\u0438\u043b\u044c \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439, \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u044b\u0439 \u0441\u043b\u043e\u0439.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u0441\u0442\u0438\u043b\u0435\u0439 \u0443\u0436\u0435 \u043f\u043e\u043f\u0430\u0434\u0430\u044e\u0442 \u0432 \u0447\u0451\u0442\u043a\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u044b\u0435 \u0441\u043b\u043e\u0438, \u0432\u0441\u0435\u0433\u0434\u0430 \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u043e\u0432\u044b\u0439 \u0441\u043b\u043e\u0439 \u0441 \u043d\u0430\u0438\u0432\u044b\u0441\u0448\u0438\u043c \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043e\u043c \u0432 \u0432\u0435\u0440\u0445\u043d\u0435\u0439 \u0447\u0430\u0441\u0442\u0438 \u0441\u0442\u0435\u043a\u0430 \u0441\u043b\u043e\u0451\u0432 \u0438\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043e\u0431\u044b\u0447\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0441\u043b\u043e\u0451\u0432. \u0414\u043b\u044f \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0439 \u0432\u043d\u0435 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u0435\u043d\u0430 \u043c\u043e\u0436\u043d\u043e \u0434\u0430\u0436\u0435 \u043f\u043e\u0434\u0443\u043c\u0430\u0442\u044c \u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u0441\u043b\u043e\u044f debug \u0432 \u0432\u0435\u0440\u0445\u043d\u0435\u0439 \u0447\u0430\u0441\u0442\u0438 \u0441\u0442\u0435\u043a\u0430.<\/p>\n<p>\u041d\u043e \u043f\u0440\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u043d\u043e\u0432\u044b\u0445 \u0441\u043b\u043e\u0451\u0432 \u00ab\u043d\u0430 \u043b\u0435\u0442\u0443\u00bb \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u043e\u043d\u043d\u0430\u044f \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0441\u0442\u044c \u044d\u0442\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043c\u043e\u0436\u043d\u043e \u0441\u0432\u0435\u0441\u0442\u0438 \u043d\u0430 \u043d\u0435\u0442, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0451 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043e\u0441\u0442\u043e\u0440\u043e\u0436\u043d\u043e. \u041b\u0443\u0447\u0448\u0435 \u0441\u043f\u0440\u043e\u0441\u0438\u0442\u044c: <em>\u00ab\u041f\u043e\u0447\u0435\u043c\u0443 \u044d\u0442\u0438\u043c \u0441\u0442\u0438\u043b\u0435\u043c \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c\u0441\u044f \u0434\u0440\u0443\u0433\u043e\u0439 \u0441\u0442\u0438\u043b\u044c?\u00bb<\/em><\/p>\n<p>\u0415\u0441\u043b\u0438 \u043e\u0442\u0432\u0435\u0442 \u0441\u0432\u044f\u0437\u0430\u043d \u0441 \u0442\u0435\u043c, \u0447\u0442\u043e \u043e\u0434\u043d\u0438\u043c <em>\u0442\u0438\u043f\u043e\u043c \u0441\u0442\u0438\u043b\u044f<\/em> \u0432\u0441\u0435\u0433\u0434\u0430 \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u0434\u0440\u0443\u0433\u043e\u0439 \u0442\u0438\u043f, \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e, \u0441\u043b\u043e\u0438 \u0431\u0443\u0434\u0443\u0442 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c. \u0412\u0435\u0434\u044c \u043c\u044b \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0441\u0442\u0438\u043b\u0438, \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043d\u0435 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u0443\u0435\u043c, \u0438\u043b\u0438 \u043f\u0438\u0448\u0435\u043c \u0443\u0442\u0438\u043b\u0438\u0442\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0434\u043e\u043b\u0436\u043d\u0430 \u043f\u0435\u0440\u0435\u043c\u0435\u0441\u0442\u0438\u0442\u044c\u0441\u044f \u0432 \u0441\u043b\u043e\u0439 utilities. <\/p>\n<p>\u0415\u0441\u043b\u0438 \u0436\u0435 \u043e\u0442\u0432\u0435\u0442 \u0441\u0432\u044f\u0437\u0430\u043d \u0441 \u0442\u0435\u043c, \u0447\u0442\u043e \u043c\u0435\u043d\u0435\u0435 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442\u0441\u044f \u0431\u043e\u043b\u0435\u0435 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c\u0438, \u043c\u044b \u043c\u043e\u0433\u043b\u0438 \u0431\u044b \u043f\u043e\u0434\u0443\u043c\u0430\u0442\u044c \u043e\u0431 \u043e\u0442\u0440\u0430\u0436\u0435\u043d\u0438\u0438 \u044d\u0442\u043e\u0439 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0438 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430\u043c\u0438. \u0418\u043b\u0438 \u0432 \u0440\u0435\u0434\u043a\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u043c\u043e\u0433\u043b\u0438 \u0431\u044b \u0434\u0430\u0436\u0435 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u0442\u0438\u043b\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e <em>important<\/em> (\u0432\u0430\u0436\u043d\u044b), \u2014 \u0434\u0430\u043d\u043d\u044b\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u0435\u0441\u043b\u0438 \u0432\u044b \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0435 \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u0430\u043a\u043e\u0439 \u0441\u0442\u0438\u043b\u044c.\u00a0<\/p>\n<p>\u041c\u044b \u043c\u043e\u0433\u043b\u0438 \u0431\u044b \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 display: none \u043a \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0443 [hidden] \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0432 reset \u0441 \u0441\u0430\u043c\u044b\u043c \u043d\u0438\u0437\u043a\u0438\u043c \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043e\u043c, \u043d\u043e \u0432\u0441\u0451 \u0440\u0430\u0432\u043d\u043e \u044d\u0442\u043e\u0442 \u0441\u0442\u0438\u043b\u044c \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0442\u0440\u0443\u0434\u043d\u043e \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c. \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 !important \u2014 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0442\u0430\u043a\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b:<\/p>\n<pre><code class=\"css\">@layer reset {   [hidden] { display: none !important; } }<\/code><\/pre>\n<h4>\u0421\u0442\u0438\u043b\u0438 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0438 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432 \u0438\u043c\u0451\u043d? \u041d\u0435\u0442!<\/h4>\n<p>\u0411\u0435\u0437\u0443\u0441\u043b\u043e\u0432\u043d\u043e, \u043a\u0430\u0441\u043a\u0430\u0434\u043d\u044b\u0435 \u0441\u043b\u043e\u0438 \u2014 \u044d\u0442\u043e \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u00ab\u0443\u043b\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u00bb \u0432\u043b\u0438\u044f\u043d\u0438\u0435 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u0432, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u043a\u043e\u0433\u0434\u0430 \u043e\u043d\u0438 \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u0443\u044e\u0442. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043c\u043e\u0436\u0435\u0442 \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u0443\u0442\u044c \u0441\u043e\u0431\u043b\u0430\u0437\u043d \u043f\u043e\u0441\u0447\u0438\u0442\u0430\u0442\u044c \u0438\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043e\u0431\u043b\u0430\u0441\u0442\u044c\u044e \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0438\u043b\u0438 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e\u043c \u0438\u043c\u0451\u043d \u0438 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u043b\u043e\u0439 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0432 \u043d\u0430\u0434\u0435\u0436\u0434\u0435, \u0447\u0442\u043e \u044d\u0442\u043e \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0442, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 .post-title \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u043d\u0443\u0442\u0440\u0438 .post.<\/p>\n<p>\u041d\u043e \u043a\u0430\u0441\u043a\u0430\u0434\u043d\u044b\u0435 \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u044b \u2014 \u044d\u0442\u043e \u043d\u0435 \u0442\u043e \u0436\u0435 \u0441\u0430\u043c\u043e\u0435, \u0447\u0442\u043e \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u044b \u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u0438\u044f, \u0430 \u0441\u043b\u043e\u0438 \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u0445\u043e\u0440\u043e\u0448\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0442 \u0434\u043b\u044f \u0442\u0430\u043a\u043e\u0433\u043e \u0442\u0438\u043f\u0430 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0432 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438. \u041a\u0430\u0441\u043a\u0430\u0434\u043d\u044b\u0435 \u0441\u043b\u043e\u0438 \u043d\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u044e\u0442 \u0442\u043e, \u043a\u0430\u043a \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0442 HTML \u0438\u043b\u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u043a \u043d\u0435\u043c\u0443. \u041e\u043d\u0438 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u044e\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u043e, \u043a\u0430\u043a \u043e\u043d\u0438 \u0432\u043c\u0435\u0441\u0442\u0435 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u044e\u0442\u0441\u044f \u043a\u0430\u0441\u043a\u0430\u0434\u043e\u043c. <\/p>\n<p>\u041f\u043e\u044d\u0442\u043e\u043c\u0443, \u043f\u043e\u043a\u0430 \u043c\u044b \u043d\u0435 \u0441\u043c\u043e\u0436\u0435\u043c \u0431\u044b\u0442\u044c \u0443\u0432\u0435\u0440\u0435\u043d\u044b, \u0447\u0442\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Y <em>\u0432\u0441\u0435\u0433\u0434\u0430<\/em> \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c X, \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0441\u043b\u043e\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043c\u0430\u043b\u043e \u0447\u0435\u043c \u0431\u0443\u0434\u0443\u0442 \u043f\u043e\u043b\u0435\u0437\u043d\u044b. \u0412\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0441\u043b\u0435\u0434\u0438\u0442\u044c \u0437\u0430 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u043c\u043e\u0439<a href=\"https:\/\/www.w3.org\/TR\/css-cascade-6\/\"> \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0435\u0439<\/a> @scope, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441\u0435\u0439\u0447\u0430\u0441 \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f.<\/p>\n<p>\u041c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u043e\u043b\u0435\u0437\u043d\u043e \u0434\u0443\u043c\u0430\u0442\u044c \u043e \u0441\u043b\u043e\u044f\u0445 \u0438 \u043e\u0431\u043b\u0430\u0441\u0442\u044f\u0445 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043a\u0430\u043a \u043e \u043f\u0435\u0440\u0435\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0438\u0445\u0441\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430\u0445:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/72c\/e22\/1c3\/72ce221c344508c35ea273a8f5462aa0.png\" width=\"1162\" height=\"816\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/72c\/e22\/1c3\/72ce221c344508c35ea273a8f5462aa0.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0412 \u043e\u0431\u043b\u0430\u0441\u0442\u044f\u0445 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f, <em>\u0447\u0442\u043e<\/em> \u043c\u044b \u0441\u0442\u0438\u043b\u0438\u0437\u0443\u0435\u043c, \u0430 \u0432 \u0441\u043b\u043e\u044f\u0445 \u2014 <em>\u043f\u043e\u0447\u0435\u043c\u0443<\/em>. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0441\u043b\u043e\u0438 \u0434\u0430\u044e\u0442 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043e \u0442\u043e\u043c, <em>\u043e\u0442\u043a\u0443\u0434\u0430 \u0431\u0435\u0440\u0451\u0442\u0441\u044f \u0441\u0442\u0438\u043b\u044c<\/em>, \u0430 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u2014 \u043e <em>\u0442\u043e\u043c, \u043a \u0447\u0435\u043c\u0443 \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d<\/em>.<\/p>\n<h3>\u041f\u0440\u043e\u0432\u0435\u0440\u044c\u0442\u0435 \u0441\u0432\u043e\u0438 \u0437\u043d\u0430\u043d\u0438\u044f: \u043a\u0430\u043a\u043e\u0439 \u0441\u0442\u0438\u043b\u044c \u0432 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u0435?<\/h3>\n<p>\u0412 \u043a\u0430\u0436\u0434\u043e\u0439 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438 \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0430\u0431\u0437\u0430\u0446:<\/p>\n<pre><code class=\"css\">&lt;p id=\"intro\">Hello, World!&lt;\/p><\/code><\/pre>\n<p><em>\u0412\u043e\u043f\u0440\u043e\u0441 1<\/em><\/p>\n<pre><code class=\"css\">@layer ultra-high-priority {   #intro {     color: red;   } }  p {   color: green; }<\/code><\/pre>\n<details class=\"spoiler\">\n<summary>\u041a\u0430\u043a\u043e\u0433\u043e \u0446\u0432\u0435\u0442\u0430 \u0430\u0431\u0437\u0430\u0446?<\/summary>\n<div class=\"spoiler__content\">\n<p>\u041d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0438\u043c\u044f, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0432\u0430\u0436\u043d\u044b\u043c, \u0432\u044b\u0448\u0435 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442 \u0441\u0442\u0438\u043b\u0435\u0439 \u0431\u0435\u0437 \u0441\u043b\u043e\u044f. \u0410\u0431\u0437\u0430\u0446 \u0431\u0443\u0434\u0435\u0442 \u0437\u0435\u043b\u0451\u043d\u044b\u043c.<\/p>\n<\/div>\n<\/details>\n<p><em>\u0412\u043e\u043f\u0440\u043e\u0441 2<\/em><\/p>\n<pre><code class=\"css\">@layer ren, stimpy;  @layer ren {   p { color: red !important; } }  p { color: green; }  @layer stimpy {   p { color: blue !important; } }<\/code><\/pre>\n<details class=\"spoiler\">\n<summary>\u041a\u0430\u043a\u043e\u0433\u043e \u0446\u0432\u0435\u0442\u0430 \u0430\u0431\u0437\u0430\u0446?<\/summary>\n<div class=\"spoiler__content\">\n<p>\u0412\u043d\u0430\u0447\u0430\u043b\u0435 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u043e\u0440\u044f\u0434\u043e\u043a: \u0432\u043d\u0438\u0437\u0443 ren, \u0437\u0430\u0442\u0435\u043c stimpy \u0438 \u0432 \u0432\u0435\u0440\u0445\u043d\u0435\u0439 \u0447\u0430\u0441\u0442\u0438 (\u043a\u0430\u043a \u0432\u0441\u0435\u0433\u0434\u0430) \u0441\u0442\u0438\u043b\u0438 \u0431\u0435\u0437 \u0441\u043b\u043e\u0451\u0432. \u041d\u043e \u043d\u0435 \u0432\u0441\u0435 \u044d\u0442\u0438 \u0441\u0442\u0438\u043b\u0438 \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u044b\u0435, \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0437 \u043d\u0438\u0445 \u0438\u043c\u0435\u044e\u0442 !important. \u0421\u0440\u0430\u0437\u0443 \u043c\u043e\u0436\u043d\u043e \u043e\u0442\u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e !important, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c green. \u041f\u043e\u043c\u043d\u0438\u0442\u0435, \u0447\u0442\u043e \u00ab\u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u0438 \u0432\u0430\u0436\u043d\u043e\u0441\u0442\u044c\u00bb \u2014 \u043f\u0435\u0440\u0432\u044b\u0435 \u0448\u0430\u0433\u0438 \u043a\u0430\u0441\u043a\u0430\u0434\u0430, \u043e\u043d\u0438 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0434\u043e \u0440\u0430\u0431\u043e\u0442\u044b \u0441\u043e \u0441\u043b\u043e\u044f\u043c\u0438.<\/p>\n<p>\u041e\u0441\u0442\u0430\u043d\u0435\u0442\u0441\u044f \u0434\u0432\u0430 \u0441\u0442\u0438\u043b\u044f c !important, \u043e\u0431\u0430 \u0432 \u0441\u043b\u043e\u044f\u0445. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0441\u043b\u043e\u0438 \u0441 !important \u0440\u0430\u0437\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u044e\u0442\u0441\u044f, ren \u0434\u0432\u0438\u0436\u0435\u0442\u0441\u044f \u043a \u0432\u0435\u0440\u0448\u0438\u043d\u0435, \u0430 stimuli \u2014 \u0432\u043d\u0438\u0437. \u0410\u0431\u0437\u0430\u0446 \u0431\u0443\u0434\u0435\u0442 \u043a\u0440\u0430\u0441\u043d\u044b\u043c.<\/p>\n<\/div>\n<\/details>\n<p><em>\u0412\u043e\u043f\u0440\u043e\u0441 3<\/em><\/p>\n<pre><code class=\"css\">@layer Montagues, Capulets, Verona;  @layer Montagues.Romeo { #intro { color: red; } } @layer Montagues.Benvolio { p { color: orange; } }  @layer Capulets.Juliet { p { color: yellow; } } @layer Verona { * { color: blue; } } @layer Capulets.Tybalt { #intro { color: green; } }<\/code><\/pre>\n<details class=\"spoiler\">\n<summary>\u041a\u0430\u043a\u043e\u0433\u043e \u0446\u0432\u0435\u0442\u0430 \u0430\u0431\u0437\u0430\u0446<\/summary>\n<div class=\"spoiler__content\">\n<p>\u0412\u0441\u0435 \u0432 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u0445 \u043e\u0434\u043d\u043e\u0433\u043e \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0430 \u0438 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430, !important \u043d\u0435 \u043f\u043e\u043c\u0435\u0447\u0435\u043d \u043d\u0438 \u043e\u0434\u0438\u043d, \u043d\u0435\u0442 \u0438 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0445 \u0441\u0442\u0438\u043b\u0435\u0439. \u0415\u0441\u0442\u044c \u043c\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u043d\u044b\u0445 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u0432, \u043e\u0442 \u0441\u0430\u043c\u043e\u0433\u043e \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u043e\u0433\u043e ID #intro \u0434\u043e \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430. \u041d\u043e \u0441\u043b\u043e\u0438 \u0440\u0430\u0437\u0440\u0435\u0448\u0430\u044e\u0442\u0441\u044f \u0434\u043e \u0443\u0447\u0451\u0442\u0430 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0438, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0441\u0435\u0439\u0447\u0430\u0441 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b \u043c\u043e\u0436\u043d\u043e \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c.<\/p>\n<p>\u0415\u0441\u0442\u044c \u043f\u0435\u0440\u0432\u0438\u0447\u043d\u044b\u0439 \u0441\u043b\u043e\u0439, \u0430 \u0432 \u043d\u0451\u043c \u043f\u043e\u0434\u0441\u043b\u043e\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043e\u0440\u0442\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u043c \u0441\u043b\u043e\u0435\u043c, \u0430 \u0437\u043d\u0430\u0447\u0438\u0442, \u0432\u0441\u0435 Montagues \u0431\u0443\u0434\u0443\u0442 \u043e\u0431\u043b\u0430\u0434\u0430\u0442\u044c \u0441\u0430\u043c\u044b\u043c \u043d\u0438\u0437\u043a\u0438\u043c \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043e\u043c, \u0437\u0430\u0442\u0435\u043c \u0438\u0434\u0443\u0442 \u0432\u0441\u0435 Capulets. \u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435 \u0441\u043b\u043e\u0432\u043e \u0437\u0430 Verona. \u041c\u043e\u0436\u043d\u043e \u0441\u0440\u0430\u0437\u0443 \u043e\u0442\u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0438\u043b\u0438 Verona, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u043c\u0435\u044e\u0442 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442. \u0418 \u0445\u043e\u0442\u044f \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u043e\u0441\u0442\u044c \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430 * \u043d\u0443\u043b\u0435\u0432\u0430\u044f, \u0432 \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u0435 \u043e\u043d \u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0432\u0435\u0440\u0445.<\/p>\n<p>\u0423\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b \u0432 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043d\u044b\u0445 \u0441\u043b\u043e\u044f\u0445 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0439\u0442\u0435 \u043e\u0441\u0442\u043e\u0440\u043e\u0436\u043d\u043e!<\/p>\n<\/div>\n<\/details>\n<h3>\u041e\u0442\u043b\u0430\u0434\u043a\u0430 \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u043e\u0432 \u0441\u043b\u043e\u0451\u0432 \u0432 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u0445 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430<\/h3>\n<p>\u0412 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 Chrome, Safari, Firefox \u0438 Edge \u0435\u0441\u0442\u044c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0435 \u043f\u0440\u043e\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u0441\u0442\u0438\u043b\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0412 \u043f\u0430\u043b\u0438\u0442\u0440\u0435 \u0441\u0442\u0438\u043b\u0435\u0439 \u044d\u0442\u043e\u0433\u043e \u0438\u043d\u0441\u043f\u0435\u043a\u0442\u043e\u0440\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u043c\u044b\u0435 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b, \u043e\u0442\u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043f\u043e \u0438\u0445 \u043a\u0430\u0441\u043a\u0430\u0434\u043d\u043e\u043c\u0443 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u0443 (\u043d\u0430\u0438\u0432\u044b\u0441\u0448\u0438\u0439 \u2014 \u0432\u0432\u0435\u0440\u0445\u0443), \u0430 \u043d\u0438\u0436\u0435 \u2014 \u0443\u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438. \u0421\u0442\u0438\u043b\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u043f\u0440\u0438\u0447\u0438\u043d\u0435 \u043d\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f, \u043e\u0431\u044b\u0447\u043d\u043e \u0432\u044b\u0434\u0435\u043b\u044f\u044e\u0442\u0441\u044f \u0441\u0435\u0440\u044b\u043c \u0446\u0432\u0435\u0442\u043e\u043c \u0438\u043b\u0438 \u0434\u0430\u0436\u0435 \u043f\u0435\u0440\u0435\u0447\u0451\u0440\u043a\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u2014 \u0438\u043d\u043e\u0433\u0434\u0430 \u0441 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0435\u0439 \u043e \u0442\u043e\u043c, <em>\u043f\u043e\u0447\u0435\u043c\u0443<\/em> \u0441\u0442\u0438\u043b\u044c \u043d\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f. \u042d\u0442\u043e \u043f\u0435\u0440\u0432\u043e\u0435, \u043a\u0443\u0434\u0430 \u043d\u0443\u0436\u043d\u043e \u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043f\u0440\u0438 \u043e\u0442\u043b\u0430\u0434\u043a\u0435 \u043b\u044e\u0431\u043e\u0433\u043e \u0430\u0441\u043f\u0435\u043a\u0442\u0430 \u043a\u0430\u0441\u043a\u0430\u0434\u0430, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u044b \u0441\u043b\u043e\u0451\u0432.<\/p>\n<p>\u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Safari Technology Preview \u0438 Firefox Nightly \u0432 \u0434\u0430\u043d\u043d\u043e\u0439 \u043f\u0430\u043b\u0438\u0442\u0440\u0435 \u0443\u0436\u0435 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0438 \u0441\u043e\u0440\u0442\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u043a\u0430\u0441\u043a\u0430\u0434\u043d\u044b\u0435 \u0441\u043b\u043e\u0438. \u041e\u0436\u0438\u0434\u0430\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u044d\u0442\u043e\u0442 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0439 \u0432\u044b\u043a\u0430\u0442\u044f\u0442 \u0432 \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0432\u0435\u0440\u0441\u0438\u044f\u0445 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0441 \u043a\u0430\u0441\u043a\u0430\u0434\u043d\u044b\u043c\u0438 \u0441\u043b\u043e\u044f\u043c\u0438. \u0421\u043b\u043e\u0439 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430 \u0443\u043a\u0430\u0437\u0430\u043d \u043f\u0440\u044f\u043c\u043e \u043d\u0430\u0434 \u043d\u0438\u043c:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/735\/8e4\/20f\/7358e420fb952beb8ff6e7ac9f285b29.jpeg\" width=\"1040\" height=\"770\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/735\/8e4\/20f\/7358e420fb952beb8ff6e7ac9f285b29.jpeg\" data-blurred=\"true\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0412 Safari:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/e51\/aac\/1b9\/e51aac1b91ccac9b99beb4b23baf9366.jpeg\" width=\"1338\" height=\"608\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/e51\/aac\/1b9\/e51aac1b91ccac9b99beb4b23baf9366.jpeg\" data-blurred=\"true\"\/><figcaption><\/figcaption><\/figure>\n<p>Firefox, Chrome\/Edge \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u043d\u0430\u0434 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b\u043c\u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u043c\u0438, \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u0435 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043e\u0436\u0438\u0434\u0430\u0435\u0442\u0441\u044f \u0432 nightly-\u0432\u0435\u0440\u0441\u0438\u044f\u0445 Canary \u043a \u0442\u043e\u043c\u0443 \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u043a\u043e\u0433\u0434\u0430 \u043a\u0430\u0441\u043a\u0430\u0434\u043d\u044b\u0435 \u0441\u043b\u043e\u0438 \u0431\u0443\u0434\u0443\u0442 \u0432 \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438. \u041c\u044b \u0431\u0443\u0434\u0435\u043c \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u0441\u0442\u0430\u0442\u044c\u044e \u043f\u043e \u043c\u0435\u0440\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0432 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u0445.<\/p>\n<h3>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 @layer \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c\u0438 \u0438 \u0440\u0435\u0437\u0435\u0440\u0432\u043d\u044b\u0435 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b<\/h3>\n<p>\u041a\u0430\u0441\u043a\u0430\u0434\u043d\u044b\u0435 \u0441\u043b\u043e\u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0438\u043b\u0438 \u0441\u043a\u043e\u0440\u043e \u0431\u0443\u0434\u0443\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0432\u043e \u0432\u0441\u0435\u0445 \u0442\u0440\u0451\u0445 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u0434\u0432\u0438\u0436\u043a\u0430\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432:<\/p>\n<ul>\n<li>\n<p>Chrome\/Edge 99+;<\/p>\n<\/li>\n<li>\n<p>Firefox 97+;<\/p>\n<\/li>\n<li>\n<p>Safari (\u0441\u0435\u0439\u0447\u0430\u0441 Safari Technology Preview).<\/p>\n<\/li>\n<\/ul>\n<p>\u0421\u043b\u043e\u0438 \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u0444\u0443\u043d\u0434\u0430\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u0441\u0442\u0440\u043e\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c\u0438 \u0431\u043b\u043e\u043a\u0430\u043c\u0438 \u0432\u0441\u0435\u0439 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u044b CSS, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0442\u0440\u0443\u0434\u043d\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c, \u0447\u0442\u043e \u0440\u0435\u0437\u0435\u0440\u0432\u043d\u044b\u0435 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u0431\u0443\u0434\u0443\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u0442\u0430\u043a, \u043a\u0430\u043a \u044d\u0442\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u0441 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u043c\u0438 CSS. <\/p>\n<p>\u0412 \u0440\u0435\u0437\u0435\u0440\u0432\u043d\u044b\u0445 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430\u0445, \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e, \u0431\u0443\u0434\u0435\u0442 \u0434\u0443\u0431\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u0440\u0430\u0437\u0434\u0435\u043b\u043e\u0432 \u043a\u043e\u0434\u0430 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0440\u0430\u0437\u043d\u044b\u0445 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u0432 \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043a\u0430\u0441\u043a\u0430\u0434\u043d\u044b\u043c \u043d\u0430\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c \u0441\u043b\u043e\u0451\u0432 \u0438\u043b\u0438 \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u043e\u0441\u0442\u0430\u044f \u0440\u0435\u0437\u0435\u0440\u0432\u043d\u0430\u044f \u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u0441\u0442\u0438\u043b\u0435\u0439.<\/p>\n<h4>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e @supports<\/h4>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u044f <a href=\"https:\/\/css-tricks.com\/how-supports-works\/\">@supports<\/a> \u0432 CSS \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0430\u0432\u0442\u043e\u0440\u0430\u043c \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 @layer \u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u043f\u0440\u0430\u0432\u0438\u043b \u0441 @:<\/p>\n<pre><code class=\"css\">@supports at-rule(@layer) {   \/* code applied for browsers with layer support *\/ }  @supports not at-rule(@layer) {   \/* fallback applied for browsers without layer support *\/ }<\/code><\/pre>\n<p>\u041e\u0434\u043d\u0430\u043a\u043e \u043d\u0435\u044f\u0441\u043d\u043e, \u043a\u043e\u0433\u0434\u0430 \u0441\u0430\u043c \u044d\u0442\u043e\u0442 \u0437\u0430\u043f\u0440\u043e\u0441 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445.<\/p>\n<h4>\u041d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441\u043b\u043e\u0451\u0432 \u0432 HTML \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0442\u0435\u0433\u0430 &lt;link><\/h4>\n<p>\u041e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430 \u0446\u0435\u043b\u044b\u0445 \u0442\u0430\u0431\u043b\u0438\u0446 \u0441\u0442\u0438\u043b\u0435\u0439 \u0441\u043b\u043e\u0451\u0432 \u0432 \u0442\u0435\u0433\u0435 &lt;link> \u043f\u043e\u043a\u0430 \u043d\u0435\u0442, \u043d\u043e \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0443\u0436\u0435 <a href=\"https:\/\/github.com\/whatwg\/html\/issues\/7540\">\u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f<\/a>. \u0412 \u043d\u0435\u0433\u043e \u0432\u043a\u043b\u044e\u0447\u0451\u043d \u043d\u043e\u0432\u044b\u0439 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 layer, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u043f\u0440\u0438\u0441\u0432\u043e\u0435\u043d\u0438\u044f \u0441\u0442\u0438\u043b\u0435\u0439 \u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u043d\u043e\u043c\u0443 \u0438\u043b\u0438 \u0430\u043d\u043e\u043d\u0438\u043c\u043d\u043e\u043c\u0443 \u0441\u043b\u043e\u044e:<\/p>\n<pre><code class=\"css\">&lt;!-- styles imported into to the &lt;layer-name> layer --> &lt;link rel=\"stylesheet\" href=\"example.css\" layer=\"&lt;layer-name>\">  &lt;!-- styles imported into to a new anonymous layer --> &lt;link rel=\"stylesheet\" href=\"example.css\" layer><\/code><\/pre>\n<p>\u041d\u043e \u0432 \u0441\u0442\u0430\u0440\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 \u0431\u0435\u0437 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 layer \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f: \u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u0441\u0442\u0438\u043b\u0435\u0439 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c\u0441\u044f \u0431\u0435\u0437 \u043d\u0430\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441\u043b\u043e\u0451\u0432 \u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u043c\u043e\u0433\u0443\u0442 \u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043d\u0435\u043e\u0436\u0438\u0434\u0430\u043d\u043d\u044b\u043c\u0438. <\/p>\n<p>\u0412 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0442\u0430\u043a\u0436\u0435 \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0435\u0442\u0441\u044f \u0430\u0442\u0440\u0438\u0431\u0443\u0442 media, \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0430 \u0432 support(). \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u043b\u043e \u0431\u044b \u0434\u0435\u043b\u0430\u0442\u044c \u043c\u043d\u043e\u0433\u043e\u0441\u043b\u043e\u0439\u043d\u044b\u0435 \u0441\u0441\u044b\u043b\u043a\u0438 \u0443\u0441\u043b\u043e\u0432\u043d\u044b\u043c\u0438, \u043e\u0441\u043d\u043e\u0432\u044b\u0432\u0430\u044f\u0441\u044c \u043d\u0430 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0435 @layer:<\/p>\n<pre><code class=\"css\">&lt;link rel=\"stylesheet\" layer=\"bootstrap\" media=\"supports(at-rule(@layer))\" href=\"bootstrap.css\"><\/code><\/pre>\n<h4>\u041f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u043e\u043b\u0438\u0444\u0438\u043b\u043b\u044b \u0438 \u043e\u0431\u0445\u043e\u0434\u043d\u044b\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f<\/h4>\n<p>\u0412\u0441\u0435 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u043f\u0435\u0440\u0435\u0448\u043b\u0438 \u043d\u0430 <a href=\"https:\/\/css-tricks.com\/evergreen-does-not-mean-immediately-available\/\">\u00ab\u0432\u0435\u0447\u043d\u043e\u0437\u0435\u043b\u0451\u043d\u0443\u044e\u00bb <\/a>\u043c\u043e\u0434\u0435\u043b\u044c \u0441 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f\u043c\u0438, \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c\u044b\u043c\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c \u0432 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043a\u043e\u0440\u043e\u0442\u043a\u043e\u043c \u0446\u0438\u043a\u043b\u0435 \u0432\u044b\u043f\u0443\u0441\u043a\u0430. \u0414\u0430\u0436\u0435 \u0434\u043b\u044f Safari \u0440\u0435\u0433\u0443\u043b\u044f\u0440\u043d\u043e \u0432\u044b\u043f\u0443\u0441\u043a\u0430\u044e\u0442\u0441\u044f \u043d\u043e\u0432\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0432 \u00ab\u0437\u0430\u043f\u0430\u0442\u0447\u0435\u043d\u043d\u044b\u0445\u00bb \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f\u0445 \u043c\u0435\u0436\u0434\u0443 \u0438\u0445 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u043c\u0438 \u0432\u0435\u0440\u0441\u0438\u044f\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043a\u0430\u0436\u0443\u0442\u0441\u044f \u0431\u043e\u043b\u0435\u0435 \u0440\u0435\u0434\u043a\u0438\u043c\u0438.<\/p>\n<p>\u0417\u043d\u0430\u0447\u0438\u0442, \u043c\u043e\u0436\u043d\u043e \u043e\u0436\u0438\u0434\u0430\u0442\u044c, \u0447\u0442\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u044d\u0442\u0438\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0442\u044c\u0441\u044f \u043e\u0447\u0435\u043d\u044c \u0431\u044b\u0441\u0442\u0440\u043e. \u0414\u043b\u044f \u043c\u043d\u043e\u0433\u0438\u0445 \u0438\u0437 \u043d\u0430\u0441 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0440\u0430\u0437\u0443\u043c\u043d\u043e \u043d\u0430\u0447\u0430\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043b\u043e\u0438 \u0443\u0436\u0435 \u0447\u0435\u0440\u0435\u0437 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u0435\u0441\u044f\u0446\u0435\u0432, \u043d\u0435 \u043e\u0441\u043e\u0431\u043e \u043f\u0435\u0440\u0435\u0436\u0438\u0432\u0430\u044f \u043e \u0441\u0442\u0430\u0440\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445. \u0410 \u0434\u043b\u044f \u043a\u043e\u0433\u043e-\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u0442\u0440\u0435\u0431\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0431\u043e\u043b\u044c\u0448\u0435 \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u0447\u0442\u043e\u0431\u044b \u043e\u0441\u0432\u043e\u0438\u0442\u044c\u0441\u044f \u0441\u043e \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u0439 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430. <\/p>\n<p>\u0415\u0441\u0442\u044c \u043c\u043d\u043e\u0433\u043e \u0434\u0440\u0443\u0433\u0438\u0445 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 <a href=\"https:\/\/css-tricks.com\/dont-fight-the-cascade-control-it\/\">\u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f <\/a>\u043a\u0430\u0441\u043a\u0430\u0434\u043e\u043c: \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u0432, \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445<a href=\"https:\/\/css-tricks.com\/using-custom-property-stacks-to-tame-the-cascade\/\"> \u0441\u0432\u043e\u0439\u0441\u0442\u0432<\/a> \u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0442\u0435\u043e\u0440\u0435\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0438\u043c\u0438\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0431\u0430\u0437\u043e\u0432\u043e\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0438\u043b\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0435\u0433\u043e \u043f\u043e\u043b\u0438\u0444\u0438\u043b\u043b. \u0415\u0441\u0442\u044c \u043b\u044e\u0434\u0438, \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0438\u0435 \u043d\u0430\u0434 \u044d\u0442\u0438\u043c \u043f\u043e\u043b\u0438\u0444\u0438\u043b\u043b\u043e\u043c, \u043d\u043e \u043d\u0435\u044f\u0441\u043d\u043e, \u043a\u043e\u0433\u0434\u0430 \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u0433\u043e\u0442\u043e\u0432.<\/p>\n<h3>\u0415\u0449\u0451 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u044b<\/h3>\n<p>\u041a\u0430\u0441\u043a\u0430\u0434\u043d\u044b\u0435 \u0441\u043b\u043e\u0438 CSS \u0435\u0449\u0451 \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u044e\u0442\u0441\u044f, \u043d\u043e \u0443\u0436\u0435 \u0435\u0441\u0442\u044c \u043c\u043d\u043e\u0433\u043e \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 \u043e \u043d\u0438\u0445, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f, \u0441\u0442\u0430\u0442\u044c\u0438, \u0432\u0438\u0434\u0435\u043e \u0438 \u0434\u0435\u043c\u043e, \u0447\u0442\u043e\u0431\u044b \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441\u043e \u0441\u043b\u043e\u044f\u043c\u0438 \u0438 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u043e\u043c \u0438\u0445 \u0440\u0430\u0431\u043e\u0442\u044b.<\/p>\n<p>\u0410 \u043c\u044b \u043f\u043e\u043c\u043e\u0436\u0435\u043c \u0432\u0430\u043c \u043f\u0440\u043e\u043a\u0430\u0447\u0430\u0442\u044c \u043d\u0430\u0432\u044b\u043a\u0438 \u0438\u043b\u0438 \u043e\u0441\u0432\u043e\u0438\u0442\u044c \u043f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u044e, \u0432\u043e\u0441\u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u043d\u0443\u044e \u0432 \u043b\u044e\u0431\u043e\u0435 \u0432\u0440\u0435\u043c\u044f:<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/skillfactory.ru\/python-fullstack-web-developer?utm_source=habr&amp;utm_medium=habr&amp;utm_campaign=article&amp;utm_content=coding_fpw_090322&amp;utm_term=conc\">\u041f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u044f Fullstack-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043d\u0430 Python<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/skillfactory.ru\/data-scientist-pro?utm_source=habr&amp;utm_medium=habr&amp;utm_campaign=article&amp;utm_content=data-science_dspr_090322&amp;utm_term=conc\">\u041f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u044f Data Scientist<\/a><\/p>\n<\/li>\n<\/ul>\n<p>\u0412\u044b\u0431\u0440\u0430\u0442\u044c \u0434\u0440\u0443\u0433\u0443\u044e <a href=\"https:\/\/skillfactory.ru\/catalogue?utm_source=habr&amp;utm_medium=habr&amp;utm_campaign=article&amp;utm_content=sf_allcourses_090322&amp;utm_term=conc\">\u0432\u043e\u0441\u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u043d\u0443\u044e \u043f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u044e<\/a>.<\/p>\n<details class=\"spoiler\">\n<summary>\u0421\u0441\u044b\u043b\u043a\u0438 \u0438\u0437 \u0441\u0442\u0430\u0442\u044c\u0438<\/summary>\n<div class=\"spoiler__content\">\n<ul>\n<li>\n<p><a href=\"https:\/\/www.w3.org\/TR\/css-cascade-5\/#layering\">Cascading &amp; Inheritance Level 5 Specification.<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/@layer\">MDN Documentation.<\/a><\/p>\n<\/li>\n<\/ul>\n<p>\u0421\u0442\u0430\u0442\u044c\u0438:<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/www.bram.us\/2021\/09\/15\/the-future-of-css-cascade-layers-css-at-layer\/\">The Future of CSS: Cascade Layers (CSS @layer)<\/a>, Bramus Van Damme.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/www.smashingmagazine.com\/2022\/01\/introduction-css-cascade-layers\/\">Getting Started With CSS Cascade Layers<\/a>, Stephanie Eckles, Smashing Magazine.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/developer.chrome.com\/blog\/cascade-layers\/\">Cascade layers are coming to your browser<\/a>, Una Kravets, Chrome Developers.<\/p>\n<\/li>\n<\/ul>\n<p>\u0412\u0438\u0434\u0435\u043e:<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/youtu.be\/dS123IXPcJ0\">How does CSS !important actually work?<\/a> Una Kravets.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/youtu.be\/ilrPpSQJb3U\">An overview of the new @layer and layer() CSS primitives<\/a>, Una Kravets.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=2wSckPwaC_A\">CSS Revert &amp; Revert-Layer Keywords<\/a>, Una Kravets.<\/p>\n<\/li>\n<\/ul>\n<p>\u0414\u0435\u043c\u043e:<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/codepen.io\/collection\/BNjmma\">Layers CodePen collection.<\/a><\/p>\n<\/li>\n<\/ul>\n<\/div>\n<\/details>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/c24\/79b\/ebf\/c2479bebf33a7904f7716fb8895061df.png\" width=\"1000\" height=\"200\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/c24\/79b\/ebf\/c2479bebf33a7904f7716fb8895061df.png\"\/><figcaption><\/figcaption><\/figure>\n<details class=\"spoiler\">\n<summary>\u041a\u0440\u0430\u0442\u043a\u0438\u0439 \u043a\u0430\u0442\u0430\u043b\u043e\u0433 \u043a\u0443\u0440\u0441\u043e\u0432 \u0438 \u043f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u0439<\/summary>\n<div class=\"spoiler__content\">\n<p><strong>Data Science \u0438 Machine Learning<\/strong><\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/skillfactory.ru\/data-scientist-pro?utm_source=habr&amp;utm_medium=habr&amp;utm_campaign=article&amp;utm_content=data-science_dspr_090322&amp;utm_term=cat\">\u041f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u044f Data Scientist<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/skillfactory.ru\/data-analyst-pro?utm_source=habr&amp;utm_medium=habr&amp;utm_campaign=article&amp;utm_content=analytics_dapr_090322&amp;utm_term=cat\">\u041f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u044f Data Analyst<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/skillfactory.ru\/matematika-dlya-data-science#syllabus?utm_source=habr&amp;utm_medium=habr&amp;utm_campaign=article&amp;utm_content=data-science_mat_090322&amp;utm_term=cat\">\u041a\u0443\u0440\u0441 \u00ab\u041c\u0430\u0442\u0435\u043c\u0430\u0442\u0438\u043a\u0430 \u0434\u043b\u044f Data Science\u00bb<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/skillfactory.ru\/matematika-i-machine-learning-dlya-data-science?utm_source=habr&amp;utm_medium=habr&amp;utm_campaign=article&amp;utm_content=data-science_matml_090322&amp;utm_term=cat\">\u041a\u0443\u0440\u0441 \u00ab\u041c\u0430\u0442\u0435\u043c\u0430\u0442\u0438\u043a\u0430 \u0438 Machine Learning \u0434\u043b\u044f Data Science\u00bb<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/skillfactory.ru\/data-engineer?utm_source=habr&amp;utm_medium=habr&amp;utm_campaign=article&amp;utm_content=data-science_dea_090322&amp;utm_term=cat\">\u041a\u0443\u0440\u0441 \u043f\u043e Data Engineering<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/skillfactory.ru\/machine-learning-i-deep-learning?utm_source=habr&amp;utm_medium=habr&amp;utm_campaign=article&amp;utm_content=data-science_mldl_090322&amp;utm_term=cat\">\u041a\u0443\u0440\u0441 \u00abMachine Learning \u0438 Deep Learning\u00bb<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/skillfactory.ru\/machine-learning?utm_source=habr&amp;utm_medium=habr&amp;utm_campaign=article&amp;utm_content=data-science_ml_090322&amp;utm_term=cat\">\u041a\u0443\u0440\u0441 \u043f\u043e Machine Learning<\/a><\/p>\n<\/li>\n<\/ul>\n<p><strong>Python, \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430<\/strong><\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/skillfactory.ru\/python-fullstack-web-developer?utm_source=habr&amp;utm_medium=habr&amp;utm_campaign=article&amp;utm_content=coding_fpw_090322&amp;utm_term=cat\">\u041f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u044f Fullstack-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043d\u0430 Python<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/skillfactory.ru\/python-for-web-developers?utm_source=habr&amp;utm_medium=habr&amp;utm_campaign=article&amp;utm_content=coding_pws_090322&amp;utm_term=cat\">\u041a\u0443\u0440\u0441 \u00abPython \u0434\u043b\u044f \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438\u00bb<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/skillfactory.ru\/frontend-razrabotchik?utm_source=habr&amp;utm_medium=habr&amp;utm_campaign=article&amp;utm_content=coding_fr_090322&amp;utm_term=cat\">\u041f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u044f Frontend-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/skillfactory.ru\/webdev?utm_source=habr&amp;utm_medium=habr&amp;utm_campaign=article&amp;utm_content=coding_webdev_090322&amp;utm_term=cat\">\u041f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u044f \u0412\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a<\/a><\/p>\n<\/li>\n<\/ul>\n<p><strong>\u041c\u043e\u0431\u0438\u043b\u044c\u043d\u0430\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430<\/strong><\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/skillfactory.ru\/ios-razrabotchik-s-nulya?utm_source=habr&amp;utm_medium=habr&amp;utm_campaign=article&amp;utm_content=coding_ios_090322&amp;utm_term=cat\">\u041f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u044f iOS-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/skillfactory.ru\/android-razrabotchik?utm_source=habr&amp;utm_medium=habr&amp;utm_campaign=article&amp;utm_content=coding_andr_090322&amp;utm_term=cat\">\u041f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u044f Android-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a<\/a><\/p>\n<\/li>\n<\/ul>\n<p><strong>Java \u0438 C#<\/strong><\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/skillfactory.ru\/java-razrabotchik?utm_source=habr&amp;utm_medium=habr&amp;utm_campaign=article&amp;utm_content=coding_java_090322&amp;utm_term=cat\">\u041f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u044f Java-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/skillfactory.ru\/java-qa-engineer-testirovshik-po?utm_source=habr&amp;utm_medium=habr&amp;utm_campaign=article&amp;utm_content=coding_qaja_090322&amp;utm_term=cat\">\u041f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u044f QA-\u0438\u043d\u0436\u0435\u043d\u0435\u0440 \u043d\u0430 JAVA<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/skillfactory.ru\/c-sharp-razrabotchik?utm_source=habr&amp;utm_medium=habr&amp;utm_campaign=article&amp;utm_content=coding_cdev_090322&amp;utm_term=cat\">\u041f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u044f C#-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/skillfactory.ru\/game-razrabotchik-na-unity-i-c-sharp?utm_source=habr&amp;utm_medium=habr&amp;utm_campaign=article&amp;utm_content=coding_gamedev_090322&amp;utm_term=cat\">\u041f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u044f \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0438\u0433\u0440 \u043d\u0430 Unity<\/a><\/p>\n<\/li>\n<\/ul>\n<p><strong>\u041e\u0442 \u043e\u0441\u043d\u043e\u0432 \u2014 \u0432 \u0433\u043b\u0443\u0431\u0438\u043d\u0443<\/strong><\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/skillfactory.ru\/algoritmy-i-struktury-dannyh?utm_source=habr&amp;utm_medium=habr&amp;utm_campaign=article&amp;utm_content=coding_algo_090322&amp;utm_term=cat\">\u041a\u0443\u0440\u0441 \u00ab\u0410\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u044b \u0438 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b \u0434\u0430\u043d\u043d\u044b\u0445\u00bb<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/skillfactory.ru\/c-plus-plus-razrabotchik?utm_source=habr&amp;utm_medium=habr&amp;utm_campaign=article&amp;utm_content=coding_cplus_090322&amp;utm_term=cat\">\u041f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u044f C++ \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/skillfactory.ru\/cyber-security-etichnij-haker?utm_source=habr&amp;utm_medium=habr&amp;utm_campaign=article&amp;utm_content=coding_hacker_090322&amp;utm_term=cat\">\u041f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u044f \u042d\u0442\u0438\u0447\u043d\u044b\u0439 \u0445\u0430\u043a\u0435\u0440<\/a><\/p>\n<\/li>\n<\/ul>\n<p><strong>\u0410 \u0442\u0430\u043a\u0436\u0435<\/strong><\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/skillfactory.ru\/devops-ingineer?utm_source=habr&amp;utm_medium=habr&amp;utm_campaign=article&amp;utm_content=coding_devops_090322&amp;utm_term=cat\">\u041a\u0443\u0440\u0441 \u043f\u043e DevOps<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/skillfactory.ru\/catalogue?utm_source=habr&amp;utm_medium=habr&amp;utm_campaign=article&amp;utm_content=sf_allcourses_090322&amp;utm_term=cat\">\u0412\u0441\u0435 \u043a\u0443\u0440\u0441\u044b<\/a><\/p>\n<\/li>\n<\/ul>\n<\/div>\n<\/details>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"v-portal\" style=\"display:none;\"><\/div>\n<\/div>\n<p> <!----> <!----><br \/> \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\/company\/skillfactory\/blog\/654715\/\"> https:\/\/habr.com\/ru\/company\/skillfactory\/blog\/654715\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u041f\u043e\u043b\u043d\u044b\u043c \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e\u043c \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u043a\u0430\u0441\u043a\u0430\u0434\u043d\u044b\u0435 \u0441\u043b\u043e\u0438, \u043a\u0430\u043a\u043e\u0439 \u0443 \u043d\u0438\u0445 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441, \u0437\u0430\u0447\u0435\u043c \u043e\u043d\u0438 \u043c\u043e\u0433\u0443\u0442 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u0438 \u043a\u0430\u043a \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c\u0438 \u0434\u0435\u043b\u0438\u043c\u0441\u044f \u043a \u0441\u0442\u0430\u0440\u0442\u0443 \u043a\u0443\u0440\u0441\u0430 \u043f\u043e <a href=\"https:\/\/skillfactory.ru\/python-fullstack-web-developer?utm_source=habr&amp;utm_medium=habr&amp;utm_campaign=article&amp;utm_content=coding_fpw_090322&amp;utm_term=lead\">Fullstack-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u043d\u0430 Python<\/a>.<\/p>\n<hr\/>\n<p>\u042d\u0442\u043e \u043f\u043e\u043b\u043d\u043e\u0435 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e \u043f\u043e \u043a\u0430\u0441\u043a\u0430\u0434\u043d\u044b\u043c \u0441\u043b\u043e\u044f\u043c \u2014 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0443 CSS, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0435\u043c\u0443 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u044f\u0432\u043d\u044b\u0435 \u0441\u043b\u043e\u0438 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u043e\u0441\u0442\u0438 \u0438 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442 \u0441\u0442\u0438\u043b\u0435\u0439 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435, \u043d\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044f \u00ab\u043a\u043e\u0441\u0442\u044b\u043b\u0438\u00bb \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u043e\u0441\u0442\u0438 \u0438\u043b\u0438 !important.\u00a0<\/p>\n<h4>\u041d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440<\/h4>\n<pre><code class=\"css\">\/* establish a layer order up-front, from lowest to highest priority *\/ @layer reset, defaults, patterns, components, utilities, overrides;  \/* import stylesheets into a layer (dot syntax represents nesting) *\/ @import url('framework.css') layer(components.framework);  \/* add styles to layers *\/ @layer utilities {   \/* high layer priority, despite low specificity *\/   [data-color='brand'] {      color: var(--brand, rebeccapurple);   } }  @layer defaults {   \/* higher specificity, but lower layer priority *\/   a:any-link { color: maroon; } }  \/* un-layered styles have the highest priority *\/ a {   color: mediumvioletred; }<\/code><\/pre>\n<h3>\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435. \u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u00ab\u043a\u0430\u0441\u043a\u0430\u0434\u043d\u044b\u0435 \u0441\u043b\u043e\u0438\u00bb?<\/h3>\n<p>\u041a\u0430\u0441\u043a\u0430\u0434\u043d\u044b\u0435 \u0441\u043b\u043e\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u044b \u0440\u0435\u0448\u0430\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b CSS. \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c <strong>\u0433\u043b\u0430\u0432\u043d\u0443\u044e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443<\/strong> \u0435\u0451 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u0430\u0441\u043a\u0430\u0434\u043d\u044b\u0445 \u0441\u043b\u043e\u0451\u0432.<\/p>\n<h4>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430: \u0440\u0430\u0437\u0440\u0430\u0441\u0442\u0430\u043d\u0438\u0435 \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u043e\u0432 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u043e\u0441\u0442\u0438<\/h4>\n<p>\u041c\u043d\u043e\u0433\u0438\u0435 \u0441\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u043b\u0438\u0441\u044c \u0441 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f\u043c\u0438, \u043a\u043e\u0433\u0434\u0430 \u0438\u0437-\u0437\u0430 \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u0443\u044e\u0449\u0438\u0445 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u0432 \u043d\u0443\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0441\u0442\u0438\u043b\u0438 \u0438\u0437 \u0434\u0440\u0443\u0433\u0438\u0445 \u0447\u0430\u0441\u0442\u0435\u0439 \u043a\u043e\u0434\u0430 \u0438\u043b\u0438 \u0438\u0437 \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0435\u0433\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430. \u0418 \u043c\u043d\u043e\u0433\u0438\u0435 \u0433\u043e\u0434\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043b\u0438\u0441\u044c \u0440\u0430\u0437\u043d\u044b\u0435 \u00ab\u043c\u0435\u0442\u043e\u0434\u043e\u043b\u043e\u0433\u0438\u0438\u00bb \u0438 \u00ab\u043b\u0443\u0447\u0448\u0438\u0435 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0438\u00bb, \u0447\u0442\u043e\u0431\u044b \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0445 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0439, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u00ab\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u043d\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430\u00bb \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u0432. \u042d\u0442\u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u043e\u0431\u044b\u0447\u043d\u043e \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u044b \u0441\u043a\u043e\u0440\u0435\u0435 \u043d\u0430 \u0443\u0445\u043e\u0434 \u043e\u0442 \u043a\u0430\u0441\u043a\u0430\u0434\u0430, \u0447\u0435\u043c \u043d\u0430 <a href=\"https:\/\/css-tricks.com\/dont-fight-the-cascade-control-it\/\">\u0435\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435<\/a>.<\/p>\n<p>\u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043a\u0430\u0441\u043a\u0430\u0434\u043d\u044b\u043c\u0438 \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u0430\u043c\u0438 \u0438 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u043e\u0441\u0442\u044c\u044e \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u0432 \u0441\u0447\u0438\u0442\u0430\u043b\u043e\u0441\u044c \u043e\u0434\u043d\u0438\u043c \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u0441\u043b\u043e\u0436\u043d\u044b\u0445 (\u0438\u043b\u0438 \u043f\u043e \u043a\u0440\u0430\u0439\u043d\u0435\u0439 \u043c\u0435\u0440\u0435 \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0437\u0430\u043f\u0443\u0442\u0430\u043d\u043d\u044b\u0445) \u0430\u0441\u043f\u0435\u043a\u0442\u043e\u0432 CSS. \u041e\u0442\u0447\u0430\u0441\u0442\u0438 \u044d\u0442\u043e \u043c\u043e\u0433\u043b\u043e \u0431\u044b\u0442\u044c \u0441\u0432\u044f\u0437\u0430\u043d\u043e \u0441 \u0442\u0435\u043c, \u0447\u0442\u043e \u043c\u0430\u043b\u043e \u0432 \u043a\u0430\u043a\u0438\u0445 \u0435\u0449\u0451 \u044f\u0437\u044b\u043a\u0430\u0445 \u043a\u0430\u0441\u043a\u0430\u0434 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b. <\/p>\n<p>\u041d\u043e \u0442\u0430\u043a \u0436\u0435 \u0432\u0435\u0440\u043d\u043e \u0438 \u0442\u043e, \u0447\u0442\u043e \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u0430\u0441\u043a\u0430\u0434 \u0441\u0438\u043b\u044c\u043d\u043e \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u0441\u043a\u043e\u0440\u0435\u0435 \u043e\u0442 <em>\u044d\u0432\u0440\u0438\u0441\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u043f\u043e\u0434\u0445\u043e\u0434\u043e\u0432<\/em> (\u043e\u0431\u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0438 \u0434\u043e\u043f\u0443\u0449\u0435\u043d\u0438\u0439, \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0445 \u0432 \u043a\u043e\u0434), \u0447\u0435\u043c \u043e\u0442 \u043f\u0440\u044f\u043c\u043e\u0433\u043e \u0438 \u044f\u0432\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044f \u0432\u0435\u0431-\u0430\u0432\u0442\u043e\u0440\u0430\u043c.<\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u043e\u0441\u0442\u044c \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u0432 \u2014 \u043f\u0435\u0440\u0432\u0438\u0447\u043d\u043e\u0435 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0441 \u043a\u0430\u0441\u043a\u0430\u0434\u043e\u043c \u2014 \u043e\u0441\u043d\u043e\u0432\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0438, \u0447\u0442\u043e \u0443\u0437\u043a\u043e\u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 (\u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u0440\u0430\u0437), \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e, \u0432\u0430\u0436\u043d\u0435\u0435 \u0431\u043e\u043b\u0435\u0435 \u043e\u0431\u0449\u0438\u0445 \u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0445 (\u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a \u043a\u043b\u0430\u0441\u0441\u044b \u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b). <\/p>\n<p>\u0418\u043d\u044b\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438, \u044d\u0442\u043e \u0442\u043e, \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e <em>\u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u0435\u043d<\/em> \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440. \u0418 \u044d\u0442\u043e \u0445\u043e\u0440\u043e\u0448\u0435\u0435 \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043d\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u043e \u043d\u0435 \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e \u043d\u0430\u0434\u0451\u0436\u043d\u043e\u0435, \u0447\u0442\u043e \u0447\u0440\u0435\u0432\u0430\u0442\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430\u043c\u0438:<\/p>\n<ul>\n<li>\n<p><em>\u0412\u044b\u0431\u043e\u0440 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432<\/em> \u0441\u043e\u0447\u0435\u0442\u0430\u0435\u0442\u0441\u044f \u0441 <em>\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435\u043c \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u0430 \u043d\u0430\u0431\u043e\u0440\u043e\u0432 \u043f\u0440\u0430\u0432\u0438\u043b<\/em>.<\/p>\n<\/li>\n<li>\n<p>\u0421\u0430\u043c\u044b\u0439 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u00ab\u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c\u00bb \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442 \u0441\u043e \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u043e\u0441\u0442\u044c\u044e \u2014 \u0443\u0441\u0443\u0433\u0443\u0431\u0438\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u043d\u0435\u043d\u0443\u0436\u043d\u044b\u0435 \u0432 \u0438\u043d\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b, \u0438\u043b\u0438 <a href=\"https:\/\/css-tricks.com\/when-using-important-is-the-right-choice\/\">\u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c<\/a> !important:<\/p>\n<\/li>\n<\/ul>\n<pre><code class=\"css\">.overly#powerful .framework.widget {   color: maroon; }  .my-single_class { \/* add some IDs to this ??? *\/   color: rebeccapurple; \/* add !important ??? *\/ }<\/code><\/pre>\n<h4>\u0420\u0435\u0448\u0435\u043d\u0438\u0435: \u043a\u0430\u0441\u043a\u0430\u0434\u043d\u044b\u0435 \u0441\u043b\u043e\u0438 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u044e\u0442 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c<\/h4>\n<p>\u041a\u0430\u0441\u043a\u0430\u0434\u043d\u044b\u0435 \u0441\u043b\u043e\u0438 \u0434\u0430\u044e\u0442 \u0430\u0432\u0442\u043e\u0440\u0430\u043c CSS \u0431\u043e\u043b\u044c\u0448\u0435 \u043f\u0440\u044f\u043c\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044f \u043d\u0430\u0434 \u043a\u0430\u0441\u043a\u0430\u0434\u043e\u043c, \u0442\u0430\u043a \u0447\u0442\u043e \u043a\u0430\u0441\u043a\u0430\u0434\u043d\u044b\u0435 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u0446\u0435\u043b\u0435\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043d\u043e, \u0430\u043a\u0442\u0438\u0432\u043d\u043e \u043d\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044f \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0435 \u0441 \u0432\u044b\u0431\u043e\u0440\u043e\u043c \u044d\u0432\u0440\u0438\u0441\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>\u0421 @layer \u0438 \u043c\u043d\u043e\u0433\u043e\u0441\u043b\u043e\u0439\u043d\u044b\u043c\u0438 @import \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 <em>\u0441\u043b\u043e\u0438 \u043a\u0430\u0441\u043a\u0430\u0434\u0430<\/em>, \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u044f \u0441\u0442\u0438\u043b\u0438 \u043e\u0442 \u043d\u0438\u0437\u043a\u043e\u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043d\u044b\u0445, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 resets \u0438 defaults \u0447\u0435\u0440\u0435\u0437 themes, frameworks \u0438 design systems, \u0434\u043e \u0432\u044b\u0441\u043e\u043a\u043e\u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043d\u044b\u0445, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a components, utilities \u0438 overrides. <\/p>\n<p>\u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043a \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u0430\u043c <em>\u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0441\u043b\u043e\u044f<\/em>, \u043d\u043e \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u044b \u0441\u043b\u043e\u0451\u0432 \u0432\u0441\u0435\u0433\u0434\u0430 \u0440\u0430\u0437\u0440\u0435\u0448\u0430\u044e\u0442\u0441\u044f \u0432 \u043f\u043e\u043b\u044c\u0437\u0443 \u0441\u043b\u043e\u044f \u0441 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043e\u043c \u0432\u044b\u0448\u0435:<\/p>\n<pre><code class=\"css\">@layer framework {   .overly#powerful .framework.widget {     color: maroon;   } }  @layer site {   .my-single_class {     color: rebeccapurple;   } }<\/code><\/pre>\n<p>\u042d\u0442\u0438 \u0441\u043b\u043e\u0438 \u0443\u043f\u043e\u0440\u044f\u0434\u043e\u0447\u0435\u043d\u044b \u0438 \u0441\u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0438 \u043d\u0435 \u0440\u0430\u0437\u0440\u0430\u0441\u0442\u0430\u043b\u0438\u0441\u044c \u043f\u043e\u0434\u043e\u0431\u043d\u043e \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u043e\u0441\u0442\u0438 \u0438 \u0432\u0430\u0436\u043d\u043e\u0441\u0442\u0438. \u041a\u0430\u0441\u043a\u0430\u0434\u043d\u044b\u0435 \u0441\u043b\u043e\u0438 \u043d\u0435 \u0441\u0442\u043e\u043b\u044c \u043a\u0443\u043c\u0443\u043b\u044f\u0442\u0438\u0432\u043d\u044b, \u043a\u0430\u043a \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b. <em>\u0412\u0430\u0436\u043d\u043e\u0441\u0442\u0438<\/em> \u043e\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f <em>\u0441\u043b\u043e\u0451\u0432<\/em> \u043d\u0435 \u043f\u0440\u0438\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f. <\/p>\n<p>\u0418, \u0432 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 \u0432\u0430\u0436\u043d\u043e\u0441\u0442\u0438, \u0441\u043b\u043e\u0438 \u043d\u0435 \u0434\u0432\u043e\u0438\u0447\u043d\u044b: \u043e\u043d\u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044f\u0442 \u0441\u0440\u0430\u0437\u0443 \u043d\u0430 \u0432\u0435\u0440\u0448\u0438\u043d\u0443 \u0441\u0442\u0435\u043a\u0430 \u0438\u043b\u0438 \u0438\u043c\u0435\u044e\u0442 \u043d\u0443\u043c\u0435\u0440\u0430\u0446\u0438\u044e, \u043f\u043e\u0434\u043e\u0431\u043d\u0443\u044e z-index, \u0433\u0434\u0435 \u043d\u0443\u0436\u043d\u043e \u0443\u0433\u0430\u0434\u044b\u0432\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u0447\u0438\u0441\u043b\u043e (z-index: 9999999?). \u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u043c\u043d\u043e\u0433\u043e\u0441\u043b\u043e\u0439\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e <em>\u043c\u0435\u043d\u0435\u0435 \u0432\u0430\u0436\u043d\u044b<\/em>, \u0447\u0435\u043c \u0441\u0442\u0438\u043b\u0438 \u0431\u0435\u0437 \u0441\u043b\u043e\u0451\u0432:<\/p>\n<pre><code class=\"css\">@layer defaults {   a:any-link { color: maroon; } }  \/* un-layered styles have the highest priority *\/ a {   color: mediumvioletred; }<\/code><\/pre>\n<h3>\u0413\u0434\u0435 \u0441\u043b\u043e\u0438 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u044e\u0442\u0441\u044f \u0432 \u043a\u0430\u0441\u043a\u0430\u0434\u0435?<\/h3>\n<p>\u041a\u0430\u0441\u043a\u0430\u0434 \u2014 \u044d\u0442\u043e \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u043e\u0432 \u0441\u0442\u0438\u043b\u0435\u0439:<\/p>\n<pre><code class=\"css\">html { --button: teal; } button { background: rebeccapurple !important; } .warning { background: maroon; }<\/code><\/pre>\n<pre><code class=\"xml\">&lt;button class=\"warning\" style=\"background: var(--button);\">   what color background? &lt;\/button><\/code><\/pre>\n<p>\u0412\u043e\u0442 \u044d\u0442\u0430\u043f\u044b \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u0430 \u0441 \u0443\u0447\u0451\u0442\u043e\u043c \u043a\u0430\u0441\u043a\u0430\u0434\u043d\u044b\u0445 \u0441\u043b\u043e\u0451\u0432:<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p><em>\u0421\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u043e\u0441\u0442\u044c \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u0432<\/em> \u2014 \u044d\u0442\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u043d\u0430, \u043c\u0430\u043b\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u043a\u0430\u0441\u043a\u0430\u0434\u0430, \u043d\u043e \u0442\u0430\u043a\u0436\u0435 \u044d\u0442\u043e \u044d\u0442\u0430\u043f, \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043c\u044b \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0443\u0435\u043c \u0447\u0430\u0449\u0435 \u0432\u0441\u0435\u0433\u043e. \u041e\u0431\u044b\u0447\u043d\u043e \u043e\u043d \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043e\u0431\u0449\u0435\u0433\u043e <em>\u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u0430 \u043a\u0430\u0441\u043a\u0430\u0434\u0430<\/em>. <\/p>\n<p>\u041c\u043e\u0436\u043d\u043e \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e \u0444\u043b\u0430\u0433 !important \u0438\u043b\u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 style \u00ab\u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u043e\u0441\u0442\u0438\u00bb: \u044d\u0442\u043e \u0431\u044b\u0441\u0442\u0440\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0438\u0442\u044c, \u0447\u0442\u043e \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442 \u0441\u0442\u0438\u043b\u044f \u0432 \u043a\u0430\u0441\u043a\u0430\u0434\u0435 \u043f\u043e\u0432\u044b\u0448\u0430\u0435\u0442\u0441\u044f. \u041a\u0430\u0441\u043a\u0430\u0434\u043d\u044b\u0435 \u0441\u043b\u043e\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u044b \u043f\u0440\u044f\u043c\u043e \u043d\u0430\u0434 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u043e\u0441\u0442\u044c\u044e, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0440\u0430\u0437\u0443\u043c\u043d\u043e \u0441\u0447\u0438\u0442\u0430\u0442\u044c \u0438\u0445 \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043d\u044b\u043c\u0438, \u0447\u0435\u043c \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u043e\u0432.<\/p>\n<p>\u041a\u0430\u0441\u043a\u0430\u0434\u043d\u044b\u0435 \u0441\u043b\u043e\u0438 \u043f\u043e\u0432\u044b\u0448\u0430\u044e\u0442 \u0437\u043d\u0430\u0447\u0438\u043c\u043e\u0441\u0442\u044c \u043f\u043e\u043b\u043d\u043e\u0433\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u0440\u043e\u043b\u0438 !important \u0432 \u043a\u0430\u0441\u043a\u0430\u0434\u0435 \u2014 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u0430\u043a \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430 \u0434\u043b\u044f \u00ab\u043f\u043e\u0432\u044b\u0448\u0435\u043d\u0438\u044f \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u043e\u0441\u0442\u0438\u00bb, \u043d\u043e \u0438 \u043a\u0430\u043a \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0431\u0430\u043b\u0430\u043d\u0441\u0438\u0440\u043e\u0432\u043a\u0438 \u0437\u0430\u0434\u0430\u0447.<\/p>\n<h3>\u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0438, \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u0438 \u0441\u043b\u043e\u0438 !important \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u044e\u0442\u0441\u044f \u0432 \u043f\u0440\u043e\u0442\u0438\u0432\u043e\u043f\u043e\u043b\u043e\u0436\u043d\u043e\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435<\/h3>\n<p>\u041a\u0430\u043a \u0432\u0435\u0431-\u0430\u0432\u0442\u043e\u0440\u044b \u043c\u044b \u0447\u0430\u0441\u0442\u043e \u0441\u0447\u0438\u0442\u0430\u0435\u043c !important \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c \u043f\u043e\u0432\u044b\u0448\u0435\u043d\u0438\u044f \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u043e\u0441\u0442\u0438, \u0447\u0442\u043e\u0431\u044b \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u0438\u043b\u0438 \u0432\u044b\u0441\u043e\u043a\u043e\u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u044b\u0435 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b. \u0412 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0435 \u0441\u043b\u0443\u0447\u0430\u0435\u0432 \u044d\u0442\u043e \u043e\u0431\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0431\u0435\u0437 \u043f\u0440\u043e\u0431\u043b\u0435\u043c, \u0435\u0441\u043b\u0438 \u0440\u0430\u0437\u0440\u0430\u0441\u0442\u0430\u043d\u0438\u0435 \u0434\u043b\u044f \u0432\u0430\u0441 \u043d\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430, \u043d\u043e \u0443\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u043f\u0435\u0440\u0432\u043e\u043e\u0447\u0435\u0440\u0435\u0434\u043d\u0430\u044f \u0446\u0435\u043b\u044c <em>\u0432\u0430\u0436\u043d\u043e\u0441\u0442\u0438<\/em> \u043a\u0430\u043a \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0432 \u043e\u0431\u0449\u0435\u043c \u043a\u0430\u0441\u043a\u0430\u0434\u0435.<\/p>\n<p>\u0412\u0430\u0436\u043d\u043e\u0441\u0442\u044c \u043d\u0443\u0436\u043d\u0430 \u043d\u0435 \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0442\u044c \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442, \u0430 \u0447\u0442\u043e\u0431\u044b \u0441\u0431\u0430\u043b\u0430\u043d\u0441\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442 \u043a\u043e\u043d\u043a\u0443\u0440\u0438\u0440\u0443\u044e\u0449\u0438\u0445 \u0437\u0430\u0434\u0430\u0447.<\/p>\n<h4>\u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0438 \u0432\u0430\u0436\u043d\u043e\u0441\u0442\u0438<\/h4>\n<p>\u0412\u0441\u0451 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0441 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u043e\u0432, \u043e\u0442\u043a\u0443\u0434\u0430 \u0432 \u0432\u0435\u0431-\u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0435 \u0431\u0435\u0440\u0451\u0442\u0441\u044f \u0441\u0442\u0438\u043b\u044c. \u0412 CSS \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0430 \u0442\u0440\u0438. \u042d\u0442\u043e:<\/p>\n<ul>\n<li>\n<p><strong>\u0431\u0440\u0430\u0443\u0437\u0435\u0440<\/strong> (\u0438\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0430\u0433\u0435\u043d\u0442);<\/p>\n<\/li>\n<li>\n<p><strong>\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c<\/strong> (\u0447\u0430\u0441\u0442\u043e \u0447\u0435\u0440\u0435\u0437 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430);<\/p>\n<\/li>\n<li>\n<p><strong>\u0432\u0435\u0431<\/strong>&#8212;<strong>\u0430\u0432\u0442\u043e\u0440\u044b<\/strong> (\u044d\u0442\u043e \u043c\u044b!).<\/p>\n<\/li>\n<\/ul>\n<p>\u0412 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0447\u0438\u0442\u0430\u0435\u043c\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u0437\u0430\u0442\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u044e\u0442 \u0441\u0432\u043e\u0438 \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0442\u0435\u043d\u0438\u044f, \u0438 \u0443\u0436\u0435 \u043c\u044b (\u0430\u0432\u0442\u043e\u0440\u044b) \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u0434\u0438\u0437\u0430\u0439\u043d \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446. \u0418\u0442\u0430\u043a, \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u0443 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 \u0441\u0430\u043c\u044b\u0439 \u043d\u0438\u0437\u043a\u0438\u0439 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442, \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0432 \u043d\u0438\u0445 \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442\u0441\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u043c\u0438 \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0442\u0435\u043d\u0438\u044f\u043c\u0438, \u0430 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0438\u0445 \u0432\u0441\u0435. \u041d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u0435\u043b\u0438 CSS \u043e\u0447\u0435\u043d\u044c \u0447\u0451\u0442\u043a\u043e \u0434\u0430\u043b\u0438 \u043f\u043e\u043d\u044f\u0442\u044c, \u0447\u0442\u043e \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435 \u0441\u043b\u043e\u0432\u043e \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u043e\u0441\u0442\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u0437\u0430 \u043d\u0430\u043c\u0438:<\/p>\n<blockquote>\n<p>\u00ab\u041f\u0440\u0438 \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u0438 \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u043e\u0432 <strong>\u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435 \u0441\u043b\u043e\u0432\u043e \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0437\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c<\/strong>, \u043d\u043e \u0438 \u0430\u0432\u0442\u043e\u0440\u0443 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u043f\u043e\u0437\u0432\u043e\u043b\u0435\u043d\u043e \u043f\u0440\u0438\u043a\u0440\u0435\u043f\u043b\u044f\u0442\u044c \u0441\u0442\u0438\u043b\u0435\u0432\u044b\u0435 \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0438\u00bb.<\/p>\n<p>\u2014 \u0425\u043e\u043a\u043e\u043d \u041b\u0438 (\u0432\u044b\u0434\u0435\u043b\u0435\u043d\u043e \u043c\u043d\u043e\u0439)<\/p>\n<\/blockquote>\n<p>\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, <em>\u0432\u0430\u0436\u043d\u043e\u0441\u0442\u044c<\/em> \u0434\u0430\u0451\u0442 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0443 \u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0432\u0435\u0440\u043d\u0443\u0442\u044c \u0441\u0432\u043e\u0439 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442, \u043a\u043e\u0433\u0434\u0430 \u044d\u0442\u043e \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0432\u0430\u0436\u043d\u043e. \u041a\u043e\u0433\u0434\u0430 \u043a \u0441\u0442\u0438\u043b\u044e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0444\u043b\u0430\u0433 !important, \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u0442\u0440\u0438 \u043d\u043e\u0432\u044b\u0445 \u0441\u043b\u043e\u044f, \u0430 \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043e\u0431\u0440\u0430\u0442\u043d\u044b\u043c!<\/p>\n<p>1) \u0441\u0442\u0438\u043b\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 !important (\u0441\u0430\u043c\u044b\u0435 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043d\u044b\u0435);<\/p>\n<p>2) \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0442\u0435\u043d\u0438\u044f !important;<\/p>\n<p>3) \u0430\u0432\u0442\u043e\u0440\u0441\u043a\u0438\u0435 \u0441\u0442\u0438\u043b\u0438 !important;<\/p>\n<p>4) \u043e\u0431\u044b\u0447\u043d\u044b\u0435 \u0430\u0432\u0442\u043e\u0440\u0441\u043a\u0438\u0435 \u0441\u0442\u0438\u043b\u0438;<\/p>\n<p>5) \u043e\u0431\u044b\u0447\u043d\u044b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0442\u0435\u043d\u0438\u044f;<\/p>\n<p>6) \u043e\u0431\u044b\u0447\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 (\u043d\u0430\u0438\u043c\u0435\u043d\u0435\u0435 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043d\u044b\u0435).<\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0441 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 !important \u043c\u0430\u043b\u043e \u0447\u0442\u043e \u043c\u0435\u043d\u044f\u0435\u0442: \u0432\u0430\u0436\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0431\u043b\u0438\u0437\u043a\u0438 \u043a \u043e\u0431\u044b\u0447\u043d\u044b\u043c; \u043d\u043e \u044d\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u043c\u043e\u0449\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0432\u043e\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044f \u0434\u043b\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f. \u0422\u0430\u0431\u043b\u0438\u0446\u044b \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0441\u0442\u0438\u043b\u0435\u0439 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 \u0440\u044f\u0434 \u0432\u0430\u0436\u043d\u044b\u0445 \u0441\u0442\u0438\u043b\u0435\u0439, \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u043d\u0435 \u0441\u043c\u043e\u0433\u043b\u0438 \u0431\u044b, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<pre><code class=\"css\">iframe:fullscreen {   \/* iframes in full-screen mode don't show a border. *\/   border: none !important;   padding: unset !important; }<\/code><\/pre>\n<p>\u0425\u043e\u0442\u044f \u0432 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0435 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u043f\u0435\u0440\u0432\u043e\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u0442\u0430\u0431\u043b\u0438\u0446 \u0441\u0442\u0438\u043b\u0435\u0439 \u0437\u0430\u0442\u0440\u0443\u0434\u043d\u0435\u043d\u0430, \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0438 \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0434\u043b\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u0441\u0442\u0438\u043b\u0435\u0439 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e\u0442\u0441\u044f \u0432\u043e \u0432\u0441\u0435\u0445. <\/p>\n<p>\u0412 \u044d\u0442\u043e\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u0435\u0441\u0442\u044c \u0444\u043b\u0430\u0436\u043e\u043a, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u0432\u044b\u0431\u0438\u0440\u0430\u043b\u0438, \u0440\u0430\u0437\u0440\u0435\u0448\u0438\u0442\u044c \u0441\u0430\u0439\u0442\u0443 \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u0438\u0445 \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0442\u0435\u043d\u0438\u044f. \u042d\u0442\u043e \u0442\u043e \u0436\u0435, \u0447\u0442\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 !important \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0435 \u0441\u0442\u0438\u043b\u0435\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f:<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<h4>\u0412\u0430\u0436\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442<\/h4>\n<p>\u0422\u0430 \u0436\u0435 \u0431\u0430\u0437\u043e\u0432\u0430\u044f \u043b\u043e\u0433\u0438\u043a\u0430 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043a <em>\u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0443<\/em> \u0432 \u043a\u0430\u0441\u043a\u0430\u0434\u0435. \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0441\u0442\u0438\u043b\u0438 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430 (\u0442\u0435\u043d\u0435\u0432\u043e\u0439 DOM) \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442\u0441\u044f \u0441\u0442\u0438\u043b\u044f\u043c\u0438 \u0433\u043b\u0430\u0432\u043d\u043e\u0433\u043e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430 (\u043e\u0431\u044b\u0447\u043d\u044b\u0439 DOM). \u041d\u043e \u043f\u0440\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0438 !important \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043d\u0430 \u043f\u0440\u043e\u0442\u0438\u0432\u043e\u043f\u043e\u043b\u043e\u0436\u043d\u044b\u0439:<\/p>\n<ol>\n<li>\n<p>\u0422\u0435\u043d\u0435\u0432\u043e\u0439 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 !important (\u0441\u0430\u043c\u044b\u0439 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043d\u044b\u0439).<\/p>\n<\/li>\n<li>\n<p>\u0413\u043b\u0430\u0432\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 !important.<\/p>\n<\/li>\n<li>\n<p>\u041e\u0431\u044b\u0447\u043d\u044b\u0439 \u0433\u043b\u0430\u0432\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442.<\/p>\n<\/li>\n<li>\n<p>\u041e\u0431\u044b\u0447\u043d\u044b\u0439 \u0442\u0435\u043d\u0435\u0432\u043e\u0439 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 (\u043d\u0430\u0438\u043c\u0435\u043d\u0435\u0435 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043d\u044b\u0439).<\/p>\n<\/li>\n<\/ol>\n<p>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u044b\u0435 \u0432 \u0433\u043b\u0430\u0432\u043d\u043e\u043c \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0435 \u0432\u0430\u0436\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442\u0441\u044f \u0432\u0430\u0436\u043d\u044b\u043c\u0438 \u0441\u0442\u0438\u043b\u044f\u043c\u0438 \u0442\u0435\u043d\u0435\u0432\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430. <\/p>\n<p>\u0412\u043e\u0442 <a href=\"https:\/\/css-tricks.com\/an-introduction-to-web-components\/\">\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442<\/a> odd-bird. \u041e\u0434\u043d\u0438 \u0435\u0433\u043e \u0441\u0442\u0438\u043b\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u044b \u0432 \u0448\u0430\u0431\u043b\u043e\u043d\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 (\u0442\u0435\u043d\u0435\u0432\u043e\u0439 DOM), \u0434\u0440\u0443\u0433\u0438\u0435 \u2014 \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0435 \u0441\u0442\u0438\u043b\u0435\u0439 \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b (\u043e\u0431\u044b\u0447\u043d\u044b\u0439 DOM):<\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/6228fe745af7f3126792b5b8\" data-style=\"\" id=\"6228fe745af7f3126792b5b8\" width=\"\"><\/div>\n<p>\u0423 \u043e\u0431\u043e\u0438\u0445 \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0438\u0439 color \u0432\u0430\u0436\u043d\u043e\u0441\u0442\u044c \u043e\u0431\u044b\u0447\u043d\u0430\u044f, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0433\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 mediumvioletred \u043e\u0431\u043b\u0430\u0434\u0430\u0435\u0442 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043e\u043c. \u041d\u043e \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0438\u044f font-family \u043f\u043e\u043c\u0435\u0447\u0435\u043d\u044b \u043a\u0430\u043a !important, \u0447\u0442\u043e \u0434\u0430\u0451\u0442 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u043e \u0442\u0435\u043d\u0435\u0432\u043e\u043c\u0443 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0443, \u0433\u0434\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f fantasy.<\/p>\n<h4>\u0412\u0430\u0436\u043d\u044b\u0435 \u0441\u043b\u043e\u0438<\/h4>\n<p>\u041f\u0440\u0438\u043d\u0446\u0438\u043f \u0440\u0430\u0431\u043e\u0442\u044b \u043a\u0430\u0441\u043a\u0430\u0434\u043d\u044b\u0445 \u0441\u043b\u043e\u0451\u0432 \u0442\u043e\u0442 \u0436\u0435, \u0447\u0442\u043e \u0443 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u043e\u0432 \u0438 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430, \u043f\u0440\u0438\u0447\u0451\u043c \u0432\u0430\u0436\u043d\u044b\u0435 \u0441\u043b\u043e\u0438 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u044e\u0442\u0441\u044f \u0432 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435. \u0415\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u0430\u044f \u0440\u0430\u0437\u043d\u0438\u0446\u0430 \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u044d\u0442\u043e \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0431\u043e\u043b\u0435\u0435 \u0437\u0430\u043c\u0435\u0442\u043d\u043e \u0438\u0437-\u0437\u0430 \u0441\u043b\u043e\u0451\u0432.<\/p>\n<p>\u041f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u043a\u0430\u0441\u043a\u0430\u0434\u043d\u044b\u0445 \u0441\u043b\u043e\u0451\u0432 \u0432 \u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0438 !important \u043d\u0443\u0436\u043d\u044b \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u0431\u043e\u043b\u0435\u0435 \u043e\u0441\u0442\u043e\u0440\u043e\u0436\u043d\u044b\u0435 \u0438 \u043f\u0440\u043e\u0434\u0443\u043c\u0430\u043d\u043d\u044b\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f. \u042d\u0442\u043e \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0431\u044b\u0441\u0442\u0440\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0437\u0430\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0432\u0435\u0440\u0448\u0438\u043d\u0443 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043e\u0432, \u043d\u043e \u0438 \u043d\u0435\u043e\u0442\u044a\u0435\u043c\u043b\u0435\u043c\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u043a\u0430\u0441\u043a\u0430\u0434\u043d\u043e\u0433\u043e \u043d\u0430\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441\u043b\u043e\u0451\u0432, \u0441\u043f\u043e\u0441\u043e\u0431 <em>\u043f\u043e\u0434\u0447\u0435\u0440\u043a\u043d\u0443\u0442\u044c<\/em> \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u0442\u0435\u0445 \u0438\u043b\u0438 \u0438\u043d\u044b\u0445 \u0441\u0442\u0438\u043b\u0435\u0439 \u043d\u0438\u0436\u043d\u0438\u0445 \u0441\u043b\u043e\u0451\u0432.<\/p>\n<p>\u041a\u0430\u0441\u043a\u0430\u0434\u043d\u044b\u0435 \u0441\u043b\u043e\u0438 \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u044e\u0442\u0441\u044f, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u0435\u0434\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u043e\u0433\u043e \u043f\u043e\u0440\u044f\u0434\u043a\u0430 \u043d\u0435\u0442. \u041d\u043e \u043d\u0430\u0447\u0430\u0442\u044c \u043c\u043e\u0436\u043d\u043e \u0441 \u0442\u0440\u0451\u0445 \u0441\u043b\u043e\u0451\u0432:<\/p>\n<p>1) utilities (\u0441\u0430\u043c\u044b\u0439 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043d\u044b\u0439);<\/p>\n<p>2) components (\u0441\u0440\u0435\u0434\u043d\u0435\u0433\u043e \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u0430);<\/p>\n<p>3) defaults (\u043d\u0430\u0438\u043c\u0435\u043d\u0435\u0435 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043d\u044b\u0439).<\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 \u0441\u0442\u0438\u043b\u0438 \u0432 \u044d\u0442\u0438\u0445 \u0441\u043b\u043e\u044f\u0445 \u043e\u0442\u043c\u0435\u0447\u0430\u044e\u0442\u0441\u044f \u043a\u0430\u043a \u0432\u0430\u0436\u043d\u044b\u0435, \u0432 \u043d\u0438\u0445 \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u0442\u0440\u0438 \u043d\u043e\u0432\u044b\u0445 \u0441\u043b\u043e\u044f, \u043e\u0442\u043c\u0435\u0447\u0435\u043d\u043d\u044b\u0445 !important, \u0432 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435:<\/p>\n<ol>\n<li>\n<p>!important defaults (\u0441\u0430\u043c\u044b\u0439 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043d\u044b\u0439).<\/p>\n<\/li>\n<li>\n<p>!important components.<\/p>\n<\/li>\n<li>\n<p>!important utilities.<\/p>\n<\/li>\n<li>\n<p>\u041e\u0431\u044b\u0447\u043d\u044b\u0435 utilities.<\/p>\n<\/li>\n<li>\n<p>\u041e\u0431\u044b\u0447\u043d\u044b\u0435 components.<\/p>\n<\/li>\n<li>\n<p>\u041e\u0431\u044b\u0447\u043d\u044b\u0435 defaults (\u043d\u0430\u0438\u043c\u0435\u043d\u0435\u0435 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043d\u044b\u0439).<\/p>\n<\/li>\n<\/ol>\n<p>\u0412 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0446\u0432\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u043e \u0432\u0441\u0435\u0445 \u0442\u0440\u0451\u0445 \u043e\u0431\u044b\u0447\u043d\u044b\u0445 \u0441\u043b\u043e\u044f\u0445; \u0437\u0430 \u0441\u0447\u0451\u0442 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0446\u0432\u0435\u0442\u0430 maroon<\/p>\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-330451","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/330451","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=330451"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/330451\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=330451"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=330451"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=330451"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}