{"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":"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/css\/oocss\/","title":{"rendered":"OOCSS: CSS orientat a objectes"},"content":{"rendered":"<p>[Darrera actualitzaci\u00f3: 21\/10\/2018]<\/p>\n<p>El &#8220;CSS orientat a objectes&#8221; \u00e9s una metodologia per escriure CSS que pret\u00e9n fomentar la reutilitzaci\u00f3 de codi i la creaci\u00f3 de webs en qu\u00e8 la combinaci\u00f3 d&#8217;HTML i CSS tingui un millor rendiment i mantenibilitat. Pren el seu nom de la programaci\u00f3 orientada a objectes, donat que pren alguns dels seus principis com a inspiraci\u00f3 (tot i que, naturalment, les difer\u00e8ncies entre les dues coses s\u00f3n m\u00e9s que notables). Es tracta d&#8217;una metodologia que te especial sentit en llocs i aplicacions web de complexitat elevada en els que treballa un bon n\u00famero de persones. Tal i com diuen a <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 gener de 2014),<\/p>\n<blockquote><p>&#8230;En la nostra ind\u00fastria es debat sobre els patrons per donar nom als elements, per\u00f2 jo recomano elements sem\u00e0ntics per a llocs de mida petita a mitjana. Un lloc gran com ara Facebook hauria d&#8217;utilitzar un patr\u00f3 de noms orientat a l&#8217;objecte per l&#8217;escala del lloc i la quantitat de desenvolupadors que toquen el codi. Per\u00f2 per al lloc mig ser sem\u00e0ntic amb els noms dels elements pot ser tremendament benefici\u00f2s a l&#8217;hora de reutilitzar codi o eliminar elements innecessaris&#8230;<\/p><\/blockquote>\n<p>Un bon text introductori sobre el tema \u00e9s <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>D&#8217;altra banda, un text sobre els possibles efectes perniciosos de l&#8217;\u00fas d&#8217;aquesta metodologia \u00e9s <a href=\"http:\/\/www.kapowaz.net\/articles\/cargo-cult-css\">Cargo Cult CSS<\/a> (21 d&#8217;octubre, 2013).<\/p>\n<p>Un tema complementari a considerar \u00e9s el de com donar nom a les classes que utilitzem, especialment en projectes grans en qu\u00e8 col\u00b7laboren diverses persones. Un text interessant a llegir sobre el tema \u00e9s <a href=\"http:\/\/csswizardry.com\/2013\/01\/mindbemding-getting-your-head-round-bem-syntax\/\">MindBEMding \u2013 getting your head \u2019round BEM syntax<\/a> (gener de 2013), que proposa una sintaxi &#8220;BEM&#8221; en funci\u00f3 de blocs, elements i modificadors.<\/p>","protected":false},"excerpt":{"rendered":"<p>[Darrera actualitzaci\u00f3: 21\/10\/2018] El &#8220;CSS orientat a objectes&#8221; \u00e9s una metodologia per escriure CSS que pret\u00e9n fomentar la reutilitzaci\u00f3 de codi i la creaci\u00f3 de webs en qu\u00e8 la combinaci\u00f3 d&#8217;HTML i CSS tingui un millor rendiment i mantenibilitat. Pren el seu nom de la programaci\u00f3 orientada a objectes, donat que pren alguns dels seus &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/css\/oocss\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;OOCSS: CSS orientat a objectes&#8221;<\/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":"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/posts\/16","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/comments?post=16"}],"version-history":[{"count":22,"href":"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/posts\/16\/revisions"}],"predecessor-version":[{"id":484,"href":"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/posts\/16\/revisions\/484"}],"wp:attachment":[{"href":"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/media?parent=16"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/categories?post=16"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/tags?post=16"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}