¿Cuál es el mejor Marco de CSS y vale la pena el esfuerzo?

https://stackoverflow.com/questions/203069

03-07-2019
|

Pregunta

Leyendo en otro foro en el que me he encontrado con 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 marcos de CSS, sugirió cuál es el mejor y si vale la pena el esfuerzo.

Solución

CSS 'marcos' faltan completamente el punto.

CSS no es como JavaScript, donde puede incluir una biblioteca / marco base y luego llamar a funciones y objetos para realizar trabajos de nivel superior. Todo un marco CSS puede proporcionarle reglas declarativas: algunas cosas predeterminadas para restablecer las reglas del navegador, algunos estilos de clase que deben forzarse para crear su página y reglas de diseño que usan 'flotar' y 'borrar'. Puedes escribir eso en unas pocas líneas de CSS tú mismo, en lugar de jalar las cien reglas del marco.

Las cosas del 'diseño de cuadrícula' en particular se remontan a los viejos tiempos de mezclar tu presentación con tu marca. '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 cuadros flotantes de píxeles fijos, lo que hace imposible crear un diseño líquido accesible en una amplia gama de tamaños de ventanas.

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

Otros consejos

~~Por lo tanto, nadie ha respondido a esta pregunta todavía (aunque he visto algunos upvotes), por lo que~~ al menos intentaré abordar la segunda pregunta en este mensaje.

CSS Frameworks 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 no tengas que hacerlo.

Lamentablemente, hay dos inconvenientes de usar un marco (en general):

El marco dicta la estructura general y la mecánica de su código CSS. Ahora, no estoy hablando de un restablecimiento de CSS (son útiles por derecho propio, pero no son marcos verdaderos); Estoy hablando de un marco de trabajo honesto a bueno, que ya ha tomado las decisiones sobre qué etiquetas semánticas usará en su documento, etc. Como tal, se hace dependiente del marco y cuando hay un error en el marco, normalmente tendrás que arreglarlo tú mismo.
Los marcos no son una excusa para no tener en cuenta los problemas de CSS cruzados / avanzados. Invariablemente se encontrará con ellos, al igual que trabajaría con un marco de trabajo de PHP o JavaScript. Y necesitas saber cómo tratar con ellos. Existe un dicho común de 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 algunas golosinas adicionales en la parte superior.

He consultado BluePrint y algunos otros, y el único 'framework' de CSS que recomendaría es YUI Grids

Pros:

escrito por uno de los mejores ingenieros de frontend (IMO) (Nate Koechley)
Muy pequeño. 4KB
Muy flexible (1000 diseños diferentes)
Admite diseños de ancho de fluido (100%), así como diseños de ancho fijo preestablecidos 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 la plantilla son independientes del 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 auto-limpieza. No importa qué columna sea más larga, el pie de página permanece en la parte inferior.
Los diseños de menos del 100% se centran automáticamente.
Nombres de clase algo semánticos (mejor que arriba, izquierda, derecha, etc.)

Contras:

Gran cantidad 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 han publicado otros, no hay "marcos" reales para CSS. Restablecer las hojas de estilo también ayudan mucho con el diseño. Por lo general me quedo con una hoja de estilo de reinicio y voy desde allí. Pero si no tienes mucha experiencia con CSS, YUI Grids podría ahorrarte algo de tiempo.

Compass es un marco de trabajo de CSS real en la sensación de que le da no solo plantillas (tanto YUI como blueprint), sino también construcciones reutilizables y declaraciones de alto nivel mientras le brinda una sintaxis CSS familiar.

Tómese el tiempo para estudiar y comprender (¡realmente entienda!) algunos marcos css, como BluePrint y YUI, y restablecimientos css como el de 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, uso la mayoría del restablecimiento de Eric Meyer con algunas clases y restablecimientos propios, además de algunas ideas de BluePrint y YUI.

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

¿Por qué usar css 'frameworks'?

Si estás presionado por el tiempo.
Si no sabes css, y no lo sabes conocer a alguien que pueda escribirlo para usted.
Si no eres demasiado valioso acerca de normas, etc.

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

Si ya tienes un conocimiento decente de CSS, es probable que ya tengas una biblioteca decente de diseños de stock, por lo que claramente no necesitarás un marco.

Sin embargo, si usted es un principiante y solo necesita poner algo en funcionamiento, entonces puede recurrir a un marco, ya que hace que el diseño básico sea mucho más sencillo, y también aborda la compatibilidad con el navegador.

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

Por lo tanto, los marcos CSS: pueden ahorrarle tiempo, a costa de la semántica. También pueden afectar su conocimiento de CSS, pero eso depende más de cuánto invierta en el aprendizaje del tema en general. Si usted hace uso de ellos depende de usted.

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

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

Sugerencia # 17 en El Programador Pragmático dice: " Programa cerca del dominio del problema " . El uso de una capa de abstracción puede ayudarlo a resolver los problemas reales del diseño. Por ejemplo: puede concentrarse en mejorar la experiencia del usuario con el tiempo adicional que tenga en lugar de ajustes menores de píxeles.

Esto no quiere decir que deba 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 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 que ser una implementación particular de CSS. No tiene que ser algo hinchado que haya descargado de la red o algo que implemente ideas obsoletas. Es solo una técnica para hacer un trabajo. No me sorprendería si algunos programadores ya tuvieran sus propios marcos y ni siquiera lo supieran. De hecho, si considera el DOM como un conjunto de elementos predeterminados que extiende con CSS, entonces eso es un marco por definición.

En realidad pasé una buena parte de las últimas 24 horas investigando esto por mi cuenta, je. Mi conclusión fue que un reinicio agradable (usé YUI Reset ), y tal vez algo más para establecer el valor de la línea de base ( fuentes YUI valió la pena en mi caso; tal vez las "golosinas extra" y "quot; de BluePrint estaría en el tuyo) es una buena idea. Pero, un " framework " --- que generalmente es algo como cuadrículas YUI - -es demasiado restrictivo, lo que te obliga a usar sus nombres de clase, identificadores, etc. y rara vez se ajusta a tu sitio como lo haría un CSS hecho a mano.

En resumen: los reinicios parecen bastante buenos; es bueno eliminar todas las variaciones en, por ejemplo, margen-vs-relleno para listas, o espacio entre párrafos, o lo que sea. Pero eso es todo lo que yo tomaría.

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

Compass, creo que es increíble. Asegúrese de ver el screencast .

Estoy usando 960.gs para unos pocos 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 de video del CEO de Site Point, Kevin Yank, responderá a su pregunta. Realmente recomiendo verlo.

Compass le permite cambiar el nombre de las clases e identificaciones 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 de vainilla simple, como los mixins.

Me sorprenden los supuestos " expertos en CSS " Quién critica estas herramientas sin haberlas excavado y usado. ¿Son esenciales? No. Si le gusta su propio marco (tiene uno propio, ¿verdad? Un marco CSS es simplemente una biblioteca cuidadosamente definida, todos deberían estar usando uno) y, por supuesto, continúe usándolo. Nadie te está obligando a usar otros marcos y no veo que las personas que usan marcos les digan a los puristas de CSS que "lo están haciendo mal". & Quot;

Criticar los marcos desde tal punto de vista simplemente revela una inseguridad y una ignorancia. Por ejemplo, la idea es ridícula de que una persona utilice una herramienta como Compass sin saber CSS. ¿Te das cuenta, verdad, que un marco generalmente no escribe todo tu CSS por ti? Aún puede romper y escribir su propio CSS en el contexto de la mayoría de los marcos. De hecho, si no conoces CSS puedes frustrarte rápidamente.

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

Matt Raible de AppFuse fame tuvo un concurso de CSS Framework hace un tiempo para desarrollar CSS Frameworks para AppFuse. Los resultados se publican aquí . Hay algunas variaciones y las he usado 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 sigue 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). 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 de 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.

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

Aquí está la publicación de mi blog sobre marcos de CSS Cuándo utilizar el marco CSS?

La única manera que conozco de usar un marco CSS y retener el marcado semántico es usar una abstracción de nivel superior. En este momento, Compass es el único que sé que es lo suficientemente maduro como para usarlo, pero Nicole Sullivan parece estar haciendo algunas cosas interesantes con su " CSS Orientado a Objetos " proyecto.

Me parece que el uso inteligente de los mixins de Sass de Compass 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 que se llama Elastic que se ve tan bien que estoy considerando agregarlo a Compass.

Creo que CSS tiene que ver con la 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 escribió y con las que probablemente no está familiarizado, aumentará exponencialmente la complejidad, por lo tanto la volatilidad del código CSS.

Le sugeriría sus diseños a medida que los escribe y desarrolla un sistema de plantillas genérico a partir de eso. Aunque 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.

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

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

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

He usado BluePrint y YUI, pero siempre me siento frustrado con algunos de los nombres que dan con su identificación y clases.

A cada uno lo suyo, pero prefiero hacer las cosas desde cero, pero después de un tiempo, desarrolla un proceso en el que usará su trabajo anterior y lo aplicará a nuevos proyectos y solo realizará algunos ajustes para hacer que el sitio web tenga el mismo aspecto. como te gustaría que lo hiciera.

Asegúrese de utilizar una buena convención de nomenclatura, en caso de que alguien más en el camino edite el css, tendrá una buena idea de a qué se refiere cada nombre de estilo.

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 CSS con variables y mixins. En verdad, a los que juzgan prematuramente los marcos sin haber revisado Compass les falta "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.

-Matt

consulte http://www.ez-css.org/ . Uno de los framework css más fácil y ligero para trabajar. :)

Echa 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 garantiza la reutilización.

Licenciado bajo: CC-BY-SA con atribución

No afiliado a StackOverflow