style section examples div attribute css css-frameworks

section - ¿Cuál es el mejor marco de CSS y vale la pena el esfuerzo?



title tooltip html (23)

Aquí está mi blog sobre Frameworks CSS ¿ Cuándo usar el framework CSS?

Leyendo en otro foro, he encontrado el mundo de CSS Frameworks. El que he estado buscando específicamente es BluePrint . Me preguntaba si alguien más se había encontrado con los marcos de CSS, sugirió cuál es el mejor y si vale la pena el esfuerzo.

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 comprobar el generador de CSS personalizado que se va con el ancho fijo de 960 píxeles.

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

Estoy asombrado por los llamados "expertos en CSS" que critican estas herramientas sin realmente haberlas extraído y utilizado. ¿Son esenciales? No. Si te gusta tu propio marco (si tienes uno propio, ¿verdad? Un marco de CSS es solo una biblioteca cuidadosamente definida, todos deberían usar uno) y luego, de todos modos, sigue usándolo. Nadie te está forzando a utilizar otros marcos y no veo a las personas que usan frameworks decirles a los puristas de CSS que están "haciendo las cosas mal".

Criticar los marcos desde ese punto de vista solo revela una inseguridad así como también una ignorancia. Por ejemplo, la idea es risible que una persona use una herramienta como Compass sin saber CSS. Te das cuenta, ¿verdad, que un marco generalmente no escribe todo tu CSS para ti? Todavía puede salir 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.

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

Craig,

Compass es lo que estás buscando: te permite cambiar el nombre de tus clases Blueprint CSS como "span-24" con tus propios nombres. También expande la funcionalidad de CSS con variables y mixins. Verdaderamente, aquellos que juzgan prematuramente los marcos sin haber examinado Compass están "perdiendo el sentido". Es algo así como esas personas que nos dijeron hace años que nos falta el punto al usar CSS en lugar de tablas HTML para nuestros diseños.

-Mate

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 las líneas que no escribiste y con las que probablemente no estés familiarizado, aumentarán exponencialmente la complejidad y la volatilidad del código CSS.

Sugeriría sus diseños a medida que los escriba y desarrolle 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 de cada caso y no modular en absoluto.

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é Reset ), y tal vez algo más para establecer la línea 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 es generalmente algo así como cuadrículas de YUI --- es demasiado restrictivo, lo que le obliga a usar sus nombres de clase, identificaciones, etc. y rara vez encaja en su sitio como lo haría CSS hecho a mano.

En resumen: los reajustes parecen bastante bonitos; es bueno eliminar todas las variaciones en, por ejemplo, margen-vs-relleno para listas, o espaciado de párrafos, o lo que sea. Pero eso es todo lo lejos que lo tomaría.

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

Al usar un marco, puede establecer algunas reglas o detalles a nivel de píxel y dedicar el resto de su tiempo a la implementación y producción. Es un impulso masivo a la productividad. Si se encuentra gastando tiempo ajustando las cosas unos pocos píxeles al final del proyecto (micro administrar el diseño), es una señal de que un marco puede ser útil.

Consejo # 17 en El programador pragmático dice: "Programa cerca del dominio del problema". Usar una capa de abstracción puede acercarlo a la solución de los problemas reales del 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 debe sacrificar calidad por cantidad. Se trata de eficiencia.

En un proyecto reciente, hice 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 ajustarlos a la misma grilla que desplegué.

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

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 garantía de reutilización.

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

Para cada uno, pero prefiero hacer las cosas desde cero, pero después de un tiempo desarrollas un proceso en el que usarás tu trabajo previo y lo aplicaras a nuevos proyectos y solo hagas algunas modificaciones para que el sitio web se vea como lo harías. me gusta a.

Asegúrate de usar una buena convención de nombres, por si acaso alguien más en el camino entra a editar el CSS, entonces tendrán una buena idea de a qué se refiere cada nombre de estilo.

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á como spam!). No estoy seguro de si voy a usarlo en el futuro, porque una de las ideas de CSS que pensé era no tener la lógica de diseño codificada. No debe 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.

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

Pros:

  • Escrito por uno de los mejores ingenieros frontend (IMO) (Nate Koechley)
  • Muy pequeña. 4 KB
  • Muy flexible (1000 diseños diferentes)
  • Admite diseños de ancho de fluido (100%) y diseños predeterminados de ancho fijo a 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 plantilla son independientes de orden de origen, por lo que puede poner su contenido más importante primero en la capa de marcado para mejorar la accesibilidad y la optimización del motor de búsqueda (SEO).
  • Pie de página de autocompensación. 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 semánticos (mejor que arriba, izquierda, derecha, etc.)

Contras:

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

Como otros han publicado, no hay verdaderos ''frameworks'' para CSS. Reset hojas de estilo ayuda mucho con el diseño también. Normalmente me quedo con una hoja de estilo de restablecimiento y voy desde allí. Pero si no tienes mucha experiencia en CSS, YUI Grids podría ahorrarte algo de tiempo.

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

Considero que el uso inteligente de Compass de las mixins de Sass es brillante y un gran paso hacia el Santo Grial de un marcado semántico sostenible. No creo que me gustaría utilizar 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 de CSS atractivo llamado Elastic que se ve lo suficientemente bien como para considerar agregarlo a Compass.

Los ''marcos'' de CSS carecen completamente de sentido.

CSS no es como JavaScript, donde puede incluir una biblioteca / marco base y luego llamar funciones y objetos desde allí para hacer trabajos de alto nivel. Todo un marco CSS puede proporcionarle reglas declarativas: algunas cosas predeterminadas de la regla de navegación del navegador, algunos estilos de clase a los que se debe forzar el autor de su página y reglas de diseño con ''flotante'' y ''claro''. Puedes escribir eso en algunas líneas de CSS por ti mismo en lugar de tirar en el abotagado de un centenar de reglas marco.

El aspecto del "diseño de cuadrícula" en particular se remonta a los viejos tiempos malos de mezclar su presentación en 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 de CSS.

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

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

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

Tómese el tiempo para estudiar y comprender (¡realmente entender!) Algunos marcos CSS como BluePrint y YUI, y css restablece como Eric Meyer. Luego, tómese el tiempo para armar su propio restablecimiento y / o marco basado en sus métodos de trabajo y el tipo de sitios que construye.

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

Hace poco vi a Eric Meyer hacer una presentación sobre CSS Frameworks en la que hizo la pregunta: "¿cuál es la correcta para mí?" Luego respondió la pregunta mostrando una diapositiva en blanco. Su punto era que ciertamente hay algunos conceptos útiles integrados en la mayoría de los restablecimientos y marcos, pero el que mejor se adapte a ti es el que escribes para ti (vale la pena el esfuerzo).

Utilicé 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. Aunque me encanta el concepto de "puedes rediseñar sin tocar el marcado", si estás produciendo un sitio donde eso no va a suceder de todos modos y solo lo necesitas hacer ayer, Blueprint es algo a mirar.

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

echa un vistazo a http://www.ez-css.org/ . uno de los marcos de css más fáciles y ligeros para trabajar. :)

¿Por qué usar css ''frameworks''?

  • Si te presionan por tiempo.

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

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

Conozco a los programadores que han sido muy felices de usar Blueprint o 960, ya que les permite armar un diseño por sí mismos, sin recurrir a un desarrollador de aplicaciones para el usuario. 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 es evidente que no necesitará un marco.

Sin embargo, si eres un principiante y solo necesitas poner en marcha algo, entonces puedes recurrir a un framework, ya que simplifica el diseño básico y también aborda la compatibilidad del navegador.

Habiendo dicho todo eso, muchos frameworks listos para usar hacen uso de algunos 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 marcos 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 el aprendizaje del tema en general. Ya sea que los uses depende de ti.

Entonces, nadie respondió a esta pregunta (aunque he visto algunos votos a favor), por lo que Al menos intentaré abordar la segunda pregunta en este aviso.

Los marcos de CSS son geniales; como cualquier otro marco, reducen el tiempo de desarrollo y le permiten trabajar inmediatamente en el diseño y CSS específicos del sitio. Piensan en decisiones difíciles, por lo que no es necesario.

Desafortunadamente, hay dos inconvenientes para 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 restablecimiento de CSS (estos son útiles por derecho propio, pero no son verdaderos frameworks); Estoy hablando de un marco honesto a bueno, que ya ha tomado las decisiones sobre qué etiquetas semánticas va a utilizar en su documento, etc. Como tal, se lo hace dependiente del marco, y cuando hay un error en el marco, lo más probable es que tenga que arreglarlo usted mismo.

  2. Los marcos no son una excusa para no tener en cuenta los problemas de CSS entre navegadores y avanzados. Siempre se encontrará con ellos, del mismo modo que trabajaría con un marco PHP o JavaScript. Y necesitas saber cómo tratar con ellos. Hay un dicho común que primero debe escribir su propio marco, antes de usar el de otra persona.

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