{"id":5654,"date":"2016-07-30T12:26:00","date_gmt":"2016-07-30T11:26:00","guid":{"rendered":"http:\/\/www.espai.es\/blog\/?p=5654"},"modified":"2021-09-14T17:50:03","modified_gmt":"2021-09-14T15:50:03","slug":"metodologias-css-oocss-bem-smacss","status":"publish","type":"post","link":"https:\/\/www.espai.es\/blog\/2016\/07\/metodologias-css-oocss-bem-smacss\/","title":{"rendered":"Metodolog\u00edas css: OOCSS, BEM y SMACSS"},"content":{"rendered":"<p>Hola a todos y bienvenidos a un nuevo <em>post <\/em>del \u00e1rea web de la <a href=\"http:\/\/www.espai.es\" target=\"_blank\" rel=\"noopener\">Escola Espai<\/a>. En este art\u00edculo conoceremos las metodolog\u00edas CSS \u00a0m\u00e1s extendidas y veremos como nos pueden ser \u00fatiles para optimizar nuestro c\u00f3digo CSS.<\/p>\n<p>Antes de empezar aclarar que cuando hablamos de metodolog\u00eda nos referimos a un sistema de m\u00e9todos. Donde un m\u00e9todo es simplemente una forma de hacer algo de una manera sistem\u00e1tica, un cierto modo preestablecido de hacer las cosas para lograr el resultado que queremos.<\/p>\n<p>Para obtener mejores resultados, mejoramos nuestros m\u00e9todos plante\u00e1ndolos mejor y simplific\u00e1ndolos para <strong>obtener unos resultados m\u00e1s r\u00e1pidos e eficientes<\/strong>.<\/p>\n<h2>INTRODUCCI\u00d3N<\/h2>\n<p>Por todos es conocido que CSS es un caos&#8230; Dif\u00edcil de manejar en sistemas grandes y complejos. A medida que la hoja de estilo crece nos damos cuenta que no paramos de repetir reglas para diferentes elementos y cualquier cambio puede afectar alg\u00fan elemento no deseado.<\/p>\n<p>Los preprocesadores CSS como <em>Sass <\/em>o <em>Less <\/em>pueden facilitarnos el trabajo de escritura de nuestras hojas de estilo pero no solucionan el problema de escalabilidad permanente que tenemos en CSS.<\/p>\n<p>Precisamente para esto est\u00e1n las<strong> metodolog\u00edas CSS<\/strong>.<\/p>\n<blockquote>\n<h3 style=\"text-align: center;\"><em>Las metodolog\u00edas CSS nos ayudaran a escribir c\u00f3digo CSS m\u00e1s flexible, reutilizable, comprensible y manejable.<\/em><\/h3>\n<\/blockquote>\n<p>Vamos a comentar las 3 metodolog\u00edas CSS m\u00e1s extendidas: <strong>OOCSS<\/strong>, <strong>BEM<\/strong> y <strong>SMACSS<\/strong><\/p>\n<h2>Object-Oriented CSS (OOCSS)<\/h2>\n<p>Fue desarrollada por <a href=\"http:\/\/www.stubbornella.org\/content\/\" target=\"_blank\" rel=\"noopener\">Nicole Sullivan<\/a> en 2008 y se basa en dos principios b\u00e1sicos:<\/p>\n<ul>\n<li><strong>Separar la estructura del dise\u00f1o<\/strong> (en ingl\u00e9s lo describen como skin, piel).<\/li>\n<li><strong>Separar contenedor del contenido<\/strong>.<\/li>\n<\/ul>\n<p>Igual que cualquier lenguaje de programaci\u00f3n orientado a objetos la finalidad es la <strong>re-utilizaci\u00f3n, incrementar la velocidad y eficiencia de nuestras hojas de estilo<\/strong> haci\u00e9ndolas m\u00e1s f\u00e1ciles de mantener.<\/p>\n<h3>Separar la estructura del dise\u00f1o<\/h3>\n<p>Casi todos los elementos en una p\u00e1gina web tienen diferentes caracter\u00edsticas visuales (es decir, \u00abpieles\u00bb) que se repiten en diferentes contextos. Por otro lado, otras caracter\u00edsticas generalmente invisibles (\u00abestructura\u00bb) se repiten del mismo modo.<\/p>\n<p>Cuando estas caracter\u00edsticas diferentes se abstraen en m\u00f3dulos basados en clases, se convierten en reutilizables y se pueden aplicar a cualquier.<\/p>\n<p>Lo mejor es verlo con un ejemplo:<\/p>\n<p><strong>C\u00f3digo css sin aplicar los principios OOCSS:<\/strong><\/p>\n<pre>\r\n#button {\r\n  width: 200px;\r\n  height: 50px;\r\n  padding: 10px;\r\n  border: solid 1px #ccc;\r\n  background: linear-gradient(#ccc, #aaa);\r\n  box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;\r\n}\r\n#widget {\r\n  width: 500px;\r\n  min-height: 200px;\r\n  overflow: auto;\r\n  border: solid 1px #ccc;\r\n  background: linear-gradient(#ccc, #222);\r\n  box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;\r\n}\r\n<\/pre>\n<p><strong>C\u00f3digo css aplicando los principios OOCSS: <\/strong><\/p>\n<pre>\r\n.button {\r\n  width: 200px;\r\n  height: 50px;\r\n  padding: 10px;\r\n}\r\n.widget {\r\n  width: 500px;\r\n  min-height: 200px;\r\n  overflow: auto;\r\n}\r\n.skin {\r\n  border: solid 1px #ccc;\r\n  background: linear-gradient(#ccc, #aaa);\r\n  box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;\r\n}\r\n<\/pre>\n<p>Ahora todos los elementos usan clases, los estilos comunes se combinan en una \u00abpiel\u00bb re-utilizable y nada se repite innecesariamente. S\u00f3lo tenemos que aplicar la clase de <code>.skin<\/code> a todos los elementos y el resultado ser\u00e1 el mismo que en el primer c\u00f3digo, excepto con menos c\u00f3digo y una posibilidad para su posterior re-utilizaci\u00f3n.<\/p>\n<h3>Separar contenedor del contenido<\/h3>\n<p>Para ilustrar el segundo principio veamos un ejemplo. Es muy com\u00fan que tengamos un c\u00f3digo CSS parecido a este:<\/p>\n<pre>\r\nheader h1 {\r\n  font-family: 'Roboto', Helvetica, sans-serif;\r\n  font-size: 2em;\r\n  color: #F44;\r\n}\r\n\/*mas c\u00f3digo css...*\/\r\nfooter h1 {\r\n  font-family: 'Roboto', Helvetica, sans-serif;\r\n  font-size: 1.5em;\r\n  color: #F44;\r\n  opacity: 0.5;\r\n  filter: alpha(opacity = 50);\r\n}\r\n<\/pre>\n<p>Estamos repitiendo c\u00f3digo otra vez y los estilos que se declaran usando el selector descendiente no son reutilizables, ya que dependen de un contenedor en particular (en este caso, <code>header <\/code>y <code>footer<\/code>).<br \/>\nUna buena aproximaci\u00f3n siguiendo la metodolog\u00eda OOCSS ser\u00eda:<\/p>\n<pre>\r\nh1{\r\n  font-family: 'Roboto', Helvetica, sans-serif;\r\n  color: #F44;\r\n}\r\n\/* ... *\/\r\nh1, .h1-size { font-size: 2em;   }\r\nh2, .h2-size { font-size: 1.8em; } \r\nh3, .h3-size { font-size: 1.5em; }\r\n\/* ... *\/\r\n.transparente {\r\n  opacity: 0.5;\r\n  filter: alpha(opacity = 50);\r\n}\r\n<\/pre>\n<p>El Html ser\u00eda de la siguiente forma:<\/p>\n<pre>\r\n&lt;header&gt;\r\n  &lt;h1&gt;Header Title&lt;\/h1&gt;\r\n&lt;\/header&gt;\r\n&lt;footer&gt;\r\n  &lt;h1 class=&quot;h3-size muted&quot;&gt;Small title in the footer&lt;\/h1&gt;\r\n&lt;\/footer&gt;\r\n<\/pre>\n<p>Si seguimos los principios de OOCSS, nos aseguraremos de que nuestros estilos no dependen de ning\u00fan elemento contenedor. Esto significa que se podr\u00e1n volver a utilizar en cualquier parte del documento, independientemente de su contexto estructural.<\/p>\n<p>M\u00e1s informaci\u00f3n: <a href=\"http:\/\/oocss.org\/\" target=\"_blank\" rel=\"noopener\"> http:\/\/oocss.org\/<\/a><\/p>\n<h2>Block, Element, Modifier (BEM)<\/h2>\n<p>BEM es un sistema de nomenclatura de clases ideado por el equipo de desarrollo de Google Rusia.<br \/>\nLa idea que hay detr\u00e1s de BEM es <strong>diferenciar clases CSS que cumplen diferentes funciones<\/strong>. Esto se hace nombrando las clases CSS de una manera especial, de tal forma que su nombre describe su funci\u00f3n<\/p>\n<blockquote>\n<h3 style=\"text-align: center;\"><em>BEM complementa la metodolog\u00eda anteriormente explicada (OOCSS) porque OOCSS no impone ninguna convenci\u00f3n de nombres de clase en particular.<\/em><\/h3>\n<\/blockquote>\n<p>En la terminolog\u00eda de BEM, un <strong>bloque <\/strong>es un componente de interfaz de usuario independiente, modular. Un bloque puede estar compuesto de varios elementos HTML, o incluso varios bloques. Un ejemplo de un bloque podr\u00eda ser un men\u00fa de navegaci\u00f3n o un formulario de b\u00fasqueda.<br \/>\nUn <strong>elemento <\/strong>es un componente de un bloque. Un elemento sirve un prop\u00f3sito singular. Por ejemplo, si tenemos un bloque de men\u00fa de navegaci\u00f3n, sus elementos podr\u00edan ser los elementos de la lista (elementos li) y los links (elementos a).<br \/>\nUn <strong>modificador <\/strong>es una clase css que cambia la presentaci\u00f3n de un bloque o un elemento.<\/p>\n<p>As\u00ed que resumiendo tenemos:<\/p>\n<ul>\n<li>\n<h4>Bloques<\/h4>\n<p>Entidad independiente que tiene significado por s\u00ed misma. (header, container, menu, checkbox, input\u2026)<\/li>\n<li>\n<h4>Elementos<\/h4>\n<p>Partes de un bloque que no tienen un significado independiente. Est\u00e1n sem\u00e1nticamente vinculados a su bloque. (elemento de un men\u00fa, elemento de una lista, titulo de un header, caption de un elemento picture, etc\u2026)<\/li>\n<li>\n<h4>Modificadores<\/h4>\n<p>Indicadores de bloque o elemento. Utilizados para cambiar la apariencia o comportamiento. (disabled, highlighted, checked, fixed, size big, color yellow\u2026)<\/li>\n<\/ul>\n<p>Veamos una imagen que ilustra a la perfecci\u00f3n lo anteriormente explicado<\/p>\n<div id=\"attachment_5667\" style=\"width: 915px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-5667\" class=\"size-full wp-image-5667\" src=\"http:\/\/www.espai.es\/blog\/wp-content\/uploads\/2016\/07\/BEM-CSS-ejemplo-bloques-elementos-modificadores.png\" alt=\"metodologias CSS BEM - ejemplo-bloques-elementos-modificadores\" width=\"905\" height=\"549\" srcset=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2016\/07\/BEM-CSS-ejemplo-bloques-elementos-modificadores.png 905w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2016\/07\/BEM-CSS-ejemplo-bloques-elementos-modificadores-300x182.png 300w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2016\/07\/BEM-CSS-ejemplo-bloques-elementos-modificadores-768x466.png 768w\" sizes=\"auto, (max-width: 905px) 100vw, 905px\" \/><p id=\"caption-attachment-5667\" class=\"wp-caption-text\">Podemos ver en verde los bloques, en azul los elementos y en rojo los modificadores<\/p><\/div>\n<p>Esta es el sistema de sintaxy de BEM<\/p>\n<pre>\r\n<ul>\r\n \t<li>.bloque<\/li>\r\n \t<li>.bloque--modificador<\/li>\r\n \t<li>.bloque__elemento<\/li>\r\n \t<li>.bloque__elemento--modificador<\/li>\r\n<\/ul>\r\n<\/pre>\n<p>Un caso pr\u00e1ctico para finalizar. Vamos a fijarnos en un boton de una pagina con diferentes estados<\/p>\n<div id=\"attachment_5668\" style=\"width: 380px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-5668\" class=\"wp-image-5668 size-full\" src=\"http:\/\/www.espai.es\/blog\/wp-content\/uploads\/2016\/07\/BEM-ejemplo-botones-estado.png\" alt=\"metodologias CSS BEM-ejemplo-botones-estado\" width=\"370\" height=\"41\" srcset=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2016\/07\/BEM-ejemplo-botones-estado.png 370w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2016\/07\/BEM-ejemplo-botones-estado-300x33.png 300w\" sizes=\"auto, (max-width: 370px) 100vw, 370px\" \/><p id=\"caption-attachment-5668\" class=\"wp-caption-text\">Tenemos un bot\u00f3n normal y dos posibles estados para \u00e9l.<\/p><\/div>\n<p>El HTML ser\u00eda:<\/p>\n<pre>\r\n&lt;button class=&quot;button&quot;&gt;\r\n\tNormal button\r\n&lt;\/button&gt;\r\n&lt;button class=&quot;button button--state-success&quot;&gt;\r\n\tSuccess button\r\n&lt;\/button&gt;\r\n&lt;button class=&quot;button button--state-danger&quot;&gt;\r\n\tDanger button\r\n&lt;\/button&gt;\r\n<\/pre>\n<p>Y el CSS aplicando los principios y nomenclatura BEM;<\/p>\n<pre>\r\n.button {\r\n\tdisplay: inline-block;\r\n\tborder-radius: 3px;\r\n\tpadding: 7px 12px;\r\n\tborder: 1px solid #D5D5D5;\r\n\tbackground-image: linear-gradient(#EEE, #DDD);\r\n\tfont: 700 13px\/18px Helvetica, arial;\r\n}\r\n.button--state-success {\r\n\tcolor: #FFF;\r\n\tbackground: #569E3D linear-gradient(#79D858, #569E3D) repeat-x;\r\n\tborder-color: #4A993E;\r\n}\r\n.button--state-danger {\r\n\tcolor: #900;\r\n}\r\n<\/pre>\n<p>Beneficios de utilizar BEM:<\/p>\n<ul>\n<li><strong>Modularidad<\/strong>: Los estilos de los bloques no deber\u00edan tener dependencias con otros elementos de la p\u00e1gina, de esta manera evitaremos problemas de cambios en cascada.<br \/>\nAdem\u00e1s, estos m\u00f3dulos\/bloques pueden ser reaprovechados para otros proyectos.<\/li>\n<li><strong>Reutilizaci\u00f3n<\/strong>: Componer bloques independientes y reutilizarlos reduce la cantidad de c\u00f3digo CSS a mantener.<\/li>\n<li><strong>Estructura<\/strong>: BEM otorga una estructura simple y comprensible a tu c\u00f3digo CSS.<\/li>\n<\/ul>\n<p>M\u00e1s informaci\u00f3n: <a href=\"http:\/\/getbem.com\/\" target=\"_blank\" rel=\"noopener\">http:\/\/getbem.com\/<\/a><\/p>\n<h2>Scalable and Modular Architecture for CSS (SMACSS)<\/h2>\n<p>Desarrollado en 2011 por <a href=\"https:\/\/snook.ca\/\" target=\"_blank\" rel=\"noopener\">Jonathan Snook<\/a>, SMACSS funciona mediante organizaci\u00f3n de las reglas CSS en 5 categor\u00edas. (Base, Maquetaci\u00f3n, M\u00f3dulo, Estado y tema):<\/p>\n<h3>Base<\/h3>\n<p>Reglas b\u00e1sicas para elementos, atributos, pseudo-clases, etc&#8230; <em>Normalize.css<\/em> ser\u00eda un ejemplo de reglas base<\/p>\n<p>Ejemplos:<\/p>\n<pre>\r\nh1 {\r\n font-size: 32px;\r\n}\r\ndiv {\r\n  margin: 0 auto;\r\n}\r\na {\r\n  color: blue;\r\n}\r\n<\/pre>\n<h3>Maquetaci\u00f3n<\/h3>\n<p>Las reglas de estilo que est\u00e1n relacionados con el dise\u00f1o estructural de la p\u00e1ginas. Contenedores, grillas, etc. Van con el prefijo <code>layout-<\/code> o <code>l-<\/code><\/p>\n<p>Ejemplos:<\/p>\n<pre>\r\n.layout-sidebar {\r\n  width: 320px;\r\n}\r\n.l-comments {\r\n  width: 640px;\r\n}\r\n<\/pre>\n<h3>M\u00f3dulos<\/h3>\n<p>componentes re-usables y modulares<\/p>\n<p>Ejemplos:<\/p>\n<pre>\r\n.call-to-action-button {\r\n  text-transform: uppercase;\r\n  color: #FFF200;\r\n}\r\n.search-form {\r\n  display: inline-block;\r\n  background-color: E1E1E1;\r\n}\r\n<\/pre>\n<h3>Estados<\/h3>\n<p>Las reglas de estilo que especifican el estado actual de algo en la interfaz.<\/p>\n<p>Ejemplos:<\/p>\n<pre>\r\n.is-hidden {\r\n  display: none;\r\n}\r\n.is-highlighted {\r\n  color: #FF0000;\r\n  background-color: #F4F0BB;\r\n  border: 1px solid #CBBD15;\r\n}\r\n<\/pre>\n<h3>Temas<\/h3>\n<p>Es lo que en OOCSS se le llama \u201cskin\u201d o piel. En SMACSS es opcional, los estilos visuales pueden estar integrados a los m\u00f3dulos y estados o separados por tema para sitios en donde el usuario pueda elegir un tema, para sitios multi-lenguaje, etc&#8230;<\/p>\n<p><strong>SMACSS <\/strong>ofrece una nomenclatura m\u00e1s simple que BEM. No hay nombres para los estilos base ya que se usa los propios selectores (h1, p, a, etc.). A los m\u00f3dulos se les da un nombre de clase \u00fanico. Los sub-componentes y las variaciones son prefijados con el nombre el m\u00f3dulo padre<\/p>\n<p>M\u00e1s informaci\u00f3n: <a href=\"https:\/\/smacss.com\/\" target=\"_blank\" rel=\"noopener\">https:\/\/smacss.com\/<\/a>. Tambi\u00e9n existe un <a href=\"https:\/\/smacss.com\/book\/\" target=\"_blank\" rel=\"noopener\">libro gratuito<\/a> para indagar m\u00e1s en el tema.<\/p>\n<h2>CONCLUSI\u00d3N<\/h2>\n<p>Todas las metodolog\u00edas CSS tratan el problema de la escalabilidad y mantenimiento del c\u00f3digo CSS proporcionando un sistema para organizar grandes dise\u00f1os en m\u00f3dulos reutilizables .<\/p>\n<blockquote>\n<h3><em>Dichas metodolog\u00edas hacen que sea m\u00e1s f\u00e1cil de desarrollar e iterar un dise\u00f1o. Hacen c\u00f3digo front-end m\u00e1s f\u00e1cil de leer y comprender, y hacen que sea m\u00e1s f\u00e1cil para que otras personas colaboren en un dise\u00f1o.<\/em><\/h3>\n<\/blockquote>\n<p>Debido a que las metodolog\u00edas CSS fomentan la reutilizaci\u00f3n de c\u00f3digo, eso se traduce en una reducci\u00f3n del tama\u00f1o y en un aumento de la velocidad de carga.<\/p>\n<p>Pensad que no existe una metodolog\u00eda CSS \u00abmejor\u00bb. Diferentes enfoques funcionan mejor para diferentes personas, equipos o proyectos.<\/p>\n<p>Se pueden combinar entre s\u00ed (OOCSS-SMACSS, o OOCSS-BEM, o BEM-SAMCSS, etc.) para adaptarse a las necesidades de un proyecto.<\/p>\n<p>Existen otras metodolog\u00edas que no hemos tratado aqu\u00ed como <a href=\"http:\/\/acss.io\/\">Atomic CSS <\/a>, <a href=\"http:\/\/docssa.info\/\">DoCSSa<\/a>, <a href=\"http:\/\/www.csstyle.io\/\">csstyle<\/a>, etc.<\/p>\n<p>Tambi\u00e9n existen frameworks y librer\u00edas basadas en estas metodolog\u00edas, como por ejemplo, <a href=\"http:\/\/inuitcss.com\/\">inuit.css<\/a>, <a href=\"http:\/\/purecss.io\/\">Pure<\/a>, <a href=\"http:\/\/topcoat.io\/\">Topcoat<\/a>\u00a0etc..<\/p>\n<p>&nbsp;<\/p>\n<p>Esto ha sido todo. Un post un poco denso pero, a mi parecer, interesante y muy demandado en ofertas de empleo de empresas medianas-grandes actuales.<\/p>\n<p>Espero que os haya gustado.<\/p>\n<p>Saludos<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hola a todos y bienvenidos a un nuevo post del \u00e1rea web de la Escola Espai. En este art\u00edculo conoceremos las metodolog\u00edas CSS \u00a0m\u00e1s extendidas y veremos como nos pueden ser \u00fatiles para optimizar nuestro c\u00f3digo CSS. Antes de empezar aclarar que cuando hablamos de&#8230;<\/p>\n","protected":false},"author":19,"featured_media":5691,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_ef_editorial_meta_date_first-draft-date":"","_ef_editorial_meta_paragraph_assignment":"","_ef_editorial_meta_checkbox_needs-photo":"","_ef_editorial_meta_number_word-count":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[7,379,5],"tags":[12,16,529],"class_list":["post-5654","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web","category-productividad","category-programacion","tag-css","tag-maquetacion-web","tag-metodologias-css"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Metodolog\u00edas css: OOCSS, BEM y SMACSS - Blog Escola Espai<\/title>\n<meta name=\"description\" content=\"Las metodolog\u00edas CSS nos ayudaran a escribir c\u00f3digo CSS m\u00e1s flexible, reutilizable, comprensible y manejable. En este post veremos las 3 m\u00e1s extendidas.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.espai.es\/blog\/2016\/07\/metodologias-css-oocss-bem-smacss\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Metodolog\u00edas css: OOCSS, BEM y SMACSS - Blog Escola Espai\" \/>\n<meta property=\"og:description\" content=\"Las metodolog\u00edas CSS nos ayudaran a escribir c\u00f3digo CSS m\u00e1s flexible, reutilizable, comprensible y manejable. En este post veremos las 3 m\u00e1s extendidas.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.espai.es\/blog\/2016\/07\/metodologias-css-oocss-bem-smacss\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Escola Espai\" \/>\n<meta property=\"article:published_time\" content=\"2016-07-30T11:26:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-09-14T15:50:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2016\/07\/metodologias-css-lego.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"768\" \/>\n\t<meta property=\"og:image:height\" content=\"399\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Albert Sard\u00e0\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Albert Sard\u00e0\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.espai.es\/blog\/2016\/07\/metodologias-css-oocss-bem-smacss\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2016\/07\/metodologias-css-oocss-bem-smacss\/\"},\"author\":{\"name\":\"Albert Sard\u00e0\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/46d558cebb513dbfefecabf973d54e52\"},\"headline\":\"Metodolog\u00edas css: OOCSS, BEM y SMACSS\",\"datePublished\":\"2016-07-30T11:26:00+00:00\",\"dateModified\":\"2021-09-14T15:50:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2016\/07\/metodologias-css-oocss-bem-smacss\/\"},\"wordCount\":1445,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2016\/07\/metodologias-css-oocss-bem-smacss\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2016\/07\/metodologias-css-lego.jpg\",\"keywords\":[\"CSS\",\"maquetaci\u00f3n web\",\"metodolog\u00edas css\"],\"articleSection\":[\"Dise\u00f1o Web\",\"Productividad\",\"Programaci\u00f3n\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.espai.es\/blog\/2016\/07\/metodologias-css-oocss-bem-smacss\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.espai.es\/blog\/2016\/07\/metodologias-css-oocss-bem-smacss\/\",\"url\":\"https:\/\/www.espai.es\/blog\/2016\/07\/metodologias-css-oocss-bem-smacss\/\",\"name\":\"Metodolog\u00edas css: OOCSS, BEM y SMACSS - Blog Escola Espai\",\"isPartOf\":{\"@id\":\"https:\/\/www.espai.es\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2016\/07\/metodologias-css-oocss-bem-smacss\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2016\/07\/metodologias-css-oocss-bem-smacss\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2016\/07\/metodologias-css-lego.jpg\",\"datePublished\":\"2016-07-30T11:26:00+00:00\",\"dateModified\":\"2021-09-14T15:50:03+00:00\",\"author\":{\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/46d558cebb513dbfefecabf973d54e52\"},\"description\":\"Las metodolog\u00edas CSS nos ayudaran a escribir c\u00f3digo CSS m\u00e1s flexible, reutilizable, comprensible y manejable. En este post veremos las 3 m\u00e1s extendidas.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2016\/07\/metodologias-css-oocss-bem-smacss\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.espai.es\/blog\/2016\/07\/metodologias-css-oocss-bem-smacss\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.espai.es\/blog\/2016\/07\/metodologias-css-oocss-bem-smacss\/#primaryimage\",\"url\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2016\/07\/metodologias-css-lego.jpg\",\"contentUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2016\/07\/metodologias-css-lego.jpg\",\"width\":768,\"height\":399,\"caption\":\"metodologias-css-modulos-lego\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.espai.es\/blog\/2016\/07\/metodologias-css-oocss-bem-smacss\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.espai.es\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Metodolog\u00edas css: OOCSS, BEM y SMACSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.espai.es\/blog\/#website\",\"url\":\"https:\/\/www.espai.es\/blog\/\",\"name\":\"Blog Escola Espai\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.espai.es\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/46d558cebb513dbfefecabf973d54e52\",\"name\":\"Albert Sard\u00e0\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/5375f6e1a8fa3ee5e4265fec85b9dbb6dd5ff2e961a7118a96e67358b0bea9e4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/5375f6e1a8fa3ee5e4265fec85b9dbb6dd5ff2e961a7118a96e67358b0bea9e4?s=96&d=mm&r=g\",\"caption\":\"Albert Sard\u00e0\"},\"url\":\"https:\/\/www.espai.es\/blog\/author\/albert\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Metodolog\u00edas css: OOCSS, BEM y SMACSS - Blog Escola Espai","description":"Las metodolog\u00edas CSS nos ayudaran a escribir c\u00f3digo CSS m\u00e1s flexible, reutilizable, comprensible y manejable. En este post veremos las 3 m\u00e1s extendidas.","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:\/\/www.espai.es\/blog\/2016\/07\/metodologias-css-oocss-bem-smacss\/","og_locale":"es_ES","og_type":"article","og_title":"Metodolog\u00edas css: OOCSS, BEM y SMACSS - Blog Escola Espai","og_description":"Las metodolog\u00edas CSS nos ayudaran a escribir c\u00f3digo CSS m\u00e1s flexible, reutilizable, comprensible y manejable. En este post veremos las 3 m\u00e1s extendidas.","og_url":"https:\/\/www.espai.es\/blog\/2016\/07\/metodologias-css-oocss-bem-smacss\/","og_site_name":"Blog Escola Espai","article_published_time":"2016-07-30T11:26:00+00:00","article_modified_time":"2021-09-14T15:50:03+00:00","og_image":[{"width":768,"height":399,"url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2016\/07\/metodologias-css-lego.jpg","type":"image\/jpeg"}],"author":"Albert Sard\u00e0","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Albert Sard\u00e0","Tiempo de lectura":"9 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.espai.es\/blog\/2016\/07\/metodologias-css-oocss-bem-smacss\/#article","isPartOf":{"@id":"https:\/\/www.espai.es\/blog\/2016\/07\/metodologias-css-oocss-bem-smacss\/"},"author":{"name":"Albert Sard\u00e0","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/46d558cebb513dbfefecabf973d54e52"},"headline":"Metodolog\u00edas css: OOCSS, BEM y SMACSS","datePublished":"2016-07-30T11:26:00+00:00","dateModified":"2021-09-14T15:50:03+00:00","mainEntityOfPage":{"@id":"https:\/\/www.espai.es\/blog\/2016\/07\/metodologias-css-oocss-bem-smacss\/"},"wordCount":1445,"commentCount":0,"image":{"@id":"https:\/\/www.espai.es\/blog\/2016\/07\/metodologias-css-oocss-bem-smacss\/#primaryimage"},"thumbnailUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2016\/07\/metodologias-css-lego.jpg","keywords":["CSS","maquetaci\u00f3n web","metodolog\u00edas css"],"articleSection":["Dise\u00f1o Web","Productividad","Programaci\u00f3n"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.espai.es\/blog\/2016\/07\/metodologias-css-oocss-bem-smacss\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.espai.es\/blog\/2016\/07\/metodologias-css-oocss-bem-smacss\/","url":"https:\/\/www.espai.es\/blog\/2016\/07\/metodologias-css-oocss-bem-smacss\/","name":"Metodolog\u00edas css: OOCSS, BEM y SMACSS - Blog Escola Espai","isPartOf":{"@id":"https:\/\/www.espai.es\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.espai.es\/blog\/2016\/07\/metodologias-css-oocss-bem-smacss\/#primaryimage"},"image":{"@id":"https:\/\/www.espai.es\/blog\/2016\/07\/metodologias-css-oocss-bem-smacss\/#primaryimage"},"thumbnailUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2016\/07\/metodologias-css-lego.jpg","datePublished":"2016-07-30T11:26:00+00:00","dateModified":"2021-09-14T15:50:03+00:00","author":{"@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/46d558cebb513dbfefecabf973d54e52"},"description":"Las metodolog\u00edas CSS nos ayudaran a escribir c\u00f3digo CSS m\u00e1s flexible, reutilizable, comprensible y manejable. En este post veremos las 3 m\u00e1s extendidas.","breadcrumb":{"@id":"https:\/\/www.espai.es\/blog\/2016\/07\/metodologias-css-oocss-bem-smacss\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.espai.es\/blog\/2016\/07\/metodologias-css-oocss-bem-smacss\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.espai.es\/blog\/2016\/07\/metodologias-css-oocss-bem-smacss\/#primaryimage","url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2016\/07\/metodologias-css-lego.jpg","contentUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2016\/07\/metodologias-css-lego.jpg","width":768,"height":399,"caption":"metodologias-css-modulos-lego"},{"@type":"BreadcrumbList","@id":"https:\/\/www.espai.es\/blog\/2016\/07\/metodologias-css-oocss-bem-smacss\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.espai.es\/blog\/"},{"@type":"ListItem","position":2,"name":"Metodolog\u00edas css: OOCSS, BEM y SMACSS"}]},{"@type":"WebSite","@id":"https:\/\/www.espai.es\/blog\/#website","url":"https:\/\/www.espai.es\/blog\/","name":"Blog Escola Espai","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.espai.es\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/46d558cebb513dbfefecabf973d54e52","name":"Albert Sard\u00e0","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/5375f6e1a8fa3ee5e4265fec85b9dbb6dd5ff2e961a7118a96e67358b0bea9e4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5375f6e1a8fa3ee5e4265fec85b9dbb6dd5ff2e961a7118a96e67358b0bea9e4?s=96&d=mm&r=g","caption":"Albert Sard\u00e0"},"url":"https:\/\/www.espai.es\/blog\/author\/albert\/"}]}},"jetpack_featured_media_url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2016\/07\/metodologias-css-lego.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/5654","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/users\/19"}],"replies":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/comments?post=5654"}],"version-history":[{"count":41,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/5654\/revisions"}],"predecessor-version":[{"id":12305,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/5654\/revisions\/12305"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/media\/5691"}],"wp:attachment":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/media?parent=5654"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/categories?post=5654"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/tags?post=5654"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}