{"id":16,"date":"2013-01-09T13:12:34","date_gmt":"2013-01-09T12:12:34","guid":{"rendered":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/?p=16"},"modified":"2018-10-21T18:09:30","modified_gmt":"2018-10-21T17:09:30","slug":"oocss","status":"publish","type":"post","link":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/css\/oocss\/","title":{"rendered":"OOCSS: CSS orientado a objetos"},"content":{"rendered":"<p>[\u00daltima actualizaci\u00f3n: 21\/10\/2018]<\/p>\n<p>El \u00abCSS orientado a objetos\u00bb es una metodolog\u00eda para escribir CSS (y HTML) que pretende fomentar la reutilizaci\u00f3n de c\u00f3digo y la creaci\u00f3n de webs en que la combinaci\u00f3n de HTML y CSS tenga un mejor rendimiento y mantenibilidad. Toma su nombre de la programaci\u00f3n orientada a objetos, algunos de cuyos principios toma como inspiraci\u00f3n (aunque, naturalmente, las diferencias entre ambas cosas son m\u00e1s que notables). Se trata de una metodolog\u00eda que adquiere especial sentido en sitios y aplicaciones web de complejidad elevada en los que trabaja un buen n\u00famero de personas. Tal y como dicen en <a href=\"http:\/\/radar.oreilly.com\/2014\/01\/html-and-css-performance.html\">HTML and CSS performance<\/a> (<cite>O&#8217;Reilly Radar<\/cite>, 28 de enero de 2014),<\/p>\n<blockquote><p>&#8230;En nuestra industria se debate sobre los patrones para nombrar elementos, pero yo recomiendo elementos sem\u00e1nticos para sitios de tama\u00f1o peque\u00f1o a mediano. Un sitio grande como Facebook deber\u00eda usar un patr\u00f3n de nombres orientado al objeto por la escala del sitio y la cantidad de desarrolladores que tocan el c\u00f3digo. Pero para el sitio medio ser sem\u00e1ntico con los nombres de elementos puede ser tremendamente beneficioso a la hora de reutilizar c\u00f3digo o eliminar elementos innecesarios&#8230;<\/p><\/blockquote>\n<p>Un buen texto introductorio sobre el tema es <a title=\"An Introduction To Object Oriented CSS (OOCSS) | Smashing Coding\" href=\"http:\/\/coding.smashingmagazine.com\/2011\/12\/12\/an-introduction-to-object-oriented-css-oocss\/\">An Introduction To Object Oriented CSS (OOCSS)<\/a>.<\/p>\n<p>Por otro lado, un texto sobre los posibles efectos perniciosos del uso de esta metodolog\u00eda es <a href=\"http:\/\/www.kapowaz.net\/articles\/cargo-cult-css\">Cargo Cult CSS<\/a> (21 de octubre de 2013).<\/p>\n<p>Un tema complementario a considerar es el de c\u00f3mo dar nombre a las clases que utilizamos, especialmente cuando se trata de proyectos grandes en los que colaboran varias personas. Un texto interesante a leer sobre el tema es <a href=\"http:\/\/csswizardry.com\/2013\/01\/mindbemding-getting-your-head-round-bem-syntax\/\">MindBEMding \u2013 getting your head \u2019round BEM syntax<\/a> (enero de 2013), que propone una sintaxis \u00abBEM\u00bb en funci\u00f3n de bloques, elementos y modificadores.<\/p>","protected":false},"excerpt":{"rendered":"<p>[\u00daltima actualizaci\u00f3n: 21\/10\/2018] El \u00abCSS orientado a objetos\u00bb es una metodolog\u00eda para escribir CSS (y HTML) que pretende fomentar la reutilizaci\u00f3n de c\u00f3digo y la creaci\u00f3n de webs en que la combinaci\u00f3n de HTML y CSS tenga un mejor rendimiento y mantenibilidad. Toma su nombre de la programaci\u00f3n orientada a objetos, algunos de cuyos principios &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/css\/oocss\/\" class=\"more-link\">Seguir leyendo<span class=\"screen-reader-text\"> \u00abOOCSS: CSS orientado a objetos\u00bb<\/span><\/a><\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,7],"tags":[],"class_list":["post-16","post","type-post","status-publish","format-standard","hentry","category-css","category-rendimiento","entry"],"_links":{"self":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/posts\/16","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/comments?post=16"}],"version-history":[{"count":22,"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/posts\/16\/revisions"}],"predecessor-version":[{"id":484,"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/posts\/16\/revisions\/484"}],"wp:attachment":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/media?parent=16"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/categories?post=16"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/tags?post=16"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}