{"id":11321,"date":"2025-02-26T09:00:00","date_gmt":"2025-02-26T08:00:00","guid":{"rendered":"https:\/\/wata.es\/?p=11321"},"modified":"2025-03-03T11:25:19","modified_gmt":"2025-03-03T10:25:19","slug":"bem-in-angular-enhancing-css-maintainability-and-scalability","status":"publish","type":"post","link":"https:\/\/wata.es\/bem-in-angular-enhancing-css-maintainability-and-scalability\/","title":{"rendered":"BEM in Angular: Enhancing CSS Maintainability and Scalability"},"content":{"rendered":"\n<p>When we work with Angular, the organisation of the CSS code is crucial to ensure a scalable and easily maintainable project. One of the most commonly used methods for structuring styles is <strong>BEM<\/strong> (Block, Element, Modifier).<\/p>\n\n\n\n<p>In this article, we explain what BEM is and how to use it in Angular with simple examples. We will also discuss its benefits and best practices.<\/p>\n\n\n\n<!--more-->\n\n\n\n<h2 class=\"wp-block-heading\"><strong>What is BEM?<\/strong><\/h2>\n\n\n\n<p>BEM is an approach to naming CSS classes that aims to improve the structure, clarity and maintainability of code.<\/p>\n\n\n\n<p>The naming convention for blocks, elements and modifiers is as follows:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Block<\/strong>: a stand-alone component element that groups multiple parts.<\/li>\n\n\n\n<li><strong>Element<\/strong>: Components of a block that compose it.<\/li>\n\n\n\n<li><strong>Modifier<\/strong>: Changes the appearance or behaviour of a block or element<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>.block { }\n.block__element { }\n.block--modifier { }\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Why use the BEM methodology in Angular?<\/strong><\/h2>\n\n\n\n<p>Angular is based on components, so the use of BEM is ideal. It is also favoured by the fact that each component has its own CSS or SCSS file. Let&#8217;s look at a practical example.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Example of BEM in an Angular component<\/strong><\/h3>\n\n\n\n<p>Let&#8217;s assume we have a card component. This includes two files: the HTML structure and the CSS or SCSS style.<\/p>\n\n\n\n<p><strong>HTML structure (card.component.html)<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"card\"&gt;\n  &lt;h2 class=\"card__title\"&gt;T\u00edtulo del Producto&lt;\/h2&gt;\n  &lt;p class=\"card__description\"&gt;Descripci\u00f3n breve del producto.&lt;\/p&gt;\n  &lt;button class=\"card__button card__button--primary\"&gt;Comprar&lt;\/button&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n\n\n\n<p><strong>Format templates with BEM (card.component.scss)<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.card {\n  background-color: #f5f5f5;\n  padding: 20px;\n  border-radius: 8px;\n\n  &amp;__title {\n    font-size: 1.5rem;\n    color: #333;\n  }\n\n  &amp;__description {\n    font-size: 1rem;\n    color: #666;\n  }\n\n  &amp;__button {\n    padding: 10px 20px;\n    border: none;\n    cursor: pointer;\n\n    &amp;--primary {\n      background-color: #007bff;\n      color: #fff;\n    }\n  }\n}<\/code><\/pre>\n\n\n\n<p>In this example, we can see that the main block contains the card class, to which the subordinate elements card__title, card__description and card__button belong. This maintains a hierarchical structure in both HTML and CSS.<br>The &amp;__ selector is used to mark the elements of a block, while the &amp;&#8211; selector is used for modifiers. In our case, card__button has the modifier primary, which is specified according to the following syntax:<br>card__button card__button&#8211;primary.<br>In this way, we can apply the required modifiers. In addition, thanks to Angular&#8217;s component-based potential, we can dynamically evaluate any modifier that is passed. For example, in the following case, we can insert the modifier with ngClass, depending on the variable primary if it has the value true.<br><strong>HTML structure with conditional modifier (card.component.html)<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"card\"&gt;\n  &lt;h2 class=\"card__title\"&gt;T\u00edtulo del Producto&lt;\/h2&gt;\n  &lt;p class=\"card__description\"&gt;Descripci\u00f3n breve del producto.&lt;\/p&gt;\n  &lt;button \n    class=\"card__button\n    &#91;ngClass]=\"primary ? 'card__button--primary' : ''\"\n  &gt;Comprar&lt;\/button&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Advantages of using BEM in Angular<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>1. Modularity and Reusability<\/strong><\/h3>\n\n\n\n<p>Each component in Angular is encapsulated so that styles can be defined without affecting other elements of the application. With BEM, this modularity is reinforced so that blocks can be reused in a flexible way.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>2. Scalability<\/strong><\/h3>\n\n\n\n<p>Large projects can grow without complications as BEM makes it easy to add new styles and components without unexpected disruptions.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>3. Maintainability<\/strong><\/h3>\n\n\n\n<p>BEM&#8217;s clear structure makes the code easy to read and understand, which helps developers maintain the project over time without the need for major refactoring.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Best practices when using BEM in Angular<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>1. Avoid deeply nested selectors<\/strong><\/h3>\n\n\n\n<p>In Angular, it is common for selectors to be encapsulated. However, excessive use of deeply nested selectors can make the code less maintainable. It is recommended to keep the BEM structure clean, without unnecessary nesting.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>2. Consistency in naming<\/strong><\/h3>\n\n\n\n<p>Using a standardised format for all components ensures better collaboration within the team. Defining internal guidelines helps to maintain coherence in the project.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>3. Use of variables and mixins in SCSS<\/strong><\/h3>\n\n\n\n<p>SCSS allows the definition of variables and mixins to improve the reusability of the code. It is advisable to combine this with the BEM methodology to achieve more efficient code<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$primary-color: #007bff;\n\n.card {\n  background-color: #f5f5f5;\n  padding: 20px;\n  border-radius: 8px;\n\n  &amp;__title {\n    font-size: 1.5rem;\n    color: #333;\n  }\n\n  &amp;__button {\n    @mixin button-style($bg-color) {\n      padding: 10px 20px;\n      border: none;\n      cursor: pointer;\n      background-color: $bg-color;\n      color: #fff;\n    }\n\n    &amp;--primary {\n      @include button-style($primary-color);\n    }\n  }\n}\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Conclusion<\/strong><\/h2>\n\n\n\n<p>By using BEM in Angular, we get cleaner, better organised and maintainable code. Thanks to its clear structure, this methodology improves scalability and team collaboration.<\/p>\n\n\n\n<p>Wata Factory is at the forefront of the latest technologies and considers BEM to be a very powerful and useful methodology to use in our Angular projects.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>When we work with Angular, the organisation of the CSS code is crucial to ensure a scalable and easily maintainable project. One of the most commonly used methods for structuring styles is BEM (Block, Element, Modifier). In this article, we explain what BEM is and how to use it in Angular with simple examples. We [&hellip;]<\/p>\n","protected":false},"author":42,"featured_media":11333,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[2,180],"tags":[61,348],"class_list":["post-11321","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-news","category-technology","tag-angular","tag-bem"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.1.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>BEM in Angular: Enhancing CSS Maintainability and Scalability - WATA Factory<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/wata.es\/bem-in-angular-enhancing-css-maintainability-and-scalability\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"BEM in Angular: Enhancing CSS Maintainability and Scalability - WATA Factory\" \/>\n<meta property=\"og:description\" content=\"When we work with Angular, the organisation of the CSS code is crucial to ensure a scalable and easily maintainable project. One of the most commonly used methods for structuring styles is BEM (Block, Element, Modifier). In this article, we explain what BEM is and how to use it in Angular with simple examples. We [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wata.es\/bem-in-angular-enhancing-css-maintainability-and-scalability\/\" \/>\n<meta property=\"og:site_name\" content=\"WATA Factory\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/watafactory\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-02-26T08:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-03-03T10:25:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wata.es\/wp-content\/uploads\/2025\/02\/bem-in-angular-1-scaled.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1440\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Juan Castillo Diaz\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@watafactory\" \/>\n<meta name=\"twitter:site\" content=\"@watafactory\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Juan Castillo Diaz\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/wata.es\/bem-in-angular-enhancing-css-maintainability-and-scalability\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/wata.es\/bem-in-angular-enhancing-css-maintainability-and-scalability\/\"},\"author\":{\"name\":\"Juan Castillo Diaz\",\"@id\":\"https:\/\/wata.es\/#\/schema\/person\/4cfe3a1b4c16256c515d39315fc03450\"},\"headline\":\"BEM in Angular: Enhancing CSS Maintainability and Scalability\",\"datePublished\":\"2025-02-26T08:00:00+00:00\",\"dateModified\":\"2025-03-03T10:25:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/wata.es\/bem-in-angular-enhancing-css-maintainability-and-scalability\/\"},\"wordCount\":606,\"publisher\":{\"@id\":\"https:\/\/wata.es\/#organization\"},\"image\":{\"@id\":\"https:\/\/wata.es\/bem-in-angular-enhancing-css-maintainability-and-scalability\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/wata.es\/wp-content\/uploads\/2025\/02\/bem-in-angular-1-scaled.jpg\",\"keywords\":[\"Angular\",\"BEM\"],\"articleSection\":[\"News\",\"Technology\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wata.es\/bem-in-angular-enhancing-css-maintainability-and-scalability\/\",\"url\":\"https:\/\/wata.es\/bem-in-angular-enhancing-css-maintainability-and-scalability\/\",\"name\":\"BEM in Angular: Enhancing CSS Maintainability and Scalability - WATA Factory\",\"isPartOf\":{\"@id\":\"https:\/\/wata.es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/wata.es\/bem-in-angular-enhancing-css-maintainability-and-scalability\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/wata.es\/bem-in-angular-enhancing-css-maintainability-and-scalability\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/wata.es\/wp-content\/uploads\/2025\/02\/bem-in-angular-1-scaled.jpg\",\"datePublished\":\"2025-02-26T08:00:00+00:00\",\"dateModified\":\"2025-03-03T10:25:19+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/wata.es\/bem-in-angular-enhancing-css-maintainability-and-scalability\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wata.es\/bem-in-angular-enhancing-css-maintainability-and-scalability\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wata.es\/bem-in-angular-enhancing-css-maintainability-and-scalability\/#primaryimage\",\"url\":\"https:\/\/wata.es\/wp-content\/uploads\/2025\/02\/bem-in-angular-1-scaled.jpg\",\"contentUrl\":\"https:\/\/wata.es\/wp-content\/uploads\/2025\/02\/bem-in-angular-1-scaled.jpg\",\"width\":2560,\"height\":1440},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wata.es\/bem-in-angular-enhancing-css-maintainability-and-scalability\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wata.es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"BEM in Angular: Enhancing CSS Maintainability and Scalability\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wata.es\/#website\",\"url\":\"https:\/\/wata.es\/\",\"name\":\"WATA Factory\",\"description\":\"IT Consulting &amp; Outsourcing for your company\",\"publisher\":{\"@id\":\"https:\/\/wata.es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wata.es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/wata.es\/#organization\",\"name\":\"WATA Factory\",\"url\":\"https:\/\/wata.es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wata.es\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/wata.es\/wp-content\/uploads\/2019\/12\/logowata.png\",\"contentUrl\":\"https:\/\/wata.es\/wp-content\/uploads\/2019\/12\/logowata.png\",\"width\":688,\"height\":176,\"caption\":\"WATA Factory\"},\"image\":{\"@id\":\"https:\/\/wata.es\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/watafactory\/\",\"https:\/\/x.com\/watafactory\",\"https:\/\/www.linkedin.com\/company\/wata\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/wata.es\/#\/schema\/person\/4cfe3a1b4c16256c515d39315fc03450\",\"name\":\"Juan Castillo Diaz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wata.es\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/415b2a6e314eac164ae150aac8c09d7d2cdc54f7c0b1c28b8e0360140cc449bc?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/415b2a6e314eac164ae150aac8c09d7d2cdc54f7c0b1c28b8e0360140cc449bc?s=96&d=mm&r=g\",\"caption\":\"Juan Castillo Diaz\"},\"url\":\"https:\/\/wata.es\/author\/juancastillo\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"BEM in Angular: Enhancing CSS Maintainability and Scalability - WATA Factory","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/wata.es\/bem-in-angular-enhancing-css-maintainability-and-scalability\/","og_locale":"en_US","og_type":"article","og_title":"BEM in Angular: Enhancing CSS Maintainability and Scalability - WATA Factory","og_description":"When we work with Angular, the organisation of the CSS code is crucial to ensure a scalable and easily maintainable project. One of the most commonly used methods for structuring styles is BEM (Block, Element, Modifier). In this article, we explain what BEM is and how to use it in Angular with simple examples. We [&hellip;]","og_url":"https:\/\/wata.es\/bem-in-angular-enhancing-css-maintainability-and-scalability\/","og_site_name":"WATA Factory","article_publisher":"https:\/\/www.facebook.com\/watafactory\/","article_published_time":"2025-02-26T08:00:00+00:00","article_modified_time":"2025-03-03T10:25:19+00:00","og_image":[{"width":2560,"height":1440,"url":"https:\/\/wata.es\/wp-content\/uploads\/2025\/02\/bem-in-angular-1-scaled.jpg","type":"image\/jpeg"}],"author":"Juan Castillo Diaz","twitter_card":"summary_large_image","twitter_creator":"@watafactory","twitter_site":"@watafactory","twitter_misc":{"Written by":"Juan Castillo Diaz","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/wata.es\/bem-in-angular-enhancing-css-maintainability-and-scalability\/#article","isPartOf":{"@id":"https:\/\/wata.es\/bem-in-angular-enhancing-css-maintainability-and-scalability\/"},"author":{"name":"Juan Castillo Diaz","@id":"https:\/\/wata.es\/#\/schema\/person\/4cfe3a1b4c16256c515d39315fc03450"},"headline":"BEM in Angular: Enhancing CSS Maintainability and Scalability","datePublished":"2025-02-26T08:00:00+00:00","dateModified":"2025-03-03T10:25:19+00:00","mainEntityOfPage":{"@id":"https:\/\/wata.es\/bem-in-angular-enhancing-css-maintainability-and-scalability\/"},"wordCount":606,"publisher":{"@id":"https:\/\/wata.es\/#organization"},"image":{"@id":"https:\/\/wata.es\/bem-in-angular-enhancing-css-maintainability-and-scalability\/#primaryimage"},"thumbnailUrl":"https:\/\/wata.es\/wp-content\/uploads\/2025\/02\/bem-in-angular-1-scaled.jpg","keywords":["Angular","BEM"],"articleSection":["News","Technology"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/wata.es\/bem-in-angular-enhancing-css-maintainability-and-scalability\/","url":"https:\/\/wata.es\/bem-in-angular-enhancing-css-maintainability-and-scalability\/","name":"BEM in Angular: Enhancing CSS Maintainability and Scalability - WATA Factory","isPartOf":{"@id":"https:\/\/wata.es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/wata.es\/bem-in-angular-enhancing-css-maintainability-and-scalability\/#primaryimage"},"image":{"@id":"https:\/\/wata.es\/bem-in-angular-enhancing-css-maintainability-and-scalability\/#primaryimage"},"thumbnailUrl":"https:\/\/wata.es\/wp-content\/uploads\/2025\/02\/bem-in-angular-1-scaled.jpg","datePublished":"2025-02-26T08:00:00+00:00","dateModified":"2025-03-03T10:25:19+00:00","breadcrumb":{"@id":"https:\/\/wata.es\/bem-in-angular-enhancing-css-maintainability-and-scalability\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wata.es\/bem-in-angular-enhancing-css-maintainability-and-scalability\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wata.es\/bem-in-angular-enhancing-css-maintainability-and-scalability\/#primaryimage","url":"https:\/\/wata.es\/wp-content\/uploads\/2025\/02\/bem-in-angular-1-scaled.jpg","contentUrl":"https:\/\/wata.es\/wp-content\/uploads\/2025\/02\/bem-in-angular-1-scaled.jpg","width":2560,"height":1440},{"@type":"BreadcrumbList","@id":"https:\/\/wata.es\/bem-in-angular-enhancing-css-maintainability-and-scalability\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wata.es\/"},{"@type":"ListItem","position":2,"name":"BEM in Angular: Enhancing CSS Maintainability and Scalability"}]},{"@type":"WebSite","@id":"https:\/\/wata.es\/#website","url":"https:\/\/wata.es\/","name":"WATA Factory","description":"IT Consulting &amp; Outsourcing for your company","publisher":{"@id":"https:\/\/wata.es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wata.es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/wata.es\/#organization","name":"WATA Factory","url":"https:\/\/wata.es\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wata.es\/#\/schema\/logo\/image\/","url":"https:\/\/wata.es\/wp-content\/uploads\/2019\/12\/logowata.png","contentUrl":"https:\/\/wata.es\/wp-content\/uploads\/2019\/12\/logowata.png","width":688,"height":176,"caption":"WATA Factory"},"image":{"@id":"https:\/\/wata.es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/watafactory\/","https:\/\/x.com\/watafactory","https:\/\/www.linkedin.com\/company\/wata\/"]},{"@type":"Person","@id":"https:\/\/wata.es\/#\/schema\/person\/4cfe3a1b4c16256c515d39315fc03450","name":"Juan Castillo Diaz","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wata.es\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/415b2a6e314eac164ae150aac8c09d7d2cdc54f7c0b1c28b8e0360140cc449bc?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/415b2a6e314eac164ae150aac8c09d7d2cdc54f7c0b1c28b8e0360140cc449bc?s=96&d=mm&r=g","caption":"Juan Castillo Diaz"},"url":"https:\/\/wata.es\/author\/juancastillo\/"}]}},"_links":{"self":[{"href":"https:\/\/wata.es\/wp-json\/wp\/v2\/posts\/11321","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wata.es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wata.es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wata.es\/wp-json\/wp\/v2\/users\/42"}],"replies":[{"embeddable":true,"href":"https:\/\/wata.es\/wp-json\/wp\/v2\/comments?post=11321"}],"version-history":[{"count":5,"href":"https:\/\/wata.es\/wp-json\/wp\/v2\/posts\/11321\/revisions"}],"predecessor-version":[{"id":11366,"href":"https:\/\/wata.es\/wp-json\/wp\/v2\/posts\/11321\/revisions\/11366"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wata.es\/wp-json\/wp\/v2\/media\/11333"}],"wp:attachment":[{"href":"https:\/\/wata.es\/wp-json\/wp\/v2\/media?parent=11321"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wata.es\/wp-json\/wp\/v2\/categories?post=11321"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wata.es\/wp-json\/wp\/v2\/tags?post=11321"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}