Avisar de contenido inadecuado

Los mejores frameworks CSS (y porqué no los uso)

{
}

La intención de un framework es principalmente ahorrar tiempo y minimizar el riesgo de errores en el desarrollo de aplicaciones. Los frameworks nos evitan, sobretodo en los momentos iniciales del desarrollo de una aplicación, repetir código para construir la base y nos permiten conseguir ciertas funcionalidades o módulos genéricos de forma más rápida y sencilla. Así como hay frameworks para PHP (CakePHP, CodeIgniter, The Zend Framework...) o para Javascript (como no... JQuery), también existen varios frameworks para CSS. Veamos en qué consisten.

¿Qué es un framework CSS?

Igual que sus parientes orientados a lenguajes de servidor o cliente, el objetivo de un framework CSS será ahorrarnos realizar las tareas básicas al trabajar con hojas de estilo. Normalmente los frameworks CSS se componen de uno o varios archivos con declaraciones predefinidas que incluyen:

  • CSS Reset: Ya hablamos de las ventajas de resetear los estilos al empezar a trabajar la maquetación de una página, en nuestra lista de consejos y buenas prácticas para CSS.  Resetear los estilos nos permitirá homogeneinzar, a priori, las posibles diferencias de visualización entre navegadores, unificando las propiedades básicas de los elementos: márgenes, paddings, tamaños, formatos, etc.
  • 51249-44848.jpgLayout:  Una parte de los frameworks va dirigida a una de las tareas más árduas a la hora de maquetar cualquier diseño: conseguir un determinado layout, más o menos complejo, que sea, además de óptimo, "cross-browser", e.d. compatible con todos los navegadores. Suelen disponer de múltiples opciones combinables para conseguir layouts complejos: múltiples columnas, anchos fijos, elásticos, líquidos...
  • Tipografías: Una gestión genérica de las tipografías que se usarán en la página. De nuevo, no sólo se trata de aplicar un uso inteligente de fuentes y tamaños, si no de unos altos de línea, márgenes, paddings... consistentes, que ayuden a  mantener un correcto ritmo vertical en la página.

Ventajas de usar un framework CSS

  • Permite agilizar el desarrollo, sobretodo en sus momentos iniciales.
  • Te ahorra las habituales batallitas entre navegadores para conseguir que tus layouts sean "cross-browser".
  • Partes de una base normalizada / homogeneizada sobre la que desarrollar un trabajo adicional.
  • Si el framework CSS está bien documentado, agiliza el trabajo en un equipo relativamente grande.

Entonces... !¿Porqué no los uso?!

Eso me gustaría saber... No, es broma. De verdad que, aunque en el caso de frameworks de desarrollo para lenguajes como PHP o Javascript me parece una ventaja a la que sacar partido, creo que en el caso de las hojas de estilo, las ventajas no son suficientemente potentes como para superar el peso de las desventajas, que para mi son:

  • Curva de aprendizaje. Algunos frameworks son realmente complejos, y es necesaria bastante dedicación  y pruebas para llegar a controlarlos bien, conocer y usar todo su potencial.
  • Puede afectar negativamente a la semántica de tu marcado HTML. La mayoría de los frameworks contienen definiciones demasiado genéricas que además han sido pensadas y nombradas pensando únicamente en la apariencia que tendrán. Y si recordamos, uno de los consejos en el artículo que citábamos antes era "Sé descriptivo en los nombres y huye de usar aquellos que se refieran a la apariencia de los elementos." Meeec. Va a ser que un contenedor llamado "big-square-at-the-left" no va a resultar muy práctico si dentro de unos meses debemos cambiar el layout de nuestra página. ¿No habíamos quedado que la ventaja principal de las hojas de estilo era separar contenido y presentación?
  • Gran parte del código nunca será utilizado. Los frameworks intentan prever todas las situaciones y contienen muchas definiciones genéricas que posiblemente nunca lleguemos a utilizar. Esta desventaja sería en realidad aplicable también a otro tipo de frameworks. Con la diferencia que un framework PHP por ejemplo, el cliente no debe descargar TODO el framework para que la aplicación funcione: se ejecuta en el servidor. El CSS en cambio sí debe descargarse al navegador, con lo que debemos cuidar su extensión si no queremos afectar negativamente al rendimiento.
  • Por último, y posiblemente la más importante al menos para mi, es que usar un framework CSS te corta las alas a la hora de aprender, de entender cómo funcionan realmente las hojas de estilo. Muchas de las cosas que sé ahora las aprendí mientras me rompía los cuernos tratando de solucionar absurdos bugs de render de Explorer, o de conseguir flotar aquella caja rebelde, o buscando el motivo por el cual la cascada se iba a tomar viento al definir tal o cuál color. En mi opinión, condiciona excesivamente el trabajo del desarrollador.

Lista de frameworks CSS

De todas formas, te animo a que conozcas y pruebes algunos de estos frameworks ( quizás entonces entiendas mis motivos... o pienses que estoy loco )

Conclusión 

Aunque no recomiende su uso, sí que hay algunas ideas que subyacen al trabajo con frameworks con las que comulgo, y te invito efusivamente a seguir, como son:

  • El reseteo de los estilos al principio de tus CSS.
  • La creación de una librería de "helpers" o snippets de código y declaraciones CSS que te sirvan como referencia para resolver situaciones comunes.
  • Definir y mantener una estructura y una sintaxis del documento CSS que sea consistente, y aplicarla siempre en todos tus proyectos.

Otros artículos interesantes que inspiraron este post

{
}
{
}

Comentarios Los mejores frameworks CSS (y porqué no los uso)


Joder muchas gracias!!! LLevo mucho tiempo intentando entender esa palabra que anda por todas partes "frameworw" y siempre acabo hecha un lío. Soy feliz :) por fin lo entiendo. Gracias por esa explicación tan sencilla y sin rodeos.

Saludos.

xakybride xakybride 13/03/2008 a las 11:52


Muy buenas xakybride!



Me alegro de que te haya resultado útil. Un saludo y hasta otra! 

[...]ks CSS">Frameworks CSS http://www.cssdemos.com/2007/12/29/hands-on-with-blueprint-a-css-framework/ http://www.pixelovers.com/mejores-frameworks-css-motivos-no-uso-ninguno-51249 http://www.torresburriel.com/weblog/2007/01/10/framework-css-primera-parte/ http://www.kabytes.com/programacion/los-12-mejores-css-frameworks/ 1. Elements CSS Frameworks 2.[...]
[...]-- .entry-head --> Más que un comentario es una referencia y es que en Pixelovers se hace una breve definición sobre en qué consiste el uso de frameworks en CSS que me parece muy clara y didáctica. Además, el autor da su opinión sobre el porqué no utilizarlos. En este caso, como estoy total y absolutamente de acuerdo con lo que comenta me limito a enlazaros a la entrada. Eso sí, nunca utilizaría un framework completo pero si consu[...]
muy buena explicaciónn!!!
por fin se me aclararon las dudas con esto de los framework, justo lo que andaba buscando. muy buena página te seguiré leyendo....

Gracias y
Saludos!!
Santtiago Santtiago 27/12/2008 a las 04:46
[...]/en/">YAML para nuestros desarrollos. Mucho se ha debatido sobre usar o no usar un framework, pero no es lo que nos ocupa ahora. En nuestro caso os puedo decir que agiliza nuestros desarrollos, más adelante es posible que me extienda un poco más sobre el asunto y os doy pros y contras con detalle. Lamentablemente, aunque nos gusta mucho y nos sentimos cómodos con él, sólo le veíamos una pega, y es que para cargar todas las hojas de estilo de las que hace uso utiliza @import. Hace ya algún tiempo[...]
[...]"); this.style.cursor="hand"; this.style.textDecoration="underline"; this.style.borderBottom="dotted 1px"; " href="http://www.pixelovers.com/mejores-frameworks-css-no-uso-51249#">momentos iniciales del desarrollo de una aplicación, repetir código para construir la base y nos permiten conseguir ciertas funcionalidades o módulos genéricos de forma más rápida y sencilla. Así como hay frameworks para PHP (CakePHP, CodeIgniter, The Zend Framework…) o para Javascript (como no… JQuery), también ex[...]

La semantica esta en las etiquetas y en el contenido no en la CSS. Si tienes conocimientos básicos de CSS y HTML es suficiente para enteder lo que hace un framework CSS. Puedes controlar todo el código NO HAY NADA COMPILADO!!!

Saludos! 

luis luis 08/06/2011 a las 17:05

Para mi es bueno conocer de manera eficaz como elaborar hojas de estilos propias, pero usar un framework te ayuda si necesitas un desarrollo mas rapido, para romper la barrera de la curva de aprendizaje seria lo mas recomendable modificar los frameworks a tu medida. Yo uso el YUI. me pareceia genial y es muy sencillo de usar.

Carlos Carlos 07/08/2011 a las 02:03
Muy bien argumentado todo. Y de acuerdo contigo en su principal problema, provocan que los nuevos programadores aprendan menos del funcionamiento interno de las cosas, tú pones y se dibuja una caja con bordes redondeados y sombreado super chula... y quizá no sabes que se ha hecho a base de border-radius y box-shadow, y que cada navegador tiene instrucciones propietarias para hacer lo mismo, etc.

Aún así, tampoco se trata de pasar de ellos, lo útil es hacerte el tuyo con lo mejor de los frameworks que hay por ahí, y tu propio código, y siempre intentando comprender claro...
Aritz Aritz 13/09/2012 a las 21:51

Deja tu comentario Los mejores frameworks CSS (y porqué no los uso)

Identifícate en OboLog, o crea tu blog gratis si aún no estás registrado.

Avatar de usuario Tu nombre