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 ↑
  • Comentarios recientes

  • Miniposts

    • iOS 8 disponible para descargar

      Hoy se anunció de manera oficial iOS 8, la fecha de llegada será el próximo 17 de septiembre. En iPhonehacks han recopilado los enlaces de descarga directo para los diferentes dispositivos que soportan la nueva versión del sistema operativo. Así que para quienes no desean esperar, ya pueden acceder a la versión Golden Master ...

    • Festigame Colombia 2014

      El festival de videojuegos, cultura gamer y entretenimiento familiar más grande de América Latina ha llegado a nuestro país. Festigame que es un evento creado en Chile en 2012, se ha convertido en el evento anual donde las marcas más importantes de la industria presentan sus últimos productos en el ...

    • Peter Griffin también tiene cuenta en Instagram

      El protagonista de la serie de humor, Padre de Familia, Peter Griffin ha inaugurado su presencia en la red social de fotografía con divertidas fotografías de su vida, y a pesar de ser un personaje de ficción ya ha superado los 200.000 seguidores en tan sólo dos semanas. Son unas fotos bastante divertidas, las ...

    • Manual y documentación de Node.js para Android

      Node.js se ha venido haciendo bastante popular en los últimos años, cada vez son más los usos que como desarrolladores web le damos a esta tecnología. La siguiente aplicación es el manual y la documentación de Node.js, que contiene los siguientes temas: About these Docs Synopsis Assertion Testing Buffer C/C++ Addons Child Processes Cluster Console Crypto Debugger DNS Domain Events File System Globals HTTP HTTPS Modules Net OS Path Process Punycode Query Strings Readline REPL Stream String Decoder Timers TLS/SSL TTY UDP/Datagram URL Utilities VM ZLIB

    • Star Wars Traceroute

      ¿Qué pasa cuando un ingeniero está muy desocupado? pues pasan cosas como esta: Mac y Linux Van a la consola y escriben: traceroute 216.81.59.173 Windows Buscan el CMD y escriben: tracert 216.81.59.173 El resultado es interesante y sorprendente. Si quieren ver la salida de la ejecución del comando, pueden ver el gist Ver más: Beagle Network

  • Comunicados - Notas de Prensa