2009-08-12 8 views
14

En caso afirmativo, ¿cuál? ¿Por qué? Si no, ¿por qué? ¿Cómo arreglas el renderizado de CSS de navegador cruzado?¿Utiliza un marco de CSS?

Actualmente uso blueprint css, y me pregunto si es una buena opción. ¡Gracias! :)

Respuesta

28

No, no estoy usando ningún marco, a un sistema de denominación de bien pensado que reutilizar una y otra y una css básico con unas cuantas y se reinicia algunos estilos básicos

¿Por qué no estoy usando un marco CSS?

El uso de un marco suele presuponer que el diseñador está familiarizado con sus convenciones, lo que a menudo no es el caso: usted no es el que diseña la página o el cliente tiene su propio diseñador. Y aunque este no sea el caso, siempre habrá diseños que no se adaptarán a 960 píxeles o simplemente tendrán un tamaño par para que no pueda usar su clase mágica .span-4.

Lo que me lleva al siguiente punto. La nomenclatura no es semántica. En teoría, es de esperar que un marco facilite el mantenimiento de un sitio grande. Sin embargo, supongamos que tiene que hacer un pequeño cambio de diseño. Esto básicamente significa cambiar el html en todas las vistas de plantilla involucradas. Esto es difícil y arriesgado incluso con un sistema de control de versiones, porque una cosa es tener que volver a un solo archivo css y otra a 100 vistas. Todo porque input.span-19 debería tener 5 píxeles menos. Marcos CSS: el nuevo CSS en línea.

¿Qué pasa con los problemas de navegador cruzado? O estás usando un marco o no, esto no va a cambiar. Hay navegadores o sistemas operativos que tienen ciertas particularidades. En pocas palabras, Internet Explorer seguirá chupando tanto.

CSS Frameworks se destacan por la disciplina y tengo que darles crédito por eso, pero al final todo se trata de quien escribe el código.

+4

+1 para explicar problemas con los marcos CSS. – strager

+0

completamente a la derecha. Usé 960gs una vez en un proyecto más grande y encontré todos los problemas mencionados. – kurczak

+0

Un punto con el que no estoy de acuerdo: la compatibilidad entre navegadores. Mis opciones se reducen a mantener el diseño lo suficientemente simple como para evadir todos los problemas, O aprendiendo todos los detalles y cortes de CSS, O usando una herramienta como Grid 960 que tiene las soluciones maravillosamente integradas. Grid 960 ofrece los mismos resultados con uno porcentaje de discrepancia entre FireFox e IE7, que es mucho más de lo que podría lograr. (Dios bendiga a Nathan Smith por crear Grid 960.) – Smandoli

2

Uso Blueprint junto con el marco Compass. Codificar CSS se ha vuelto a disfrutar de nuevo. :-)

+0

No escuché de Compass y Sass. Se ve muy interesante. ¡Gracias! :) – Philippe

+0

No hay problema. Espero que lo disfruten. :-) –

3

Me gustan las herramientas yui css. Esos tipos definitivamente pasaron más tiempo lidiando con cross browser css de lo que me gustaría. No he probado otros.

3

Uso el marco yui-css de yahoo. Es el primero que encontré y fue fácil de entender. Acabo de ver el video y la hoja de trucos y lo puse en funcionamiento. Además, Yahoo lo usa en algunos de sus sitios.

0

He usado Blueprint-css en algunos lugares y me pareció bastante útil.

0

El 960 Grid System es un esfuerzo por agilizar el flujo de trabajo de desarrollo web proporcionando dimensiones de uso común, basadas en un ancho de 960 píxeles. Hay dos variantes: 12 y 16 columnas, que se pueden usar por separado o en tándem.

yo prefiero la versión fluida de 960.gs: Fluid 960 Grid System

2

La combinación de Compass/Sass es fantástica y ofrece varios complementos para utilizar el marco de su elección sin los nombres de clase no semánticos. Fuera de Compass, siempre encontré que los frameworks son demasiado restrictivos y usan demasiado markup.

No soy entusiasta de los complementos Blueprint, 960gs y YUI para Compass: fueron diseñados originalmente para usar con marcado extra y no aprovechan al máximo Compass/Sass para una mayor flexibilidad. Así que construí 'Susy' - un marco flexible construido nativo de Compass/Sass.

Independientemente del complemento que use (o escriba el suyo), le recomiendo Compass/Sass como una mejor opción que el marcado adicional.

+0

Tu enlace está muerto. – markus

+0

arreglado, gracias: http://susy.oddbird.net/ –

0

Acabo de iniciar un proyecto con la red 960. El diseñador compró esto desde el principio y dejó que guiara sus diseños.

Debo decir que es mucho más rápido. Dedique mucho menos tiempo a la medición de píxeles en maquetas, pregúntele al diseñador cuál es el objetivo y añada CSS para crear "plantillas de página". Dedique mucho más tiempo simplemente implementando los diseños.

1

Creé mi propio subconjunto de clases, del cual me encontré usando con mucha frecuencia, esto me hace trabajar más rápido y crear diseños html mucho más fácil, sin repetir las mismas propiedades en muchas clases.

Por ejemplo, para divs en línea, tengo clases fl y fr para representar flotación a derecha e izquierda, para anchos de fluido tengo 20 clases de ancho. Aquí hay algunas clases de mi hoja de estilo genérico que mencioné. Funciona para mí.

.fl { display:inline; float:left;} 
.fll { display:inline!important; float:left!important;} 
.fr { display:inline; float:right} 
.frr { display:inline!important; float:right!important;} 
.ib { display: -moz-inline-block; display:inline-block;} 
.clear { clear: both} 
.none {display:none;} 
.noni {display: none!important;} 
.block {display:block;} 
.blocki {display: block!important;} 
.pointer {cursor: pointer !important;} 
... 
.w10 { width: 10% !important; } 
.w15 { width: 15% !important; } 
.w20 { width: 20% !important; } 
.w25 { width: 25% !important; } 
... 

Así que esta técnica no puede ser un reemplazo marco por supuesto, pero esto funciona bastante bien si no quiere tener cualquier otra cosa en entre sus estilos y :)

Sinan.

P.S. En IE6 y debajo de las clases múltiples funcionan buggy esto es para usar en navegadores modernos. ver the table at Quirksmode

0

uso algunos regularmente y recomiendo echarles un vistazo.

heymuscle es un marco css de respuesta que se ajuste a 1140px/960/ipad/iphone similar a 960gs

960 grid es uno de los más populares fuera de la rejilla allí y proporciona fácil de usar clases para la disposición de su página

1140 grid es un diseño fluido

esperanza esto ayuda

8

me he dado cuenta de dos conceptos erróneos acerca de los principales marcos de CSS.

En primer lugar, existe una gran confusión entre el concepto de un marco utilizado en el desarrollo de software, como una herramienta y un tipo de un marco como 960gs.

Wikipedia defines a framework como "una abstracción en la que el software que proporciona una funcionalidad genérica se puede cambiar de forma selectiva por código de usuario, proporcionando así un software específico de la aplicación".

@vise dice "No estoy usando ningún framework, solo un sistema de nombres bien pensado que reutilizo una y otra vez y un CSS básico con algunos restablecimientos y algunos estilos básicos". Esto es similar a decir "No estoy usando ningún marco, solo un marco". Esta es probablemente una especie de ironía semántica. Sin intención de ofender :)

Blueprint, 960, brújula, etc. son todos los tipos de marcos. Debido a que algunos marcos CSS pueden no ser semánticos o carecer de ciertas cualidades deseables, esto no significa que los marcos CSS sean una mala idea.

El segundo error es que los marcos css y css son mutuamente excluyentes.Usted codifica css a mano o usa un marco (con algunas cosas personalizadas). Pero ... espere un minuto ... ¿no es CSS un conjunto de elementos predeterminados que podemos modificar o ampliar para adaptarnos a nuestros requisitos específicos? CSS se parece sospechosamente a un marco según la definición de Wikipedia.

Por supuesto, este segundo punto es discutible. Pero a menudo encuentro que las personas están usando algún tipo de marco sin saberlo.

Para responder a su pregunta, tiendo a usar algo como sass y hacer my own framework. En mi último proyecto, estoy usando una combinación de esto y Bourbon que se ve bien hasta ahora. La razón principal por la que uso frameworks es porque estoy cansado de la redundancia en CSS. Es realmente aburrido tener que repetir los mismos valores una y otra vez. Hay otros conceptos en el diseño que a CSS no le va muy bien y que no abordaré aquí (ver here). Pero al usar un marco, es posible abstraer todos sus problemas y simplemente trabajar para lograr que se hagan las cosas.

Espero que esto ayude!

Cuestiones relacionadas