{"id":14,"date":"2008-01-12T14:20:17","date_gmt":"2008-01-12T13:20:17","guid":{"rendered":"http:\/\/bezerik.es\/me\/2008\/01\/12\/como-optimizar-las-hojas-de-estilos-css\/"},"modified":"2008-11-17T11:43:41","modified_gmt":"2008-11-17T10:43:41","slug":"howto-optimizacion-cascading-style-sheets-css","status":"publish","type":"post","link":"http:\/\/bezerik.es\/me\/howto-optimizacion-cascading-style-sheets-css\/","title":{"rendered":"Como optimizar las hojas de estilos (CSS)"},"content":{"rendered":"

Hace poco me incorpor\u00e9 a un proyecto web que ya lleva un a\u00f1o en desarrollo, el problema es que en total tiene 5 hojas de estilo<\/strong>, una por cada uno de los programadores que han ido aportando su c\u00f3digo y al final, el resultado son unas hojas de estilos, sin orden ni control y que adem\u00e1s no validan (un desastre).<\/p>\n

Para todos aquellos que necesit\u00e9is ordenar, optimizar y limpiar hojas de estilo<\/strong>, os presento la herramienta on-line<\/strong> Clean CSS<\/a>. \u00a1Creedme!, os puede facilitar mucho vuestro trabajo.<\/p>\n

Antes de utilizar esta herramienta, vuestro c\u00f3digo CSS<\/abbr> tiene que estar bien formado. Esta herramienta no corrige fallos (no es un validador). Para aseguraros de que vuestro c\u00f3digo es v\u00e1lido, utilizad el W3C Validator<\/a>.<\/p>\n

\"CleanCSS\"<\/p>\n

Clean CSS<\/strong> nos permitir\u00e1 personalizar muchas opciones, entre ellas est\u00e1n: ordenar las propiedades, ordenar los selectores, comprimir colores, comprimir font-weight, mantener los comentarios, eliminar propiedades inv\u00e1lidas dependiendo de la versi\u00f3n de CSS, etc. Cabe destacar sobre todas ellas el aspecto final de nuestra hoja de estilos, es decir, el grado de compresi\u00f3n del archivo CSS<\/strong>, que depender\u00e1 (en gran medida) del aspecto\/formato que tenga. Por ejemplo, no es lo mismo este aspecto compacto:<\/p>\n

body,h1,h2,h3,h4,h5,h6 {margin:0;padding:0;}\r\nh1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}<\/pre>\n
que este otro, mucho mas claro y espaciado:<\/p>\n
body,h1,h2,h3,h4,h5,h6\r\n{\r\n margin:0;\r\n padding:0;\r\n}\r\nh1,h2,h3,h4,h5,h6\r\n{\r\n font-size:100%;\r\n font-weight:400;\r\n}<\/pre>\n
Aunque podemos escoger entre los siguientes aspectos\/formatos predefinidos:<\/p>\n
    \n
  • Highest (no readability, smallest size)<\/li>\n
  • High (moderate readability, smaller size)<\/li>\n
  • Standard (balance between readability and size)<\/li>\n
  • Low (higher readability)<\/li>\n
  • Custom (enter below)<\/li>\n<\/ul>\n
    Como no acababa de gustarme ninguno, opte por personalizar uno propio que es bastante parecido a la opci\u00f3n Standard y que a continuaci\u00f3n os dejo. Para utilizarlo deb\u00e9is seleccionar la opci\u00f3n \u00abcustom\u00bb y pegarlo en el textarea posicionado arriba a la derecha :<\/p>\n
    <span class=\"at\">|<\/span> <span class=\"format\">{<\/span>\r\n|<span class=\"selector\">|<\/span> <span class=\"format\">{<\/span>\r\n|    <span class=\"property\">|<\/span><span class=\"value\">|<\/span><span class=\"format\">;<\/span>\r\n|<span class=\"format\">}<\/span>|\r\n|\r\n<span class=\"format\">}<\/span>\r\n||<\/span> <span class=\"format\">{<\/span>\r\n|<\/pre>\n
    Finalmente, una vez hall\u00e1is optimizado vuestro c\u00f3digo CSS, ver\u00e9is los resultados que hablan por si solos.<\/p>\n
    [errores 136]\r\nInput:67.981KB, Output:55.608KB\r\nCompression Ratio:18.1% (-12333 Bytes)<\/pre>\n
    \u00bfQue os parece esta herramienta?, \u00bfConoceis alguna mejor?<\/p>\n","protected":false},"excerpt":{"rendered":"
    Hace poco me incorpor\u00e9 a un proyecto web que ya lleva un a\u00f1o en desarrollo, el problema es que en total tiene 5 hojas de estilo, una por cada uno de los programadores que han ido aportando su c\u00f3digo y al final, el resultado son unas hojas de estilos, sin orden ni control y que […]<\/p>\n","protected":false},"author":1,"featured_media":675,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[69,113],"tags":[120,114,119,118,116,117,115],"_links":{"self":[{"href":"http:\/\/bezerik.es\/me\/wp-json\/wp\/v2\/posts\/14"}],"collection":[{"href":"http:\/\/bezerik.es\/me\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/bezerik.es\/me\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/bezerik.es\/me\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/bezerik.es\/me\/wp-json\/wp\/v2\/comments?post=14"}],"version-history":[{"count":3,"href":"http:\/\/bezerik.es\/me\/wp-json\/wp\/v2\/posts\/14\/revisions"}],"predecessor-version":[{"id":80,"href":"http:\/\/bezerik.es\/me\/wp-json\/wp\/v2\/posts\/14\/revisions\/80"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/bezerik.es\/me\/wp-json\/wp\/v2\/media\/675"}],"wp:attachment":[{"href":"http:\/\/bezerik.es\/me\/wp-json\/wp\/v2\/media?parent=14"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/bezerik.es\/me\/wp-json\/wp\/v2\/categories?post=14"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/bezerik.es\/me\/wp-json\/wp\/v2\/tags?post=14"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}