7 consejos importantes de diseño CSS

Lo más difícil de hacer bien en CSS es el diseño de su sitio. Aquí hay un par de consejos que se ocupan precisamente de eso. Algunos de estos consejos no son exactamente nuevos ni científicos, ¡pero con suerte le ahorrarán a alguien un poco de molestia en alguna parte!

Consejo 1: borre la configuración predeterminada de margen y relleno antes de comenzar a trabajar.
Los diferentes navegadores tienen diferentes márgenes predeterminados y tamaños de relleno, por lo que querrás comenzar desde cero, por así decirlo. Utilice este comando:

*
{
margen: 0;
padding: 0;
frontera: 0;
}

para borrar todas las configuraciones predeterminadas de margen y relleno. También tenga en cuenta el borde, que está establecido en 0. Tenga en cuenta que si hace esto, también se deshará del molesto borde púrpura que rodea las imágenes en las que se puede hacer clic, aunque algunas personas argumentan que el borde púrpura es necesario para la accesibilidad y usabilidad. Pero a mucha gente no le gustan las imágenes redondas con borde morado, y esta es una forma de deshacerse de él de una sola vez sin tener que configurarlo. borde de imagen = 0 para cada imagen (lo que va en contra de las estrictas reglas de marcado en cualquier caso).

Consejo 2: para centrar su diseño, use un contenedor div para contener todo su contenido
Declararlo de la siguiente manera:

#envase

{
margen: 0 automático;
ancho: xxxpx;
}

Aquí hay un par de puntos a tener en cuenta. NO declare que el ancho sea 100%. Esto anula todo el objeto ya que solo tendrá que declarar los subelementos dentro del contenedor y luego centrarlos usando margen: 0 automático. Esto es MUY MALO ya que significa que en lugar de declarar el diseño central una vez, tendrás que declararlo en varios lugares para cada elemento dentro de tu contenedor.

Consejo 3: trabaje de arriba hacia abajo
Literalmente, comience a trabajar en su diseño CSS comenzando desde la mayoría de los elementos superiores de su diseño, así como desde los elementos "superiores" de su HTML, como el cuerpo, así como sus contenedores principales.

Declare sus comandos CSS en el nivel más alto posible e intente declarar algo solo una vez y déjelo en cascada. Anule los comandos de nivel inferior únicamente cuando sea estrictamente necesario. Esto evita un archivo CSS detallado que es difícil de mantener y comprender. Por ejemplo, si tienes {margen: 0 automático} configuraciones en todos y cada uno de los subdiv dentro de su contenedor: está en problemas.

Consejo 4: documente lo que está haciendo y utilice Firebug y el navegador Firefox para depurar
No estás escribiendo tu código CSS sólo para ti, algún día algún pobrecito tendrá que depurarlo. Haz numerosos comentarios dentro de tu archivo CSS para explicar por qué estás haciendo las cosas de una manera específica.

En consonancia con esto, es posible que tengas que arreglar el CSS de otra persona con más frecuencia de lo que crees (o incluso el tuyo propio). Utilice el complemento Firebug para Firefox para depurar su CSS. Esto es un salvavidas porque le brinda una idea de exactamente dónde podría estar roto su diseño y por qué.

El único problema con esto es que su diseño puede funcionar perfectamente en Firefox, pero no en IE5, IE6 o IE7. Esto nos lleva al siguiente consejo.

Consejo 5: Decida para qué navegadores va a crear su CSS y pruébelo desde el principio.
Algunos puristas insisten en asegurarse de que su sitio web funcione para todos los navegadores posibles, otros sólo lo hacen funcionar para los navegadores "principales". ¿Cómo saber exactamente qué navegadores se utilizan más? Una vez más W3 Schools viene al rescate.

En la siguiente página puede ver qué navegadores son los más populares: http://www.w3schools.com/browsers/browsers_stats.asp. En esta página puede ver que algo como IE5 sólo lo utilizan aproximadamente el 1.1% de los navegadores. Depende de usted si considera que vale la pena construir su CSS para que sea compatible con este navegador, o si simplemente va a probar su compatibilidad con IE6, IE7 y Firefox, por ejemplo. Hagas lo que hagas, cuando comiences a crear tu CSS, comienza desde arriba y prueba todas y cada una de las configuraciones en cada uno de los navegadores a medida que avanzas. No hay nada peor que crear un sitio web perfecto en Firefox y luego descubrir, justo después de haber codificado un archivo CSS de 1000 líneas, que no funciona en IE6. Luego depurar y corregir su código después del hecho es una pesadilla.

Consejo 6: aquí hay un pequeño consejo vergonzoso para arreglar su CSS en IE6 o IE7
Digamos que su diseño funciona perfectamente en Firefox, pero no funciona en IE6. No puedes usar Firebug para determinar dónde podría estar el problema ya que FUNCIONA en Firefox. No puedes darte el lujo de usar Firebug en IE6, entonces, ¿cómo se depura una hoja de estilo de IE6 o IE7? A menudo descubrí que ayuda agregar {borde: 1 px rojo sólido} or {borde: 1 px morado sólido} a los elementos problemáticos. De esta forma muchas veces podrás ver por qué ciertos elementos no encajan en el espacio disponible. Es un pequeño consejo vergonzoso ya que es muy primitivo y simple, ¡pero funciona!

Consejo 7: comprender los flotadores
Es esencial comprender la flotación de elementos, especialmente en el contexto de hacer que los elementos flotantes funcionen en los diferentes navegadores.

Básicamente, elementos como divs flotan hacia la izquierda o hacia la derecha (nunca hacia arriba o hacia abajo, solo hacia los lados). Aquí hay un par de cosas a tener en cuenta con los elementos flotantes. Cada elemento flotante debe tener un ancho especificado explícito. Si está utilizando divs flotantes para crear un diseño de 3 o 2 columnas, especifique los anchos en términos de porcentajes en lugar de anchos fijos, y si usa porcentajes, asegúrese de que los porcentajes no sumen 100. %, esto a menudo hará que la columna de la derecha quede debajo del resto, lo que indica claramente que está intentando colocar algo en el espacio disponible que es demasiado ancho para ello. En lugar de ello, utilice porcentajes que sumen ligeramente por debajo del 100%, como 25%, 49%, 24% para una columna de la izquierda, una columna del medio y una columna de la derecha.

Los elementos flotantes pueden ser extremadamente complejos de entender y vale la pena dedicar algo de tiempo a buenos sitios que brinden pautas y consejos específicos, como el La posición lo es todo sitio web.

Conclusión
¡Esperamos que estos consejos de CSS para el diseño le ahorren algo de tiempo y esfuerzo la próxima vez que tenga que enviar un diseño sin tablas con paneles! Esta fue una publicación invitada escrita por Christine Anderssen.