09/04/2014

Ventajas y desventajas de los CSS resets

Ventajas y desventajas de los CSS resets

La técnica CSS reset consiste en sobrescribir los estilos CSS que imponen los navegadores por defecto para poder construir nuestros propios estilos desde cero. Ya conocimos los motivos para implementar esta técnica, pero ahora es momento de analizar sus ventajas y desventajas para evaluar su inclusión en nuestro próximo proyecto.

Ventajas

  • Elimina las diferencias entre navegadores. Con un reseteo preciso y abarcador se elimina la mayoría de las diferencias de interpretación entre los browsers, ya que tamaños, márgenes, grosores, bordes y otros formatos son igualados a un estilo único y homogéneo. Ver: cross-browser testing.
  • Mayor libertad. El reseteo nos brinda una hoja en blanco sobre la que podemos construir nuestros propios estilos sin tener que luchar contra los estilos del browser, que muchas veces son difíciles de identificar (y, por lo tanto, de modificar).
  • Desarrollo más lógico. Una vez agregada la hoja de reset, el proceso final consistirá en agregar nuevos estilos en lugar de sobrescribirlos.

Desventajas

  • Mayor esfuerzo. El CSS reset es un arma de doble filo: sólo nos ahorra tiempo en el caso en que no nos interese conservar los estilos por defecto. Sin embargo, hay estilos que sí puede interesarnos mantener, como por ejemplo las listas de elementos (con viñetas, indentación y otras características útiles «de fábrica»). De ser así, perderemos tiempo restaurando estilos en nuestra hoja.
  • Código «sucio». Si se da el caso mencionado en el primer punto, la redefinición de estilos genera código CSS excesivo y difícil de comprender.
  • Problemas de usabilidad. Algunos estilos a los que habitualmente no prestamos atención deben conservarse. Por ejemplo, quienes navegan con teclado y sin mouse, usando la tecla Tab para desplazarse, necesitan la propiedad CSS que remarca el enlace sobre el que están situados. La mayoría de los desarrolladores olvida redefinir esos estilos.
  • Más peso. Agregar una hoja de estilos de reset agrega peso a la página, aumentando ligeramente su tiempo de carga.

Probablemente la mejor opción sea resetear sólo aquellos estilos que realmente nos causen problemas, y dejar que el browser se encargue de los demás. Si lo que se desea es homogeneizar la presentación de elementos entre browsers pero sin eliminar sus características distintivas, Normalize.css es la alternativa a elegir.

0

angularjs Aplicaciones en Facebook aplicaciones mobile behavioral targeting Botones Call-to-action breadcrumbs breadcrumbs web búsqueda de personal búsqueda facetada Call-to-action buttons Client-side cliente-destacado cms a medida coding comercio electrónico content marketing CSS3 PIE cuanto debe pesar un sitio data-driven web design Datos estructurados Defacement Denegación de servicio Desarrollar una aplicación web desventajas de PhoneGap diseñar newsletters diseño web diseño web argentina diseño web esqueuomórfico Diseño web responsive Diseño web responsivo diseño web santa fe diseño web Smart TV diseño web televisores DOM desde PHP enlaces rotos filtros de búsqueda flash flat web design formularios sitio web fragmentos enriquecidos función de autocompletar futuro de la realidad aumentada html HTML5 html5shiv inbound marketing Initializr interfaces Web para televisores javascript jobs jQuery Mobile Mapbox maquetado html/css maquetador web masonry layout menú de navegación menú desplegable Metodologías ágiles Modernizr MVC Navegación por teclado oferta laboral OpenStreetMap paginas de Facebook Paper js Paper js framework personas Phishing plan de QA Polyfills polymer portfolio-destacados portfolio-inicio programacion de CMS Programadores WordPress página de contacto página de error 404 que es Backbone.js Realidad aumentada Resultados instantáneos server-side skeuomorphic design sliders y usabilidad soporte Internet Explorer Storytelling Underscores usabilidad usabilidad buscadores user-centered design ux velocidad de carga web Vendor prefixes ventajas jQuery Mobile Ventanas integradas versiones antiguas de Internet Explorer WAI-ARIA web components web imprimible Web Semántica WordPress para ecommerce