¿Cuál es el mejor marco CSS? ¿Vale la pena el esfuerzo?

Al leer en otro foro, me encontré con el mundo de CSS Frameworks. El que he estado mirando específicamente es BluePrint . Me preguntaba si alguien más se había encontrado con marcos CSS, sugiera cuál es el mejor y si vale la pena el esfuerzo.

Los 'frameworks' de CSS están completamente perdiendo el punto.

CSS no es como JavaScript, donde puede incluir una biblioteca / marco base y luego llamar a funciones y objetos para realizar un trabajo de nivel superior. Todo lo que un marco de CSS puede darle son reglas declarativas: algunas cosas predeterminadas para restablecer las reglas del navegador, algunos estilos de clase a los que debe obligarse a crear su página y reglas de diseño que usan 'float' y 'clear'. Puede escribir eso en unas pocas líneas de CSS usted mismo en lugar de incluir la hinchazón de un centenar de reglas marco.

El tema del 'diseño de cuadrícula' en particular se remonta a los viejos tiempos de mezclar su presentación con su marcado. 'div class = "span-24"' no es mejor que una tabla, tendrás que volver allí y cambiar el marcado para afectar el diseño. Y todos los marcos que he visto se basan en cajas flotantes de píxeles fijos, lo que hace imposible crear un diseño líquido accesible en una amplia gama de tamaños de ventana.

Es una creación al revés, de uso solo para alguien demasiado asustado para escribir una regla CSS.

Por lo tanto, nadie ha respondido a esta pregunta todavía (aunque he visto algunos votos a favor), así que Al menos intentaré abordar la segunda pregunta de este mensaje.

Los marcos CSS son geniales; como cualquier otro marco, reducen el tiempo de desarrollo y le permiten trabajar de inmediato en el diseño y CSS específicos del sitio. Piensan en decisiones difíciles para que usted no tenga que hacerlo.

Desafortunadamente, hay dos desventajas de usar un marco (en general):

1. El marco dicta la estructura general y la mecánica de su código CSS. Ahora, no estoy hablando de un reinicio de CSS (estos son útiles por derecho propio, pero no son verdaderos marcos); Estoy hablando de un marco honesto a bueno, que ya ha tomado las decisiones sobre qué etiquetas semánticas vas a usar en tu documento, etc. Como tal, dependes del marco y cuando hay un error en el marco, normalmente tendrá que arreglarlo usted mismo.

2. Los marcos no son una excusa para ignorar los problemas de CSS avanzado / entre navegadores. Invariablemente se encontrará con ellos, tal como lo haría trabajando con un marco PHP o JavaScript. Y necesitas saber cómo lidiar con ellos. Hay un dicho común que dice que primero debes escribir tu propio marco, antes de usar el de otra persona.

Echando un vistazo rápido a Blueprint, no lo llamaría realmente un marco; tal vez un reinicio con algunos extras adicionales en la parte superior.

He visto BluePrint y algunos otros y el único 'marco' de CSS que recomendaría es YUI Grids

Pros:

• Escrito por uno de los mejores ingenieros frontend que existen (OMI) (Nate Koechley)
• Muy pequeña. 4 KB
• Muy flexible (1000 diseños diferentes)
• Admite diseños de ancho fluido (100%), así como diseños de ancho fijo preestablecidos en 750px, 950px y 974px, y la capacidad de personalizar fácilmente a cualquier número.
• Admite una fácil personalización del ancho para diseños de ancho fijo.
• Las columnas de la plantilla son independientes del orden de origen, por lo que puede colocar su contenido más importante primero en la capa de marcado para mejorar la accesibilidad y la optimización de motores de búsqueda (SEO).
• Pie de página que se borra automáticamente. No importa qué columna sea más larga, el pie de página permanece en la parte inferior.
• Los diseños inferiores al 100% se centran automáticamente.
• Nombres de clase algo semánticos (mejor que arriba, izquierda, derecha, etc.)

Contras:

• Muchas marcas adicionales en comparación con HTML y CSS escritos a mano
• Se necesita algo de aprendizaje para descubrir cómo hacer diseños complejos

Como han publicado otros, no hay "marcos" reales para CSS. Restablecer las hojas de estilo también ayuda mucho con el diseño. Por lo general, me quedo con una hoja de estilo de reinicio y voy desde allí. Pero si no tiene mucha experiencia en CSS, YUI Grids podría ahorrarle algo de tiempo.

Compass es un marco CSS real en el sentido de que le brinda no solo plantillas (tanto YUI como blueprint), sino también construcciones reutilizables y declaraciones de nivel superior, al mismo tiempo que le brinda una sintaxis CSS familiar.

Tómese el tiempo para estudiar y comprender (¡realmente comprender!) Algunos marcos CSS como BluePrint y YUI, y reinicios CSS como el de Eric Meyer. Luego, tómese el tiempo para armar su propio restablecimiento y / o marco según sus métodos de trabajo y el tipo de sitios que construya.

Personalmente, utilizo la mayor parte del restablecimiento de Eric Meyer con algunas clases y restablecimientos propios, además de algunas ideas de BluePrint y YUI.

Recientemente vi a Eric Meyer dar una presentación sobre CSS Frameworks en la que hacía la pregunta: "¿cuál es el más adecuado para mí?" Luego respondió a la pregunta mostrando una diapositiva en blanco. Su punto era que ciertamente hay algunos conceptos útiles incorporados en la mayoría de los reinicios y marcos, pero el que más le conviene es el que escribe usted mismo (vale la pena el esfuerzo).

¿Por qué usar 'frameworks' css?

• Si está presionado por el tiempo.

• Si no conoce css y no conoce a alguien que pueda escribirlo por usted.

• Si no eres demasiado valioso con los estándares, etc.

Conozco programadores que han estado muy contentos de usar blueprint o 960, ya que les permite armar un diseño por su cuenta, sin recurrir a un desarrollador front-end. Esto es ideal para proyectos personales o startups con recursos limitados.

Si ya tiene un conocimiento decente de CSS, entonces presumiblemente ya tiene una biblioteca decente de diseños de stock, por lo que claramente no necesitará un marco.

Sin embargo, si eres un principiante y solo necesitas poner algo en funcionamiento, entonces puedes recurrir a un marco, ya que hace que el diseño básico sea mucho más simple y también aborda la compatibilidad del navegador.

Habiendo dicho todo eso, muchos frameworks listos para usar hacen uso de nombres de clases horribles, etc. Conozco algunos sitios web que han tomado un framework como punto de partida y luego lo han personalizado con su propia clase y etiquetas de identificación. Pero claramente también hay un poco de trabajo involucrado en esa reescritura. Usar algo como Compass, como se mencionó anteriormente, ayuda a evitar eso.

Entonces, los frameworks CSS pueden ahorrarle tiempo a costa de la semántica. También pueden dañar su conocimiento de CSS, pero eso depende más de cuánto invierta en aprender el tema en general. Si los utiliza depende de usted.

Tendría que preguntarse qué tan efectivos son los marcos disponibles para resolver sus problemas. ¿Cumplen con sus requisitos?

Al utilizar un marco, puede establecer algunas reglas o detalles a nivel de píxel y dedicar el resto de su tiempo a implementar y producir. Es un impulso de productividad masivo. Si pasa tiempo ajustando las cosas unos pocos píxeles al final del proyecto (microgestión del diseño), es una señal de que un marco puede ser útil.

El consejo n. ° 17 en El programador pragmático dice: "Programa cerca del dominio del problema". El uso de una capa de abstracción puede acercarlo a resolver los problemas reales de diseño. Por ejemplo: es posible que pueda concentrarse en mejorar la experiencia del usuario con el tiempo adicional que tiene en lugar de pequeños ajustes de píxeles.

Esto no quiere decir que deba sacrificar la calidad por la cantidad. Se trata de eficiencia.

En un proyecto reciente, creé mi propio marco porque teníamos recursos muy limitados y los marcos populares no hacían lo que yo quería. Luego, configuré los PSD del equipo de diseño para que se ajustaran a la misma cuadrícula que implementé.

Un marco no tiene por qué ser una implementación particular de CSS. No tiene que ser algo hinchado que hayas descargado de Internet o algo que implemente ideas obsoletas. Es solo una técnica para hacer un trabajo. No me sorprendería si algunos programadores ya tienen sus propios marcos y ni siquiera lo saben. De hecho, si considera el DOM como un conjunto de elementos predeterminados que amplía con CSS, entonces es un marco por definición.

De hecho, pasé una buena parte de las últimas 24 horas investigando esto por mi cuenta, je. Mi conclusión fue que un buen reinicio (utilicé YUI Reset ), y tal vez algo más para establecer las cosas de línea de base (las fuentes YUI valieron la pena en mi caso; tal vez los "extras" de BluePrint estarían en el tuyo) es una buena idea. Pero, un "marco" --- que generalmente es algo así como las cuadrículas YUI --- es demasiado restrictivo, lo que te obliga a usar sus nombres de clase, identificadores, etc. y rara vez encaja en tu sitio como lo haría el CSS hecho a mano.

En resumen: los reinicios parecen bastante buenos; es bueno eliminar toda la variación en, por ejemplo, margen vs relleno para listas, o espaciado de párrafos, o lo que sea. Pero eso es todo lo que yo diría.

No lo he usado, sí, pero creo que emastic puede ser una buena alternativa que vale la pena comprobar. es similar al blueprint en alcance, pero también admite diseños elásticos (de ahí el nombre) y puede especificar valores en px, em o%, e incluso mezclarlos.

Brújula, creo que es increíble. Asegúrate de ver el screencast .

Estoy usando 960.gs para algunos sitios web y lo encuentro muy simple y fácil y vale la pena el esfuerzo. Me ahorra mucho trabajo en el diseño. Asegúrese de verificar el generador de CSS personalizado que desaparece con el ancho fijo de 960 píxeles.

Creo que esta presentación en video del CEO de Site Point, Kevin Yank, responderá a su pregunta. Realmente recomiendo verlo.

Compass le permite cambiar el nombre de las clases y los identificadores de su marco con sus propios nombres semánticos, por lo que es posible que desee verificarlo. También proporciona acceso a cosas que simplemente no obtienes con CSS simple, como mixins.

Estoy asombrado por los llamados "expertos en CSS" que critican estas herramientas sin haberlas profundizado y utilizado. ¿Son imprescindibles? No. Si te gusta tu propio marco (tienes uno propio, ¿verdad? Un marco CSS es solo una biblioteca cuidadosamente definida; todos deberían usar uno) entonces, por supuesto, sigue usándolo. Nadie te está obligando a usar otros marcos y no veo que la gente que usa marcos les diga a los puristas de CSS que lo están "haciendo mal".

Criticar los marcos desde ese punto de vista solo revela una inseguridad y una ignorancia. Por ejemplo, la noción es ridícula de que una persona use una herramienta como Compass sin saber CSS. ¿Te das cuenta, verdad, de que un marco generalmente no escribe todo tu CSS por ti? Aún puede romper y escribir su propio CSS dentro del contexto de la mayoría de los marcos. De hecho, si no conoce CSS, puede frustrarse rápidamente.

En lo que a mí respecta, aprecio tener un marco porque ya está documentado, probado por cientos de otros usuarios y puedo aplicar mis propias clases e identificadores a través de Compass. Si necesito algo para lo que el marco no es adecuado, codificaré el mío.

Matt Raible de AppFuse tuvo un concurso de CSS Framework hace un tiempo para desarrollar CSS Frameworks para AppFuse. Los resultados se publican aquí . Hay algunas variaciones y yo mismo he usado algunas porque uso AppFuse y las encuentro muy buenas.

Debo agregar que estos marcos CSS funcionan bien porque se usan en aplicaciones temáticas. Es decir, si se apega a las reglas, cambiar de una a otra es tan simple como cambiar un valor en un archivo de propiedades.

He utilizado BluePrint con mucho éxito en un sitio (podría mencionar el sitio aquí, pero estoy seguro de que la publicación se marcaría como spam). Sin embargo, no estoy seguro de si lo usaré en el futuro porque una de las ideas de CSS que pensé era no tener la lógica de diseño codificada. No debería tener elementos CSS llamados span-24 y span-12 para definir el diseño, sino algo como searchBox y mainContent. Al menos así es como lo veo yo.

Buen enlace que encontré: Los 12 mejores marcos CSS y cómo entenderlos

Aquí está mi publicación de blog sobre CSS Frameworks ¿ Cuándo usar CSS Framework?

La única forma que conozco de utilizar un marco CSS y retener el marcado semántico es utilizar una abstracción de nivel superior. Por el momento, Compass es el único que conozco que es lo suficientemente maduro para usar, pero Nicole Sullivan parece estar haciendo algunas cosas interesantes con su proyecto "CSS orientado a objetos".

Encuentro que el uso inteligente de Compass de los mixins de Sass es brillante, y un gran paso hacia el Santo Grial del marcado semántico mantenible. No creo que me gustaría usar un marco como Blueprint o YUI sin una abstracción como Compass para mantener las clases de presentación fuera del marcado.

Por cierto, hay un marco CSS atractivo llamado Elastic que se ve lo suficientemente bien como para considerar agregarlo a Compass.

Creo que CSS se trata de simplicidad. El objetivo es tener uno o dos lugares para verificar cuando hace referencia entre el HTML y su hoja de estilo. Agregar más líneas, y especialmente líneas que no escribió y con las que probablemente no esté familiarizado, aumentará exponencialmente la complejidad y, por lo tanto, la volatilidad del código CSS.

Sugeriría sus diseños a medida que los escribe y desarrolla un sistema de plantilla genérico a partir de eso. Si bien me encanta hacer CSS más modular, a menudo y dependiendo del diseño, su CSS puede ser muy específico para cada caso y no modular en absoluto.

He usado Blueprint en algunos sitios únicos y definitivamente ahorró tiempo, principalmente en las pruebas entre navegadores.

Definitivamente apesta agregar código de presentación a su marcado, aunque en el lado positivo es legible. Si bien me encanta el concepto de "puedes rediseñar sin tocar el marcado", si estás produciendo un sitio en el que eso realmente no va a suceder de todos modos y solo necesitas hacerlo ayer, Blueprint es algo para mirar.

Sin embargo, también hay compensaciones en los tipos de diseños que puede crear. Si configura el sitio desde el principio en una cuadrícula estricta, será mucho más fácil transponerlo al marco con un mínimo de esfuerzo.

He usado BluePrint y YUI pero siempre me frustran algunos de los nombres que dan a sus identificaciones y clases.

Para cada uno lo suyo, pero prefiero hacer las cosas desde cero, pero después de un tiempo desarrollas un proceso en el que usarás tu trabajo anterior y lo aplicarás a nuevos proyectos y solo harás algunos ajustes para que el sitio web se vea como lo harías. gusta a.

Asegúrese de usar una buena convención de nomenclatura, en caso de que alguien más en el futuro entre a editar el CSS, entonces tendrán una buena idea de a qué se refiere cada nombre de estilo.

Craig,

Compass es lo que está buscando: le permite cambiar el nombre de sus clases Blueprint CSS como "span-24" con sus propios nombres. También amplía la funcionalidad CSS con variables y mixins. En verdad, aquellos que juzgan prematuramente los frameworks sin haber comprobado Compass están "perdiendo el punto". Es algo así como esas personas que nos dijeron hace años que nos estamos perdiendo el punto al usar CSS en lugar de tablas HTML para nuestros diseños.

-Mate

visite http://www.ez-css.org/ . uno de los frameworks CSS más fáciles y ligeros para trabajar. :)

Eche un vistazo a esta demostración: http://www.richstyle.org/demo-web.php Este marco se basa en la idea de que "las etiquetas HTML deberían ser suficientes". Creo que la reutilización es el factor más importante para elegir un componente de software, incluido un marco web. Para los desarrolladores de frameworks web, cuanto más se comprometa con los estándares, más se garantiza la reutilización.