Geek the Planet


CSS no image

Published on marzo 21st, 2008 | by Angelfire

3

CSS Frameworks I

Sonará muy extraño esto de CSS frameworks, pero creo que es el nombre mas adecuado, según la definición de Wikipedia:

En el desarrollo de software, un framework es una estructura de soporte definida en la cual otro proyecto de software puede ser organizado y desarrollado. Típicamente, un framework puede incluir soporte de programas, bibliotecas y un lenguaje interpretado entre otros software para ayudar a desarrollar y unir los diferentes componentes de un proyecto.

Apenas me dí cuenta esta que también podiamos tener frameworks para CSS, es curioso porque yo ya venia utilizando esto de alguna manera en mi proyecto actual (el theme de este blog), lo que estaba haciendo era simplemente separar el style.css en 2 partes, una parte que contenia las reglas generales, el layout, las reglas tipográficas y las reglas para los forms, la otra parte contenia los colores e imagenes, con esto lo que esta haciendo era dejar el Style.css intacto y cada vez que quisiera tener un nuevo diseño basado en la misma estructura, simplemente creaba una nueva hoja de estilo en la que modificada un par de líneas de CSS y ya.

Rebujando en unas de las páginas con mas recusos que conozco, me encontré con un post que me dejo mal parado porque ya lo habian descubierto primero que yo :S, y pues me puse a ver y era algo lógico que debí haber hecho hacia muchisimo tiempo, cada vez que inicio un nuevo proyecto toca iniciar con una hoja de estilos en blanco (lo que no es muy alentador) y empezar a repetir muchas líneas que antes también me habia tocado digitar.

Al grano, no es necesario ser grandes expertos para crear nuestros propios CSS Frameworks, es tan simple como aplicar un poco de lo que yo hice y un poco más de habilidad, podemos en vez de tener 1 hoja de estilos con n-mil líneas de código, tener varias divididas así por ejemplo:

  • reset.css: Estoy segurisimo que muchos no saben que es necesario tener esto del reset, es fundamental para que nuestro sitio web luzca de alguna manera parecido en varios navegadores. Por defecto los navegadores vienen con valores diferentes para la margin, el padding, el line-height, etc, por esta razón es necesario un Reset Global.
  • general.css: Algunas normas generales.
  • layout.css o grid.css: Reglas para los layouts.
  • form.css: Para el estilo de nuestro formularios.
  • ie.css: Donde indicaria los cambios que son necesarios para este problematico “navegador”.

Este es un pequeño ejemplo de como podria crear su propio framewok, sin embargo puede ir mucho mas allá y crear muchas otras hojas de estilo, por ejemplo una print, una para dispositivos móviles, entre otras.

Ventajas de los Frameworks CSS

  • Puede incrementar la productividad y evitar errores cómunes: Si tienes varios sitios web con características similares, esto podria acelerar el proceso de desarrollo y evitar errores que cometemos muy a menudo.
  • Normalizar código/clase base: Si usted siempre utiliza los mismos ID´s para las clases, puede crear un estándar para futuros proyectos, esto ayudará a que no haya necesidad de mover mucho código la próxima vez.
  • Mejorar el flujo de trabajo en un equipo: Si su Framework CSS está bien documentado, puede ser utilizado como estándar para trabajos en grupo, esto evitará malos entendidos, errores y garantizará cumplir con los plazos sin comprometer con la calidad del producto.
  • Obtener una compatibilidad óptima con el navegador: Como ya tiene definidas las reglas para los navegadores no tiene muchan necesidadde preocuparse por los problemas de compatibilidad y podrá empezar a codificar de inmediato.
  • Obtener un código limpio, bien estructurado y completo: Como ya tiene una base, solo necesitará entrar a definir elementos que hacen falta.

Y como siempre, las desventajas, espero que no lo desalienten a crear su propio Framework.

Desventajas de los Framewoks CSS

  • Necesitaras mucho tiempo en entender el framework: Si eres un usuario intermedio, el tiempo necesario para entender la arquitectura del framework será algo mayor que empezar un proyecto desde cero, esto sólo se presentaria en proyectos grupales.
  • Necesitaras estar muy familiarizado con la arquitectura del código: Este punto va asociado directamente con el anterior, es necesario comprender correctamente como está estructurado el código para poder saber como construir correctamente un nuevo proyecto.
  • Es posible heredar bugs o errores: Si utilizas un Frameworks desarrollado por otro, es posible que este haya cometido algún error, que desencadenaria que usted produciera más errores.
  • Trabajar con código demasiado robusto: Es muy común, sobre todo en Frameworks o Librerias Javascript, ver que estos son demasiado robustos, lo que implica que la gran parte de ese código nunca será utilzado, esto afecta principalmente al cliente, ya que debe descargar librerias pesadas que no usará.
  • CSS no puede ser marcado semánticamente: Es claro que CSS y (X)HTML van de la mano, (X)HTML es un lenguaje de naturaleza semántica, la que es imposible determina con un Framework. Un Framework CSS elimina en una gran cantidad el valor de la marcación semántica, lo cual debe evitarse.

Creo que esto es todo en esta primera entregar, en un par de minutos continuaré con la segunda y mis conclusiones son pocas, estoy absolutamente a favor del uso de Frameworks, teniendo en cuenta que ya llevo cierto cierto de diseñador no me tomaria mucho tiempo entender un nuevo framework, y pillar errores básicos, me pregunto que seria el mundo del AJAX son frameworks como Moontools o jQuery. Está claro que debemos documentarnos correctatemente antes de utilizar cualquier herramienta.

Leer Más: Framework
CSS Frameworks + CSS Reset: Design From Scratch
Why I don’t use CSS Frameworks
Please do not Use CSS Frameworks

Tags: , , , ,


About the Author

Systems Engineering, Computer Systems Specialist, Social Engineering Specialist. Social Media Analyzer. Usability and SEO enthusiasm (Este es mi perfil de Twitter...)



3 Responses to CSS Frameworks I

  1. Pingback: CSS Frameworks II | gEEK tHE pLANET

  2. Pingback: Top 12 CSS Frameworks | gEEK tHE pLANET

  3. Pingback: Frameworks CSS Responsive

Back to Top ↑