{"id":678,"date":"2013-01-09T16:50:54","date_gmt":"2013-01-09T14:50:54","guid":{"rendered":"http:\/\/www.espai.es\/blog\/?p=678"},"modified":"2014-02-28T23:00:33","modified_gmt":"2014-02-28T21:00:33","slug":"optimiza-tu-css","status":"publish","type":"post","link":"https:\/\/www.espai.es\/blog\/2013\/01\/optimiza-tu-css\/","title":{"rendered":"Optimiza tu CSS"},"content":{"rendered":"<p><a href=\"http:\/\/www.espai.es\/blog\/wp-content\/uploads\/2013\/01\/optimiza_tu_css.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-679\" src=\"http:\/\/www.espai.es\/blog\/wp-content\/uploads\/2013\/01\/optimiza_tu_css-300x200.png\" alt=\"\" width=\"300\" height=\"200\" srcset=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2013\/01\/optimiza_tu_css-300x200.png 300w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2013\/01\/optimiza_tu_css.png 640w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>Despu\u00e9s de hacer una profunda investigaci\u00f3n sobre como optimizar el  CSS, ya me siento preparado para daros un resultado a la hora de  codificar en hojas de estilo teniendo en cuenta al desarrollador, a las  tecnolog\u00edas de optimizaci\u00f3n y b\u00fasqueda y sobre todo a la correcta  visualizaci\u00f3n.<\/p>\n<p>Cuando se comienza a desarrollar c\u00f3digo CSS, una de las  consideraciones que no tenemos en cuenta es la codificaci\u00f3n vertical en  vez de una codificaci\u00f3n horizontal. Obviamente para aquellos futuros  desarrolladores que est\u00e1n aprendiendo a estilizar en hojas de estilo es  sin duda la forma m\u00e1s c\u00f3moda de desarrollar en CSS, sin embargo, esto  implica la creaci\u00f3n de excesivas l\u00edneas de c\u00f3digo. Podemos ahorrar y por  consecuencia disminuir el peso de nuestras hojas de estilo  desarrollando en horizontal, de esta forma facilitaremos la descarga del  archivo en aquellas conexiones precarias como la actual 3G.<\/p>\n<p>El desglose del c\u00f3digo en diferentes archivos CSS tambi\u00e9n es una  mala pr\u00e1ctica. Esta afirmaci\u00f3n es algo que sorprende a todo  desarrollador experimentado, ya que vivimos en la era de la Programaci\u00f3n  Orientada a Objetos y una de las reglas es la encapsulaci\u00f3n del c\u00f3digo.  Sin embargo para el mundo del desarrollo web esto produce una  disminuci\u00f3n de la velocidad de descarga que acaba produciendo que  nuestra web sea lenta e incluso puede llegar a ocasionar errores de  carga (Cuando hablo de una web lenta, me refiero a m\u00e1s de 2 segundos de  carga). Por tanto, deber\u00edamos de tener un m\u00e1ximo de 4 archivos CSS. Yo  recomiendo la siguiente estructura:<\/p>\n<ul>\n<li><strong>Main.css<\/strong> &#8211; Aqu\u00ed codificaremos toda la estructura de la  web y sus dependencias. Por tanto aqu\u00ed encontraremos el c\u00f3digo que  dimensiona la web y posiciona los elementos entro otros.<\/li>\n<\/ul>\n<ul>\n<li><strong>Style.css<\/strong> &#8211; Todo lo referente al estilo visual de la web  ir\u00e1 en este archivo. Por ejemplo, podemos encontrar c\u00f3digo referente a  los colores de las cajas y el texto, el estilo propio del texto como las  fuentes y bordeados entre otros.<\/li>\n<li><strong>Misc.css<\/strong> &#8211; El c\u00f3digo que no tenga cabida en los dos  anteriores se incluir\u00e1 en este fichero. En mi caso tengo la adaptaci\u00f3n  de la web para smartphones y tablets.<\/li>\n<li><strong>Reset.css<\/strong> &#8211; El famoso c\u00f3digo que elimina el c\u00f3digo implementado por defecto en los elementos HTML.<\/li>\n<\/ul>\n<p>Si aun siguiendo estas pautas, no te convence el desarrollo de tu c\u00f3digo  CSS y a\u00fan quieres profundizar m\u00e1s en la optimizaci\u00f3n, puedes tener en  cuenta los siguientes puntos (nota al lector: estos puntos son peque\u00f1os  trucos para mejorar la velocidad de carga de tus hojas de estilo, cada  desarrollador es libre de emplearlo o no dependiendo de su criterio).<\/p>\n<ul>\n<li><strong>Sprites<\/strong> &#8211; Si tu web cuenta con much\u00edsimas im\u00e1genes, una de las formas de optimizar la carga de las mismas es usando la t\u00e9cnica del <a href=\"http:\/\/www.kabytes.com\/programacion\/tutorial-basico-sobre-css-sprite\/\">Sprite<\/a>.  Con ello conseguimos que la imagen cargue una \u00fanica vez y adem\u00e1s  ahorramos c\u00f3digo de invocaci\u00f3n de im\u00e1genes. Sin duda es la mejor forma  de optimizar tu web.<\/li>\n<li><strong>Utilizaci\u00f3n de clases<\/strong> &#8211; Las clases pueden ser una de las  herramientas m\u00e1s \u00fatiles del desarrollador. Muchos de nosotros nos  cuesta acostumbrarnos a generar un c\u00f3digo para x posibilidades y gracias  a las clases y nuestras habilidades de desarrollador podemos  conseguirlo y optimizar much\u00edsimo el c\u00f3digo. Olvidaos de los  identificadores y de llamar directamente a las etiquetas de HTML y  trabajad las clases.<\/li>\n<li><strong>Anidaci\u00f3n<\/strong> &#8211; Recordad que el CSS permite anidar el c\u00f3digo  y con ello podemos agrupar much\u00edsimos selectores que carguen la misma  propiedad. Sin duda merece la pena perder un poco de tiempo para  reagrupar el c\u00f3digo.<\/li>\n<li><strong>Comentarios<\/strong> &#8211; Reduce los comentarios de tu CSS. Si tus  comentarios ocupan 3 o 4 l\u00edneas, \u00bfno has pensado en poner un comentario  de 1 l\u00ednea? Imagina la de l\u00edneas que te vas a ahorrar.<\/li>\n<li><strong>Simplifica los colores<\/strong> &#8211; Si por ejemplo tienes que  invocar el color blanco y utilizas #FFFFFF, recuerda que puedes reducir  este c\u00f3digo al siguiente #FFF. De esta forma ganas escribir menos  caracteres.<\/li>\n<li><strong>Remover unidades cuando el valor sea 0<\/strong> &#8211; Si los valores de tus margins o paddings son 0, no pongas 0px, de esta forma ahorras dos caracteres.<\/li>\n<\/ul>\n<p>Espero que os haya ayudado esta peque\u00f1a gu\u00eda de codificaci\u00f3n.<\/p>\n<p>Un saludo<\/p>\n<p>Fuente <a title=\"www.antoniomolina.net\" href=\"http:\/\/www.antoniomolina.net\/new.php?article=20130109optimiza-tu-css.php\">http:\/\/www.antoniomolina.net\/new.php?article=20130109optimiza-tu-css.php<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Despu\u00e9s de hacer una profunda investigaci\u00f3n sobre como optimizar el CSS, ya me siento preparado para daros un resultado a la hora de codificar en hojas de estilo teniendo en cuenta al desarrollador, a las tecnolog\u00edas de optimizaci\u00f3n y b\u00fasqueda y sobre todo a la&#8230;<\/p>\n","protected":false},"author":8,"featured_media":0,"comment_status":"closed","ping_status":"open","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],"tags":[12,15,172,164],"class_list":["post-678","post","type-post","status-publish","format-standard","hentry","category-diseno-web","tag-css","tag-html","tag-optimizar","tag-web"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Optimiza tu CSS - Blog Escola Espai<\/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:\/\/www.espai.es\/blog\/2013\/01\/optimiza-tu-css\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Optimiza tu CSS - Blog Escola Espai\" \/>\n<meta property=\"og:description\" content=\"Despu\u00e9s de hacer una profunda investigaci\u00f3n sobre como optimizar el CSS, ya me siento preparado para daros un resultado a la hora de codificar en hojas de estilo teniendo en cuenta al desarrollador, a las tecnolog\u00edas de optimizaci\u00f3n y b\u00fasqueda y sobre todo a la...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.espai.es\/blog\/2013\/01\/optimiza-tu-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Escola Espai\" \/>\n<meta property=\"article:published_time\" content=\"2013-01-09T14:50:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2014-02-28T21:00:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2013\/01\/optimiza_tu_css.png\" \/>\n\t<meta property=\"og:image:width\" content=\"640\" \/>\n\t<meta property=\"og:image:height\" content=\"428\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Antonio\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Antonio\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.espai.es\/blog\/2013\/01\/optimiza-tu-css\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2013\/01\/optimiza-tu-css\/\"},\"author\":{\"name\":\"Antonio\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/12b6fc1aa9d549637166ed59d78390f9\"},\"headline\":\"Optimiza tu CSS\",\"datePublished\":\"2013-01-09T14:50:54+00:00\",\"dateModified\":\"2014-02-28T21:00:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2013\/01\/optimiza-tu-css\/\"},\"wordCount\":757,\"image\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2013\/01\/optimiza-tu-css\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/www.espai.es\/blog\/wp-content\/uploads\/2013\/01\/optimiza_tu_css-300x200.png\",\"keywords\":[\"CSS\",\"HTML\",\"optimizar\",\"web\"],\"articleSection\":[\"Dise\u00f1o Web\"],\"inLanguage\":\"es\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.espai.es\/blog\/2013\/01\/optimiza-tu-css\/\",\"url\":\"https:\/\/www.espai.es\/blog\/2013\/01\/optimiza-tu-css\/\",\"name\":\"Optimiza tu CSS - Blog Escola Espai\",\"isPartOf\":{\"@id\":\"https:\/\/www.espai.es\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2013\/01\/optimiza-tu-css\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2013\/01\/optimiza-tu-css\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/www.espai.es\/blog\/wp-content\/uploads\/2013\/01\/optimiza_tu_css-300x200.png\",\"datePublished\":\"2013-01-09T14:50:54+00:00\",\"dateModified\":\"2014-02-28T21:00:33+00:00\",\"author\":{\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/12b6fc1aa9d549637166ed59d78390f9\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2013\/01\/optimiza-tu-css\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.espai.es\/blog\/2013\/01\/optimiza-tu-css\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.espai.es\/blog\/2013\/01\/optimiza-tu-css\/#primaryimage\",\"url\":\"http:\/\/www.espai.es\/blog\/wp-content\/uploads\/2013\/01\/optimiza_tu_css-300x200.png\",\"contentUrl\":\"http:\/\/www.espai.es\/blog\/wp-content\/uploads\/2013\/01\/optimiza_tu_css-300x200.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.espai.es\/blog\/2013\/01\/optimiza-tu-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.espai.es\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Optimiza tu CSS\"}]},{\"@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\/12b6fc1aa9d549637166ed59d78390f9\",\"name\":\"Antonio\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d9c296a0ba9a57dd139f1c02aeeb960b9d3d89e21210644d50bfd015643626d8?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d9c296a0ba9a57dd139f1c02aeeb960b9d3d89e21210644d50bfd015643626d8?s=96&d=mm&r=g\",\"caption\":\"Antonio\"},\"sameAs\":[\"http:\/\/www.espai.es\"],\"url\":\"https:\/\/www.espai.es\/blog\/author\/antonio\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Optimiza tu CSS - Blog Escola Espai","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\/2013\/01\/optimiza-tu-css\/","og_locale":"es_ES","og_type":"article","og_title":"Optimiza tu CSS - Blog Escola Espai","og_description":"Despu\u00e9s de hacer una profunda investigaci\u00f3n sobre como optimizar el CSS, ya me siento preparado para daros un resultado a la hora de codificar en hojas de estilo teniendo en cuenta al desarrollador, a las tecnolog\u00edas de optimizaci\u00f3n y b\u00fasqueda y sobre todo a la...","og_url":"https:\/\/www.espai.es\/blog\/2013\/01\/optimiza-tu-css\/","og_site_name":"Blog Escola Espai","article_published_time":"2013-01-09T14:50:54+00:00","article_modified_time":"2014-02-28T21:00:33+00:00","og_image":[{"width":640,"height":428,"url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2013\/01\/optimiza_tu_css.png","type":"image\/png"}],"author":"Antonio","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Antonio","Tiempo de lectura":"4 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.espai.es\/blog\/2013\/01\/optimiza-tu-css\/#article","isPartOf":{"@id":"https:\/\/www.espai.es\/blog\/2013\/01\/optimiza-tu-css\/"},"author":{"name":"Antonio","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/12b6fc1aa9d549637166ed59d78390f9"},"headline":"Optimiza tu CSS","datePublished":"2013-01-09T14:50:54+00:00","dateModified":"2014-02-28T21:00:33+00:00","mainEntityOfPage":{"@id":"https:\/\/www.espai.es\/blog\/2013\/01\/optimiza-tu-css\/"},"wordCount":757,"image":{"@id":"https:\/\/www.espai.es\/blog\/2013\/01\/optimiza-tu-css\/#primaryimage"},"thumbnailUrl":"http:\/\/www.espai.es\/blog\/wp-content\/uploads\/2013\/01\/optimiza_tu_css-300x200.png","keywords":["CSS","HTML","optimizar","web"],"articleSection":["Dise\u00f1o Web"],"inLanguage":"es"},{"@type":"WebPage","@id":"https:\/\/www.espai.es\/blog\/2013\/01\/optimiza-tu-css\/","url":"https:\/\/www.espai.es\/blog\/2013\/01\/optimiza-tu-css\/","name":"Optimiza tu CSS - Blog Escola Espai","isPartOf":{"@id":"https:\/\/www.espai.es\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.espai.es\/blog\/2013\/01\/optimiza-tu-css\/#primaryimage"},"image":{"@id":"https:\/\/www.espai.es\/blog\/2013\/01\/optimiza-tu-css\/#primaryimage"},"thumbnailUrl":"http:\/\/www.espai.es\/blog\/wp-content\/uploads\/2013\/01\/optimiza_tu_css-300x200.png","datePublished":"2013-01-09T14:50:54+00:00","dateModified":"2014-02-28T21:00:33+00:00","author":{"@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/12b6fc1aa9d549637166ed59d78390f9"},"breadcrumb":{"@id":"https:\/\/www.espai.es\/blog\/2013\/01\/optimiza-tu-css\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.espai.es\/blog\/2013\/01\/optimiza-tu-css\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.espai.es\/blog\/2013\/01\/optimiza-tu-css\/#primaryimage","url":"http:\/\/www.espai.es\/blog\/wp-content\/uploads\/2013\/01\/optimiza_tu_css-300x200.png","contentUrl":"http:\/\/www.espai.es\/blog\/wp-content\/uploads\/2013\/01\/optimiza_tu_css-300x200.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.espai.es\/blog\/2013\/01\/optimiza-tu-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.espai.es\/blog\/"},{"@type":"ListItem","position":2,"name":"Optimiza tu CSS"}]},{"@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\/12b6fc1aa9d549637166ed59d78390f9","name":"Antonio","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d9c296a0ba9a57dd139f1c02aeeb960b9d3d89e21210644d50bfd015643626d8?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d9c296a0ba9a57dd139f1c02aeeb960b9d3d89e21210644d50bfd015643626d8?s=96&d=mm&r=g","caption":"Antonio"},"sameAs":["http:\/\/www.espai.es"],"url":"https:\/\/www.espai.es\/blog\/author\/antonio\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/678","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\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/comments?post=678"}],"version-history":[{"count":4,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/678\/revisions"}],"predecessor-version":[{"id":2087,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/678\/revisions\/2087"}],"wp:attachment":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/media?parent=678"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/categories?post=678"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/tags?post=678"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}