{"id":1209,"date":"2020-03-10T08:00:17","date_gmt":"2020-03-10T07:00:17","guid":{"rendered":"http:\/\/www.webposible.com\/blog\/?p=1209"},"modified":"2023-01-27T08:48:53","modified_gmt":"2023-01-27T07:48:53","slug":"metodologia-bem-block-element-modifier-de-css","status":"publish","type":"post","link":"http:\/\/www.webposible.com\/blog\/2020\/metodologia-bem-block-element-modifier-de-css\/","title":{"rendered":"Metodolog\u00eda BEM: Block, Element, Modifier de CSS"},"content":{"rendered":"<p>La <a href=\"https:\/\/en.bem.info\/methodology\/quick-start\/\" hreflang=\"en\">metodolog\u00eda <abbr lang=\"en\" title=\"Block, Element, Modifier\">BEM<\/abbr><\/a> fue desarrollada por el equipo que trabaja en <a href=\"https:\/\/yandex.com\/\">yandex<\/a> (una empresa de tecnolog\u00eda de origen ruso).<\/p>\n<p>El objetivo principal de la metodolog\u00eda es mejorar la organizaci\u00f3n de <abbr lang=\"en\" title=\"Cascading Style Sheet\">CSS<\/abbr> utilizando una nomenclatura para los nombres de clases compuesto por:<br \/>\n* El nombre del bloque <abbr lang=\"en\" title=\"Hyper Text Markup Language\">HTML<\/abbr><br \/>\n* El elemento dentro de ese bloque<br \/>\n* Un modificador, que define la apariencia, estado o comportamiento.<\/p>\n<p>Veamos un ejemplo (adaptado de la documentaci\u00f3n oficial):<\/p>\n<pre><code>&lt;!-- bloque `search-form` --&gt;\r\n&lt;form class=\"<strong>search-form<\/strong>\"&gt;\r\n    &lt;!-- elemento `input` element del bloque `search-form` --&gt;\r\n    &lt;input class=\"<strong>search-form__input<\/strong>\"&gt;\r\n\r\n    &lt;!-- elemento `button` del bloque `search-form` --&gt;\r\n    &lt;button class=\"<strong>search-form__button<\/strong>\"&gt;Buscar&lt;\/button&gt;\r\n&lt;\/form&gt;<\/code><\/pre>\n<p>Ventajas:<\/p>\n<ul>\n<li>Ofrece un sistema para organizar y nombrar clases.<\/li>\n<li>Permite trabajar de forma coordinada y as\u00edncrona a los miembros de un equipo.<\/li>\n<li>Permite conocer de un vistazo la estructura, tanto del documento <abbr lang=\"en\" title=\"Hyper Text Markup Language\">HTML<\/abbr>, como de las clases <abbr lang=\"en\" title=\"Cascading Style Sheet\">CSS<\/abbr>.<\/li>\n<li>Permite evolucionar y modificar elementos con facilidad (creando clases de modificadores)<\/li>\n<\/ul>\n<p>Inconvenientes:<\/p>\n<ul>\n<li>Hay que ajustarse a las normas y reglas de la metodolog\u00eda.<\/li>\n<li>La cantidad de clases utilizadas puede ser m\u00e1s elevada que otras alternativas.<\/li>\n<li>La teor\u00eda de que cambiando una clase se cambia el aspecto de una web, no aplica aqu\u00ed: para ser coherente hay que crear clases que modifique el aspecto de los elementos, y a\u00f1adirlos al c\u00f3digo <abbr lang=\"en\" title=\"Hyper Text Markup Language\">HTML<\/abbr>.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>La metodolog\u00eda BEM fue desarrollada por el equipo que trabaja en yandex (una empresa de tecnolog\u00eda de origen ruso). El objetivo principal de la metodolog\u00eda es mejorar la organizaci\u00f3n de CSS utilizando una nomenclatura para los nombres de clases compuesto por: * El nombre del bloque HTML * El elemento dentro de ese bloque * [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-1209","post","type-post","status-publish","format-standard","hentry","category-css"],"_links":{"self":[{"href":"http:\/\/www.webposible.com\/blog\/wp-json\/wp\/v2\/posts\/1209","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.webposible.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.webposible.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.webposible.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.webposible.com\/blog\/wp-json\/wp\/v2\/comments?post=1209"}],"version-history":[{"count":4,"href":"http:\/\/www.webposible.com\/blog\/wp-json\/wp\/v2\/posts\/1209\/revisions"}],"predecessor-version":[{"id":1442,"href":"http:\/\/www.webposible.com\/blog\/wp-json\/wp\/v2\/posts\/1209\/revisions\/1442"}],"wp:attachment":[{"href":"http:\/\/www.webposible.com\/blog\/wp-json\/wp\/v2\/media?parent=1209"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.webposible.com\/blog\/wp-json\/wp\/v2\/categories?post=1209"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.webposible.com\/blog\/wp-json\/wp\/v2\/tags?post=1209"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}