¿Cuándo debo usar un marco CSS?


11

¿Cuáles son los escenarios de mejores prácticas para usar un marco CSS? ¿Cuándo es mejor "rodar tu propio" CSS desde cero en lugar de usar marcos?

Respuestas:


11

Los marcos CSS son un poco complicados porque en realidad no son marcos para mí. Son simplemente clases predefinidas. Pero, esta no es tu pregunta.

Los marcos CSS son excelentes para maquetas y marcos de alambre. No recomendaría usarlos en un sitio en vivo porque agregan clases sin sentido a su marcado. ".span3" no me dice nada sobre el contenido, solo el diseño.

Sin embargo, blueprint tiene algunas herramientas geniales que lo ayudan a combinar sus clases de marco y las semánticas una vez que haya terminado.

Siempre uso mi propio CSS.


44
Estoy con Thorn007 en este caso. CSS es bastante simple cuando te pones a ello. Simplemente use un buen restablecimiento de CSS y realice el suyo.
jessegavin

3

Solo evítalos, no son más que molestos.

Especialmente este.

* { margin:0; padding:0; }

Mi mayor queja es que si hereda / mantiene un sitio que usa un restablecimiento y / o un marco, debe aprender ese marco antes de poder modificar el sitio.

Cuando agrego una etiqueta h1, espero ciertas cosas. La mayoría de los restablecimientos eliminan todo el relleno, el margen, el bloqueo, etc., de modo que una etiqueta h1 ya no actúa como debería de forma predeterminada. Así que tengo que volver y agregar todo lo que estaba allí en primer lugar.

En general (en mi experiencia), las personas que no entienden CSS usan los reinicios y los marcos, y esto causa más trabajo para las personas que sí lo hacen.


1
Eric Meyer y los desarrolladores web de Yahoo entienden CSS y usan restablecimientos CSS. En mi experiencia, ahorran MUCHO tiempo y dolor de cabeza cuando intentan lograr la coherencia entre navegadores. - Sin embargo, los marcos CSS son poco convincentes.
jessegavin

Al agregar una etiqueta h1 espero que ciertas cosas .. por desgracia necesita esperar cosas diferentes de cada navegador .. y, por lo tanto, la necesidad de CSS reset ( no marcos )
Gabriele Petrioli

h1 es un mal ejemplo, porque los navegadores tienden a usar diferentes márgenes, etc. Personalmente, prefiero un "conjunto" para restablecer, es decir, en lugar de restablecer todo a 0, simplemente configúrelo en su propia hoja de estilo.
DisgruntledGoat

* {margin:0; padding:0;}es el restablecimiento CSS más importante de todos. Elimina margin-top/maring-bottomdebajo de todas las etiquetas, incluso las petiquetas, por lo que no verá un gran espacio entre cada línea. Incluso este sitio web probablemente esté utilizando, de lo p {margin:0;}contrario, el navegador viviría un gran espacio entre cada línea. Me pregunto cómo puedes decir que son molestos.
Marco Demaio

2

En mi opinión, el único servicio que proporciona un Marco de CSS es un punto de partida para aquellos que no están muy familiarizados con CSS.


2

También recomiendo usar un reset.css de Eric Meyer, pero creo que los "frameworks" CSS pueden ser beneficiosos para el diseño. Blueprint, YUI grid y 960-grid pueden ayudarlo a lograr algunos diseños muy complicados sin tener que escribir el CSS.

Si bien se han mencionado inconvenientes, se podría decir lo mismo sobre la construcción de un sitio web a partir de un CMS en lugar de rodar código personalizado, por ejemplo, pero aún pueden ser útiles y para muchos sitios los beneficios obtenidos superan cualquier problema de CSS o rendimiento extraño.


1

Si realmente está implementando un diseño propio, va a escribir parte de su propio CSS (a menos que alguien más haya escrito el diseño exacto que desea).

Suponiendo que está escribiendo parte de su propio CSS, los "marcos" pueden ser útiles cuando tiene estilos que son:

  1. utilizado en más de un lugar; y
  2. lo suficientemente complicado como para dividirse en sus propias clases

Para estilos realmente simples, es mejor usar clases para indicar qué es algo (por ejemplo class="navigation"), y luego definir su apariencia aplicando reglas de estilo a esa clase en su hoja de estilo.

Pero para los estilos más complejos que no están necesariamente vinculados a ningún elemento (por ejemplo, estilos relacionados con el diseño, del tipo que los marcos dan nombres similares .span3), no hay nada de malo en ponerlos en una clase y aplicar esa clase en el CSS. Puedes usar ambos enfoques juntos.

En sitios más grandes y complejos donde es probable que los elementos se combinen de maneras impredecibles, un enfoque similar a un marco realmente puede ayudar a mantener su código manejable.

Sin embargo, diría que también podrías escribir tu propio "marco". Puse "framework" entre comillas porque CSS realmente no es un lenguaje tan grande. Podrías leer CSS: la guía definitiva (Eric Meyer) en un día, luego leer todo el código en, por ejemplo, Blueprint (un "marco" CSS) y entender más o menos lo que está sucediendo. Es posible que necesite investigar un poco las soluciones alternativas de IE, pero estamos hablando de al menos un orden de magnitud menos complejo que, por ejemplo, jQuery aquí.


1

Yo uso blueprint, para CSS.
CSS es, como dicen todos los anteriores, realmente sencillo.

Sin embargo, en realidad, debes considerar la plataforma.

Con CSS, el motor de renderizado aumenta la complejidad.

Gecko vs WebKit vs Presto vs Trident ... ¿quién quiere hacer todo eso?

Lo que un 'marco' te brinda aquí es la capacidad de escribir diseños que probablemente funcionen en todos los navegadores, por lo que no tendrás que buscar en Google el modo peculiar de IE 7 'WTF-am-I-doing = -this-crap' arreglar, o algo similarmente ridículo.

Frameworks hará el 90% del diseño que desee, y luego siempre podrá agregar sus propios estilos más adelante.

Entonces, para responder la pregunta, diría que elija cualquier marco y vea si funciona para usted. Puede que sí. Entonces eres dorado y puedes volver a lo que realmente quisiste hacer. Si no es así, extiéndalo usando CSS y cambie lo que no funcionó. De esa manera, mantiene el beneficio del navegador cruzado, pero aún puede personalizarlo.

Como un pequeño beneficio, si elige uno y lo usa todo el tiempo, y luego se enferma, o es promovido y tiene que entrenar a su sucesor, puede decir:

"Sí, usé el marco ABC. Los documentos están aquí. El código está allí. Entrenando. Buena suerte".


0

Cuando resuelve todas tus necesidades . (Esto se basa en la idea de la confección ).

¿Del único libro sobre marcos? http://www.oreilly.com/web-platform/free/book-of-html-css-frameworks.csp . (Solo se vincula porque es gratis y relevante aquí).


Podría ser mejor si puede cortar y pegar las partes relevantes de la página a la que se vinculó. De lo contrario, como respuesta, esto es un poco de luz. Aquí solo se desaconsejan las respuestas de enlace porque los enlaces a menudo se rompen con el tiempo. ¿Puede actualizar esta respuesta para ayudar al OP y a los futuros usuarios con algo en lo que puedan hundir sus dientes? ¡Gracias por adelantado!
closetnoc
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.