[{"data":1,"prerenderedAt":350},["ShallowReactive",2],{"mW6BCNHnWd":3},[4],{"id":5,"date":6,"date_gmt":7,"guid":8,"modified":10,"modified_gmt":11,"slug":12,"status":13,"type":14,"link":15,"title":16,"content":18,"excerpt":21,"author":23,"featured_media":24,"comment_status":25,"ping_status":25,"sticky":20,"template":26,"format":27,"meta":28,"categories":30,"tags":32,"class_list":33,"acf":41,"yoast_head":42,"yoast_head_json":43,"featured_media_src_url":137,"_links":138,"_embedded":186},1362,"2025-03-09T12:35:38","2025-03-09T09:35:38",{"rendered":9},"https://api.aoskin.ru/?p=1362","2025-07-26T19:04:04","2025-07-26T16:04:04","css-nesting-i-layer-instrumenty-dlya-chistogo-css","publish","post","https://api.aoskin.ru/css-nesting-i-layer-instrumenty-dlya-chistogo-css/",{"rendered":17},"CSS Nesting и @layer: инструменты для чистого CSS",{"rendered":19,"protected":20},"\n\u003Cp class=\"wp-block-paragraph\">\u003Cstrong>\u003Ccode>CSS Nesting\u003C/code>\u003C/strong> позволяет вкладывать селекторы друг в друга, что делает стили более структурированными и читаемыми. А \u003Cstrong>\u003Ccode>@layer\u003C/code>\u003C/strong> помогает управлять каскадом и приоритетами стилей, что особенно полезно в больших проектах.\u003C/p>\n\n\n\n\u003Ch2 class=\"wp-block-heading\"> CSS Nesting\u003C/h2>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">CSS Nesting позволяет вкладывать селекторы друг в друга, что делает код более читаемым и структурированным. Раньше для этого приходилось использовать препроцессоры вроде SASS или LESS, но теперь это стало частью нативного CSS c официальной поддержкой всех современных браузеров.\u003C/p>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">\u003Cstrong>1. Базовый пример\u003C/strong>\u003C/p>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">\u003Cstrong>Раньше мы писали так:\u003C/strong>\u003C/p>\n\n\n\n\u003Cdiv class=\"hcb_wrap\">\u003Cpre class=\"prism line-numbers lang-css\" data-lang=\"CSS\">\u003Ccode>.card {\n  color: blue;\n}\n\n.card h2 {\n  color: black;\n}\u003C/code>\u003C/pre>\u003C/div>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">\u003Cstrong>Теперь с CSS Nesting это выглядит так:\u003C/strong>\u003C/p>\n\n\n\n\u003Cdiv class=\"hcb_wrap\">\u003Cpre class=\"prism line-numbers lang-css\" data-lang=\"CSS\">\u003Ccode>.card {\n  color: blue;\n\n  & h2 {\n    color: black;\n  }\n}\u003C/code>\u003C/pre>\u003C/div>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">Здесь \u003Ccode>&\u003C/code> (амперсанд) ссылается на родительский селектор, что делает код чище и логичнее.\u003C/p>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">\u003Cstrong>2. Вложенность с псевдоклассами\u003C/strong>\u003C/p>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">\u003Cstrong>Раньше мы писали так:\u003C/strong>\u003C/p>\n\n\n\n\u003Cdiv class=\"hcb_wrap\">\u003Cpre class=\"prism line-numbers lang-css\" data-lang=\"CSS\">\u003Ccode>.button {\n  background: blue;\n}\n\n.button:hover {\n  background: darkblue;\n}\u003C/code>\u003C/pre>\u003C/div>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">\u003Cstrong>Теперь с CSS Nesting это выглядит так:\u003C/strong>\u003C/p>\n\n\n\n\u003Cdiv class=\"hcb_wrap\">\u003Cpre class=\"prism line-numbers lang-css\" data-lang=\"CSS\">\u003Ccode>.button {\n  background: blue;\n\n  &:hover {\n    background: darkblue;\n  }\n}\u003C/code>\u003C/pre>\u003C/div>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">Раньше такие стили приходилось писать отдельно, теперь они группируются внутри родительского селектора.\u003C/p>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">\u003Cstrong>3. Комбинирование с медиа-запросами\u003C/strong>\u003C/p>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">\u003Cstrong>Раньше мы писали так:\u003C/strong>\u003C/p>\n\n\n\n\u003Cdiv class=\"hcb_wrap\">\u003Cpre class=\"prism line-numbers lang-css\" data-lang=\"CSS\">\u003Ccode>.container {\n  width: 100%;\n}\n\n@media (min-width: 768px) {\n  .container {\n    width: 50%;\n  }\n}\u003C/code>\u003C/pre>\u003C/div>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">\u003Cstrong>Теперь с CSS Nesting это выглядит так:\u003C/strong>\u003C/p>\n\n\n\n\u003Cdiv class=\"hcb_wrap\">\u003Cpre class=\"prism line-numbers lang-css\" data-lang=\"CSS\">\u003Ccode>.container {\n  width: 100%;\n\n  @media (min-width: 768px) {\n    width: 50%;\n  }\n}\u003C/code>\u003C/pre>\u003C/div>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">Раньше медиа запросы нужно было писать отдельно, теперь их можно вложить внутрь элемента.\u003C/p>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">Почему стоит использовать CSS Nesting:\u003C/p>\n\n\n\n\u003Col start=\"1\" class=\"wp-block-list\">\n\u003Cli>\u003Cstrong>Полная поддержка в браузерах\u003C/strong>: Все современные браузеры теперь поддерживают CSS Nesting без необходимости использования флагов или полифилов.\u003C/li>\n\n\n\n\u003Cli>\u003Cstrong>Улучшенная производительность\u003C/strong>: Браузеры оптимизировали обработку вложенных стилей, что делает их ещё быстрее.\u003C/li>\n\n\n\n\u003Cli>\u003Cstrong>Новые возможности\u003C/strong>: Появились дополнительные синтаксические возможности, например, вложенность с использованием \u003Ccode>@layer\u003C/code> для управления каскадом.\u003C/li>\n\n\n\n\u003Cli>\u003Cstrong>Интеграция с CSS-модулями\u003C/strong>: CSS Nesting теперь лучше работает с CSS-модулями, что упрощает разработку в компонентных фреймворках.\u003C/li>\n\u003C/ol>\n\n\n\n\u003Ch2 class=\"wp-block-heading\">Свойства \u003Ccode>@layer\u003C/code>: порядок стилей под контролем\u003C/h2>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">\u003Ccode>@layer\u003C/code> – CSS-правило, которое позволяет создавать слои стилей и управлять их приоритетом. Слои помогают организовать стили в логические группы и контролировать, какие из них будут иметь больший вес в каскаде. Это особенно полезно в больших проектах, где много стилей из разных источников (например, библиотеки, фреймворки или собственный код). До появления \u003Ccode>\u003Cstrong>@layer\u003C/strong>\u003C/code> для управления порядком стилей приходилось полагаться на порядок подключения файлов или использовать специфичные приёмы вроде \u003Ccode>!important\u003C/code>.\u003C/p>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">\u003Cstrong>Как работает \u003Ccode>@layer\u003C/code>?\u003C/strong>\u003C/p>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">Каждый слой, созданный с помощью \u003Ccode>\u003Cstrong>@layer\u003C/strong>\u003C/code>, имеет свой уровень приоритета. Стили в более поздних слоях переопределяют стили в более ранних, даже если их специфичность ниже. Это позволяет чётко управлять порядком применения стилей без необходимости увеличивать специфичность селекторов.\u003C/p>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">\u003Cstrong>Пример использования:\u003C/strong>\u003C/p>\n\n\n\n\u003Cdiv class=\"hcb_wrap\">\u003Cpre class=\"prism line-numbers lang-css\" data-lang=\"CSS\">\u003Ccode>@layer reset, typography, components;\n\n@layer reset {\n  * {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n  }\n}\n\n@layer typography {\n  body {\n    font-family: Arial, sans-serif;\n    color: #333;\n  }\n}\n\n@layer components {\n  .btn {\n    background-color: #007bff;\n    color: white;\n    padding: 10px 20px;\n    border-radius: 5px;\n  }\n}\n\u003C/code>\u003C/pre>\u003C/div>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">Порядок, в котором объявлены слои, имеет значение. Если один слой определяет одно и то же свойство, то стиль из более позднего слоя будет иметь приоритет.\u003C/p>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">\u003Cstrong>Пример использования со сторонней библиотекой:\u003C/strong>\u003C/p>\n\n\n\n\u003Cdiv class=\"hcb_wrap\">\u003Cpre class=\"prism line-numbers lang-css\" data-lang=\"CSS\">\u003Ccode>@layer reset, vendors, components\n\n@layer reset {\n  * {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n  }\n}\n\n@import url(bootstrap.css) layer(vendors);\n\n@layer components {\n  .btn {\n    background-color: #007bff;\n    color: white;\n    padding: 10px 20px;\n    border-radius: 5px;\n  }\n}\u003C/code>\u003C/pre>\u003C/div>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">С помощью \u003Ccode>@import\u003C/code> можно подключать внешние стили и сразу добавлять их в определённый слой.\u003C/p>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">Почему стоит использовать \u003Ccode>@layer\u003C/code>:\u003C/p>\n\n\n\n\u003Col start=\"1\" class=\"wp-block-list\">\n\u003Cli>\u003Cstrong>Контроль над каскадом\u003C/strong>: Больше не нужно бороться с \u003Ccode>!important\u003C/code> или увеличивать специфичность селекторов.\u003C/li>\n\n\n\n\u003Cli>\u003Cstrong>Организация кода\u003C/strong>: Слои помогают структурировать стили, делая их более читаемыми и поддерживаемыми.\u003C/li>\n\n\n\n\u003Cli>\u003Cstrong>Гибкость\u003C/strong>: Можно легко менять порядок слоёв или добавлять новые без необходимости переписывать существующие стили.\u003C/li>\n\n\n\n\u003Cli>\u003Cstrong>Совместимость с другими фичами\u003C/strong>: \u003Ccode>\u003Cstrong>@layer\u003C/strong>\u003C/code> отлично работает с CSS Nesting, \u003Ccode>@media\u003C/code>, \u003Ccode>@container\u003C/code> и другими современными возможностями CSS.\u003C/li>\n\u003C/ol>\n\n\n\n\u003Ch2 class=\"wp-block-heading\">Заключение\u003C/h2>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">\u003Cstrong>CSS Nesting \u003C/strong>– делает написание стилей более удобным и эффективным. В 2025 году он стал ещё лучше, и теперь его можно использовать без ограничений.\u003C/p>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">\u003Ccode>\u003Cstrong>@layer\u003C/strong>\u003C/code> – управляет каскадом и организации стилей. Он особенно полезен в больших проектах, где важно поддерживать порядок и избегать конфликтов.\u003C/p>\n",false,{"rendered":22,"protected":20},"\u003Cp>В мире веб-разработки CSS постоянно эволюционирует, предлагая новые возможности для создания чистого, поддерживаемого и эффективного кода. Рассмотрим два таких инструмента: CSS Nesting и @layer.\u003C/p>\n",1,1543,"open","","standard",{"_acf_changed":20,"_yoast_wpseo_focuskw":26,"_yoast_wpseo_title":26,"_yoast_wpseo_metadesc":29,"footnotes":26},"%%sep%% Два эволюционных инструмента, которые стали особенно популярны в последние годы - это CSS Nesting и @layer для создания эффективного CSS.",[31],16,[],[34,14,35,36,37,38,39,40],"post-1362","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css",[],"\u003C!-- This site is optimized with the Yoast SEO plugin v27.8 - https://yoast.com/product/yoast-seo-wordpress/ -->\n\u003Ctitle>CSS Nesting и @layer: инструменты для чистого CSS\u003C/title>\n\u003Cmeta name=\"description\" content=\"- Два эволюционных инструмента, которые стали особенно популярны в последние годы - это CSS Nesting и @layer для создания эффективного CSS.\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" />\n\u003Clink rel=\"canonical\" href=\"https://api.aoskin.ru/css-nesting-i-layer-instrumenty-dlya-chistogo-css/\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta property=\"og:locale\" content=\"en_US\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta property=\"og:type\" content=\"article\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta property=\"og:title\" content=\"CSS Nesting и @layer: инструменты для чистого CSS\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta property=\"og:description\" content=\"- Два эволюционных инструмента, которые стали особенно популярны в последние годы - это CSS Nesting и @layer для создания эффективного CSS.\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta property=\"og:url\" content=\"https://api.aoskin.ru/css-nesting-i-layer-instrumenty-dlya-chistogo-css/\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta property=\"og:site_name\" content=\"api.aoskin.ru\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta property=\"article:published_time\" content=\"2025-03-09T09:35:38+00:00\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta property=\"article:modified_time\" content=\"2025-07-26T16:04:04+00:00\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta property=\"og:image\" content=\"https://api.aoskin.ru/wp-content/uploads/2025/03/31-css-nested-layer.webp\" class=\"yoast-seo-meta-tag\" />\n\t\u003Cmeta property=\"og:image:width\" content=\"1456\" class=\"yoast-seo-meta-tag\" />\n\t\u003Cmeta property=\"og:image:height\" content=\"816\" class=\"yoast-seo-meta-tag\" />\n\t\u003Cmeta property=\"og:image:type\" content=\"image/webp\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta name=\"author\" content=\"aoskin\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta name=\"twitter:card\" content=\"summary_large_image\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta name=\"twitter:label1\" content=\"Written by\" class=\"yoast-seo-meta-tag\" />\n\t\u003Cmeta name=\"twitter:data1\" content=\"aoskin\" class=\"yoast-seo-meta-tag\" />\n\t\u003Cmeta name=\"twitter:label2\" content=\"Est. reading time\" class=\"yoast-seo-meta-tag\" />\n\t\u003Cmeta name=\"twitter:data2\" content=\"3 minutes\" class=\"yoast-seo-meta-tag\" />\n\u003Cscript type=\"application/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\/\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\/\\/api.aoskin.ru\\/css-nesting-i-layer-instrumenty-dlya-chistogo-css\\/#article\",\"isPartOf\":{\"@id\":\"https:\\/\\/api.aoskin.ru\\/css-nesting-i-layer-instrumenty-dlya-chistogo-css\\/\"},\"author\":{\"name\":\"aoskin\",\"@id\":\"https:\\/\\/api.aoskin.ru\\/#\\/schema\\/person\\/b5e1c81c85a50ca05e16fcdfa29f4861\"},\"headline\":\"CSS Nesting и @layer: инструменты для чистого CSS\",\"datePublished\":\"2025-03-09T09:35:38+00:00\",\"dateModified\":\"2025-07-26T16:04:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\/\\/api.aoskin.ru\\/css-nesting-i-layer-instrumenty-dlya-chistogo-css\\/\"},\"wordCount\":483,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\/\\/api.aoskin.ru\\/#\\/schema\\/person\\/b5e1c81c85a50ca05e16fcdfa29f4861\"},\"image\":{\"@id\":\"https:\\/\\/api.aoskin.ru\\/css-nesting-i-layer-instrumenty-dlya-chistogo-css\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\/\\/api.aoskin.ru\\/wp-content\\/uploads\\/2025\\/03\\/31-css-nested-layer.webp\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\/\\/api.aoskin.ru\\/css-nesting-i-layer-instrumenty-dlya-chistogo-css\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\/\\/api.aoskin.ru\\/css-nesting-i-layer-instrumenty-dlya-chistogo-css\\/\",\"url\":\"https:\\/\\/api.aoskin.ru\\/css-nesting-i-layer-instrumenty-dlya-chistogo-css\\/\",\"name\":\"CSS Nesting и @layer: инструменты для чистого CSS\",\"isPartOf\":{\"@id\":\"https:\\/\\/api.aoskin.ru\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\/\\/api.aoskin.ru\\/css-nesting-i-layer-instrumenty-dlya-chistogo-css\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\/\\/api.aoskin.ru\\/css-nesting-i-layer-instrumenty-dlya-chistogo-css\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\/\\/api.aoskin.ru\\/wp-content\\/uploads\\/2025\\/03\\/31-css-nested-layer.webp\",\"datePublished\":\"2025-03-09T09:35:38+00:00\",\"dateModified\":\"2025-07-26T16:04:04+00:00\",\"description\":\"- Два эволюционных инструмента, которые стали особенно популярны в последние годы - это CSS Nesting и @layer для создания эффективного CSS.\",\"breadcrumb\":{\"@id\":\"https:\\/\\/api.aoskin.ru\\/css-nesting-i-layer-instrumenty-dlya-chistogo-css\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\/\\/api.aoskin.ru\\/css-nesting-i-layer-instrumenty-dlya-chistogo-css\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\/\\/api.aoskin.ru\\/css-nesting-i-layer-instrumenty-dlya-chistogo-css\\/#primaryimage\",\"url\":\"https:\\/\\/api.aoskin.ru\\/wp-content\\/uploads\\/2025\\/03\\/31-css-nested-layer.webp\",\"contentUrl\":\"https:\\/\\/api.aoskin.ru\\/wp-content\\/uploads\\/2025\\/03\\/31-css-nested-layer.webp\",\"width\":1456,\"height\":816},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\/\\/api.aoskin.ru\\/css-nesting-i-layer-instrumenty-dlya-chistogo-css\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\/\\/api.aoskin.ru\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS Nesting и @layer: инструменты для чистого CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\/\\/api.aoskin.ru\\/#website\",\"url\":\"https:\\/\\/api.aoskin.ru\\/\",\"name\":\"aoskin.ru\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\/\\/api.aoskin.ru\\/#\\/schema\\/person\\/b5e1c81c85a50ca05e16fcdfa29f4861\"},\"alternateName\":\"aoskin.ru\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\/\\/api.aoskin.ru\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\/\\/api.aoskin.ru\\/#\\/schema\\/person\\/b5e1c81c85a50ca05e16fcdfa29f4861\",\"name\":\"aoskin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\/\\/secure.gravatar.com\\/avatar\\/e5e502e32ef7d2bf805592a42dd48d98a3587a37b0e98191f187c9c37e7529fb?s=96&d=mm&r=g\",\"url\":\"https:\\/\\/secure.gravatar.com\\/avatar\\/e5e502e32ef7d2bf805592a42dd48d98a3587a37b0e98191f187c9c37e7529fb?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\/\\/secure.gravatar.com\\/avatar\\/e5e502e32ef7d2bf805592a42dd48d98a3587a37b0e98191f187c9c37e7529fb?s=96&d=mm&r=g\",\"caption\":\"aoskin\"},\"logo\":{\"@id\":\"https:\\/\\/secure.gravatar.com\\/avatar\\/e5e502e32ef7d2bf805592a42dd48d98a3587a37b0e98191f187c9c37e7529fb?s=96&d=mm&r=g\"},\"sameAs\":[\"http:\\/\\/api.aoskin.ru\"],\"url\":\"https:\\/\\/api.aoskin.ru\\/author\\/aoskin\\/\"}]}\u003C/script>\n\u003C!-- / Yoast SEO plugin. -->",{"title":17,"description":44,"robots":45,"canonical":15,"og_locale":51,"og_type":52,"og_title":17,"og_description":44,"og_url":15,"og_site_name":53,"article_published_time":54,"article_modified_time":55,"og_image":56,"author":62,"twitter_card":63,"twitter_misc":64,"schema":66},"- Два эволюционных инструмента, которые стали особенно популярны в последние годы - это CSS Nesting и @layer для создания эффективного CSS.",{"index":46,"follow":47,"max-snippet":48,"max-image-preview":49,"max-video-preview":50},"index","follow","max-snippet:-1","max-image-preview:large","max-video-preview:-1","en_US","article","api.aoskin.ru","2025-03-09T09:35:38+00:00","2025-07-26T16:04:04+00:00",[57],{"width":58,"height":59,"url":60,"type":61},1456,816,"https://api.aoskin.ru/wp-content/uploads/2025/03/31-css-nested-layer.webp","image/webp","aoskin","summary_large_image",{"Written by":62,"Est. reading time":65},"3 minutes",{"@context":67,"@graph":68},"https://schema.org",[69,90,102,104,113,127],{"@type":70,"@id":71,"isPartOf":72,"author":73,"headline":17,"datePublished":54,"dateModified":55,"mainEntityOfPage":75,"wordCount":76,"commentCount":77,"publisher":78,"image":79,"thumbnailUrl":60,"articleSection":81,"inLanguage":83,"potentialAction":84},"Article","https://api.aoskin.ru/css-nesting-i-layer-instrumenty-dlya-chistogo-css/#article",{"@id":15},{"name":62,"@id":74},"https://api.aoskin.ru/#/schema/person/b5e1c81c85a50ca05e16fcdfa29f4861",{"@id":15},483,0,{"@id":74},{"@id":80},"https://api.aoskin.ru/css-nesting-i-layer-instrumenty-dlya-chistogo-css/#primaryimage",[82],"CSS","en-US",[85],{"@type":86,"name":87,"target":88},"CommentAction","Comment",[89],"https://api.aoskin.ru/css-nesting-i-layer-instrumenty-dlya-chistogo-css/#respond",{"@type":91,"@id":15,"url":15,"name":17,"isPartOf":92,"primaryImageOfPage":94,"image":95,"thumbnailUrl":60,"datePublished":54,"dateModified":55,"description":44,"breadcrumb":96,"inLanguage":83,"potentialAction":98},"WebPage",{"@id":93},"https://api.aoskin.ru/#website",{"@id":80},{"@id":80},{"@id":97},"https://api.aoskin.ru/css-nesting-i-layer-instrumenty-dlya-chistogo-css/#breadcrumb",[99],{"@type":100,"target":101},"ReadAction",[15],{"@type":103,"inLanguage":83,"@id":80,"url":60,"contentUrl":60,"width":58,"height":59},"ImageObject",{"@type":105,"@id":97,"itemListElement":106},"BreadcrumbList",[107,111],{"@type":108,"position":23,"name":109,"item":110},"ListItem","Home","https://api.aoskin.ru/",{"@type":108,"position":112,"name":17},2,{"@type":114,"@id":93,"url":110,"name":115,"description":26,"publisher":116,"alternateName":115,"potentialAction":117,"inLanguage":83},"WebSite","aoskin.ru",{"@id":74},[118],{"@type":119,"target":120,"query-input":123},"SearchAction",{"@type":121,"urlTemplate":122},"EntryPoint","https://api.aoskin.ru/?s={search_term_string}",{"@type":124,"valueRequired":125,"valueName":126},"PropertyValueSpecification",true,"search_term_string",{"@type":128,"@id":74,"name":62,"image":131,"logo":133,"sameAs":134,"url":136},[129,130],"Person","Organization",{"@type":103,"inLanguage":83,"@id":132,"url":132,"contentUrl":132,"caption":62},"https://secure.gravatar.com/avatar/e5e502e32ef7d2bf805592a42dd48d98a3587a37b0e98191f187c9c37e7529fb?s=96&d=mm&r=g",{"@id":132},[135],"http://api.aoskin.ru","https://api.aoskin.ru/author/aoskin/","https://api.aoskin.ru/wp-content/uploads/2025/03/31-css-nested-layer-1024x574.webp",{"self":139,"collection":149,"about":152,"author":155,"replies":158,"version-history":161,"predecessor-version":165,"wp:featuredmedia":169,"wp:attachment":172,"wp:term":175,"curies":182},[140],{"href":141,"targetHints":142},"https://api.aoskin.ru/wp-json/wp/v2/posts/1362",{"allow":143},[144,145,146,147,148],"GET","POST","PUT","PATCH","DELETE",[150],{"href":151},"https://api.aoskin.ru/wp-json/wp/v2/posts",[153],{"href":154},"https://api.aoskin.ru/wp-json/wp/v2/types/post",[156],{"embeddable":125,"href":157},"https://api.aoskin.ru/wp-json/wp/v2/users/1",[159],{"embeddable":125,"href":160},"https://api.aoskin.ru/wp-json/wp/v2/comments?post=1362",[162],{"count":163,"href":164},9,"https://api.aoskin.ru/wp-json/wp/v2/posts/1362/revisions",[166],{"id":167,"href":168},1679,"https://api.aoskin.ru/wp-json/wp/v2/posts/1362/revisions/1679",[170],{"embeddable":125,"href":171},"https://api.aoskin.ru/wp-json/wp/v2/media/1543",[173],{"href":174},"https://api.aoskin.ru/wp-json/wp/v2/media?parent=1362",[176,179],{"taxonomy":177,"embeddable":125,"href":178},"category","https://api.aoskin.ru/wp-json/wp/v2/categories?post=1362",{"taxonomy":180,"embeddable":125,"href":181},"post_tag","https://api.aoskin.ru/wp-json/wp/v2/tags?post=1362",[183],{"name":184,"href":185,"templated":125},"wp","https://api.w.org/{rel}",{"author":187,"wp:featuredmedia":236,"wp:term":300},[188],{"id":23,"name":62,"url":135,"description":26,"link":136,"slug":62,"avatar_urls":189,"yoast_head":192,"yoast_head_json":193,"acf":227,"_links":228},{"24":190,"48":191,"96":132},"https://secure.gravatar.com/avatar/e5e502e32ef7d2bf805592a42dd48d98a3587a37b0e98191f187c9c37e7529fb?s=24&d=mm&r=g","https://secure.gravatar.com/avatar/e5e502e32ef7d2bf805592a42dd48d98a3587a37b0e98191f187c9c37e7529fb?s=48&d=mm&r=g","\u003C!-- This site is optimized with the Yoast SEO plugin v27.8 - https://yoast.com/product/yoast-seo-wordpress/ -->\n\u003Ctitle>aoskin, Author at api.aoskin.ru\u003C/title>\n\u003C!-- Admin only notice: this page does not show a meta description because it does not have one, either write it for this page specifically or go into the [Yoast SEO - Settings] menu and set up a template. -->\n\u003Cmeta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" />\n\u003Clink rel=\"canonical\" href=\"https://api.aoskin.ru/author/aoskin/\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta property=\"og:locale\" content=\"en_US\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta property=\"og:type\" content=\"profile\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta property=\"og:title\" content=\"aoskin, Author at api.aoskin.ru\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta property=\"og:url\" content=\"https://api.aoskin.ru/author/aoskin/\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta property=\"og:site_name\" content=\"api.aoskin.ru\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta property=\"og:image\" content=\"https://secure.gravatar.com/avatar/e5e502e32ef7d2bf805592a42dd48d98a3587a37b0e98191f187c9c37e7529fb?s=500&d=mm&r=g\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta name=\"twitter:card\" content=\"summary_large_image\" class=\"yoast-seo-meta-tag\" />\n\u003Cscript type=\"application/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\/\\/schema.org\",\"@graph\":[{\"@type\":\"ProfilePage\",\"@id\":\"https:\\/\\/api.aoskin.ru\\/author\\/aoskin\\/\",\"url\":\"https:\\/\\/api.aoskin.ru\\/author\\/aoskin\\/\",\"name\":\"aoskin, Author at api.aoskin.ru\",\"isPartOf\":{\"@id\":\"https:\\/\\/api.aoskin.ru\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\/\\/api.aoskin.ru\\/author\\/aoskin\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\/\\/api.aoskin.ru\\/author\\/aoskin\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\/\\/api.aoskin.ru\\/author\\/aoskin\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\/\\/api.aoskin.ru\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Archives for aoskin\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\/\\/api.aoskin.ru\\/#website\",\"url\":\"https:\\/\\/api.aoskin.ru\\/\",\"name\":\"aoskin.ru\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\/\\/api.aoskin.ru\\/#\\/schema\\/person\\/b5e1c81c85a50ca05e16fcdfa29f4861\"},\"alternateName\":\"aoskin.ru\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\/\\/api.aoskin.ru\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\/\\/api.aoskin.ru\\/#\\/schema\\/person\\/b5e1c81c85a50ca05e16fcdfa29f4861\",\"name\":\"aoskin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\/\\/secure.gravatar.com\\/avatar\\/e5e502e32ef7d2bf805592a42dd48d98a3587a37b0e98191f187c9c37e7529fb?s=96&d=mm&r=g\",\"url\":\"https:\\/\\/secure.gravatar.com\\/avatar\\/e5e502e32ef7d2bf805592a42dd48d98a3587a37b0e98191f187c9c37e7529fb?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\/\\/secure.gravatar.com\\/avatar\\/e5e502e32ef7d2bf805592a42dd48d98a3587a37b0e98191f187c9c37e7529fb?s=96&d=mm&r=g\",\"caption\":\"aoskin\"},\"logo\":{\"@id\":\"https:\\/\\/secure.gravatar.com\\/avatar\\/e5e502e32ef7d2bf805592a42dd48d98a3587a37b0e98191f187c9c37e7529fb?s=96&d=mm&r=g\"},\"sameAs\":[\"http:\\/\\/api.aoskin.ru\"],\"mainEntityOfPage\":{\"@id\":\"https:\\/\\/api.aoskin.ru\\/author\\/aoskin\\/\"}}]}\u003C/script>\n\u003C!-- / Yoast SEO plugin. -->",{"title":194,"robots":195,"canonical":136,"og_locale":51,"og_type":196,"og_title":194,"og_url":136,"og_site_name":53,"og_image":197,"twitter_card":63,"schema":200},"aoskin, Author at api.aoskin.ru",{"index":46,"follow":47,"max-snippet":48,"max-image-preview":49,"max-video-preview":50},"profile",[198],{"url":199,"type":26,"width":26,"height":26},"https://secure.gravatar.com/avatar/e5e502e32ef7d2bf805592a42dd48d98a3587a37b0e98191f187c9c37e7529fb?s=500&d=mm&r=g",{"@context":67,"@graph":201},[202,210,215,221],{"@type":203,"@id":136,"url":136,"name":194,"isPartOf":204,"breadcrumb":205,"inLanguage":83,"potentialAction":207},"ProfilePage",{"@id":93},{"@id":206},"https://api.aoskin.ru/author/aoskin/#breadcrumb",[208],{"@type":100,"target":209},[136],{"@type":105,"@id":206,"itemListElement":211},[212,213],{"@type":108,"position":23,"name":109,"item":110},{"@type":108,"position":112,"name":214},"Archives for aoskin",{"@type":114,"@id":93,"url":110,"name":115,"description":26,"publisher":216,"alternateName":115,"potentialAction":217,"inLanguage":83},{"@id":74},[218],{"@type":119,"target":219,"query-input":220},{"@type":121,"urlTemplate":122},{"@type":124,"valueRequired":125,"valueName":126},{"@type":222,"@id":74,"name":62,"image":223,"logo":224,"sameAs":225,"mainEntityOfPage":226},[129,130],{"@type":103,"inLanguage":83,"@id":132,"url":132,"contentUrl":132,"caption":62},{"@id":132},[135],{"@id":136},[],{"self":229,"collection":233},[230],{"href":157,"targetHints":231},{"allow":232},[144,145,146,147,148],[234],{"href":235},"https://api.aoskin.ru/wp-json/wp/v2/users",[237],{"id":24,"date":238,"slug":239,"type":240,"link":241,"title":242,"author":23,"featured_media":77,"acf":244,"caption":245,"alt_text":26,"media_type":246,"mime_type":61,"media_details":247,"source_url":60,"_links":278},"2025-05-09T16:08:09","31-css-nested-layer","attachment","https://api.aoskin.ru/en/css-nesting-and-layer-tools-for-clean-css/31-css-nested-layer/",{"rendered":243},"31-css-nested-&-layer",[],{"rendered":26},"image",{"width":58,"height":59,"file":248,"filesize":249,"sizes":250,"image_meta":275},"2025/03/31-css-nested-layer.webp",178214,{"medium":251,"large":257,"thumbnail":262,"medium_large":267,"full":273},{"file":252,"width":253,"height":254,"filesize":255,"mime_type":61,"source_url":256},"31-css-nested-layer-300x168.webp",300,168,16794,"https://api.aoskin.ru/wp-content/uploads/2025/03/31-css-nested-layer-300x168.webp",{"file":258,"width":259,"height":260,"filesize":261,"mime_type":61,"source_url":137},"31-css-nested-layer-1024x574.webp",1024,574,131398,{"file":263,"width":264,"height":264,"filesize":265,"mime_type":61,"source_url":266},"31-css-nested-layer-150x150.webp",150,8722,"https://api.aoskin.ru/wp-content/uploads/2025/03/31-css-nested-layer-150x150.webp",{"file":268,"width":269,"height":270,"filesize":271,"mime_type":61,"source_url":272},"31-css-nested-layer-768x430.webp",768,430,82666,"https://api.aoskin.ru/wp-content/uploads/2025/03/31-css-nested-layer-768x430.webp",{"file":274,"width":58,"height":59,"mime_type":61,"source_url":60},"31-css-nested-layer.webp",{"aperture":276,"credit":26,"camera":26,"caption":26,"created_timestamp":276,"copyright":26,"focal_length":276,"iso":276,"shutter_speed":276,"title":26,"orientation":276,"keywords":277},"0",[],{"self":279,"collection":283,"about":286,"author":289,"replies":291,"wp:attached-to":294,"curies":298},[280],{"href":171,"targetHints":281},{"allow":282},[144,145,146,147,148],[284],{"href":285},"https://api.aoskin.ru/wp-json/wp/v2/media",[287],{"href":288},"https://api.aoskin.ru/wp-json/wp/v2/types/attachment",[290],{"embeddable":125,"href":157},[292],{"embeddable":125,"href":293},"https://api.aoskin.ru/wp-json/wp/v2/comments?post=1543",[295],{"embeddable":125,"post_type":14,"id":296,"href":297},1364,"https://api.aoskin.ru/wp-json/wp/v2/posts/1364",[299],{"name":184,"href":185,"templated":125},[301,349],[302],{"id":31,"link":303,"name":82,"slug":304,"taxonomy":177,"yoast_head":305,"yoast_head_json":306,"acf":331,"_links":332},"https://api.aoskin.ru/category/css/","css","\u003C!-- This site is optimized with the Yoast SEO plugin v27.8 - https://yoast.com/product/yoast-seo-wordpress/ -->\n\u003Ctitle>CSS Archives - api.aoskin.ru\u003C/title>\n\u003C!-- Admin only notice: this page does not show a meta description because it does not have one, either write it for this page specifically or go into the [Yoast SEO - Settings] menu and set up a template. -->\n\u003Cmeta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" />\n\u003Clink rel=\"canonical\" href=\"https://api.aoskin.ru/category/css/\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta property=\"og:locale\" content=\"en_US\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta property=\"og:type\" content=\"article\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta property=\"og:title\" content=\"CSS Archives - api.aoskin.ru\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta property=\"og:url\" content=\"https://api.aoskin.ru/category/css/\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta property=\"og:site_name\" content=\"api.aoskin.ru\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta name=\"twitter:card\" content=\"summary_large_image\" class=\"yoast-seo-meta-tag\" />\n\u003Cscript type=\"application/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\/\\/schema.org\",\"@graph\":[{\"@type\":\"CollectionPage\",\"@id\":\"https:\\/\\/api.aoskin.ru\\/category\\/css\\/\",\"url\":\"https:\\/\\/api.aoskin.ru\\/category\\/css\\/\",\"name\":\"CSS Archives - api.aoskin.ru\",\"isPartOf\":{\"@id\":\"https:\\/\\/api.aoskin.ru\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\/\\/api.aoskin.ru\\/category\\/css\\/#breadcrumb\"},\"inLanguage\":\"en-US\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\/\\/api.aoskin.ru\\/category\\/css\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\/\\/api.aoskin.ru\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\/\\/api.aoskin.ru\\/#website\",\"url\":\"https:\\/\\/api.aoskin.ru\\/\",\"name\":\"aoskin.ru\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\/\\/api.aoskin.ru\\/#\\/schema\\/person\\/b5e1c81c85a50ca05e16fcdfa29f4861\"},\"alternateName\":\"aoskin.ru\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\/\\/api.aoskin.ru\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\/\\/api.aoskin.ru\\/#\\/schema\\/person\\/b5e1c81c85a50ca05e16fcdfa29f4861\",\"name\":\"aoskin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\/\\/api.aoskin.ru\\/wp-content\\/uploads\\/2025\\/03\\/31-css-nested-layer.webp\",\"url\":\"https:\\/\\/api.aoskin.ru\\/wp-content\\/uploads\\/2025\\/03\\/31-css-nested-layer.webp\",\"contentUrl\":\"https:\\/\\/api.aoskin.ru\\/wp-content\\/uploads\\/2025\\/03\\/31-css-nested-layer.webp\",\"width\":1456,\"height\":816,\"caption\":\"aoskin\"},\"logo\":{\"@id\":\"https:\\/\\/api.aoskin.ru\\/wp-content\\/uploads\\/2025\\/03\\/31-css-nested-layer.webp\"},\"sameAs\":[\"http:\\/\\/api.aoskin.ru\"]}]}\u003C/script>\n\u003C!-- / Yoast SEO plugin. -->",{"title":307,"robots":308,"canonical":303,"og_locale":51,"og_type":52,"og_title":307,"og_url":303,"og_site_name":53,"twitter_card":63,"schema":309},"CSS Archives - api.aoskin.ru",{"index":46,"follow":47,"max-snippet":48,"max-image-preview":49,"max-video-preview":50},{"@context":67,"@graph":310},[311,316,320,326],{"@type":312,"@id":303,"url":303,"name":307,"isPartOf":313,"breadcrumb":314,"inLanguage":83},"CollectionPage",{"@id":93},{"@id":315},"https://api.aoskin.ru/category/css/#breadcrumb",{"@type":105,"@id":315,"itemListElement":317},[318,319],{"@type":108,"position":23,"name":109,"item":110},{"@type":108,"position":112,"name":82},{"@type":114,"@id":93,"url":110,"name":115,"description":26,"publisher":321,"alternateName":115,"potentialAction":322,"inLanguage":83},{"@id":74},[323],{"@type":119,"target":324,"query-input":325},{"@type":121,"urlTemplate":122},{"@type":124,"valueRequired":125,"valueName":126},{"@type":327,"@id":74,"name":62,"image":328,"logo":329,"sameAs":330},[129,130],{"@type":103,"inLanguage":83,"@id":60,"url":60,"contentUrl":60,"width":58,"height":59,"caption":62},{"@id":60},[135],[],{"self":333,"collection":338,"about":341,"wp:post_type":344,"curies":347},[334],{"href":335,"targetHints":336},"https://api.aoskin.ru/wp-json/wp/v2/categories/16",{"allow":337},[144,145,146,147,148],[339],{"href":340},"https://api.aoskin.ru/wp-json/wp/v2/categories",[342],{"href":343},"https://api.aoskin.ru/wp-json/wp/v2/taxonomies/category",[345],{"href":346},"https://api.aoskin.ru/wp-json/wp/v2/posts?categories=16",[348],{"name":184,"href":185,"templated":125},[],1782055332020]