1.Restablecer
Antes que nada déjame decirte muy en serio que siempre hay que resetear ciertas categorías. Ya sea que use Eric Meyer Reset, YUI Reset o escriba su propio código de reinicio, simplemente úselo.
Puede eliminar fácilmente el relleno y el margen de todos los elementos:
| html, cuerpo, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, formulario, conjunto de campos, tabla, th, td { margen: 0; relleno: 0; } |
Eric Meyer Reset y YUI Reset son muy poderosos, pero para mí van demasiado lejos. Creo que eventualmente necesitarás restablecer todo y luego redefinir las propiedades de todos los elementos. Es por eso que Eric Meyer recomienda un uso más eficiente (restablecer hoja de estilo) y no solo use su hoja de estilo restablecida, arrástrela y suéltela en su proyecto. Ajústela (la hoja de estilo de reinicio) y cree su propia hoja de estilo de reinicio.
Oh, por favor deja de usar:
| * {margen: 0; relleno: 0; |
Dedica más tiempo a hacerlo, ¿qué crees que pasará con los botones de opción cuando retires el relleno? Los elementos del formulario a veces pueden hacer cosas originales, por lo que la forma más efectiva es hacerlos independientes.
2. Ordenar
una pequeña prueba
Este ejemplo es para hacerle pensar en cómo encontrar el atributo de margen correcto más rápido.
Ejemplo#1
| div#encabezado h1 { índice z: 101; color: #000; posición: relativa; altura de línea: 24px; margen derecho: 48px; borde inferior: 1px sólido #dedede; tamaño de fuente: 18px; } |
Ejemplo#2
| div#encabezado h1 { borde inferior: 1px sólido #dedede; color: #000; tamaño de fuente: 18px; altura de línea: 24px; margen derecho: 48px; posición: relativa; índice z: 101; } |
No puede decirme que el Ejemplo n.° 2 no puede encontrar la propiedad de margen derecho más rápido. Ordene las propiedades de sus elementos alfabéticamente. Crear su CSS de manera consistente lo ayudará a ahorrar tiempo buscando una propiedad específica.
Sé que algunas personas organizan su código de una manera y otras de otra, pero en mi empresa tomamos la decisión por consenso de que todo el código se organizaría alfabéticamente. Definitivamente ayuda trabajar con otros organizando su código de esta manera. Me estremezco cada vez que me encuentro con una hoja de estilos en cascada cuyas propiedades no están ordenadas alfabéticamente.
3.Organización
Debes organizar tus hojas de estilo para que el contenido relacionado esté muy cerca, lo que facilita encontrar lo que estás buscando. Utilice anotaciones más eficientes. A modo de ejemplo, así es como estructuro mi hoja de estilos en cascada:
| /*****Reiniciar*****/ Elimina el relleno y el margen de un elemento. /*****Elementos básicos*****/ Defina estilos para elementos básicos: cuerpo, h1-h6, ul, ol, a, p, etc. /*****Clases genéricas*****/ Definir estilos simples, como flotar un lado, eliminar el margen inferior de un elemento, etc. Por supuesto, la mayoría de ellos no están relacionados con la semántica que queremos, pero son necesarios para procesar el código de manera eficiente. /*****Diseño básico*****/ Definir plantillas básicas: encabezado, pie de página, etc. Ayudar a definir elementos básicos del diseño de una página web. /*****Encabezamiento*****/ Definir todos los elementos de Hearder /*****Contenido*****/ Definir todos los elementos dentro del cuadro de contenido. /*****Pie de página*****/ Definir todos los elementos del pie de página /*****Etc*****/ Defina otros selectores. Al anotar y categorizar elementos similares en grupos, encontrará lo que busca más rápido. |
4. Consistencia
No importa cómo decidas escribir código, sé coherente. Estoy cansado de todo el debate CSS de 1 línea versus multilínea. No hay necesidad de discutir. Todo el mundo tiene una opinión, así que elige la forma de trabajar que te guste y sé coherente en todas tus hojas de estilo.
Personalmente, usaría una combinación de ambos. Si un selector tiene más de 3 atributos, lo truncaré y lo escribiré en varias líneas.
| div#encabezado { flotador: izquierda; ancho: 100% } div#encabezado div.columna { borde derecho: 1px sólido #ccc; flotador: derecha derecha; margen derecho: 50px; relleno: 10px; ancho: 300px; } div#header h1 {flotador: izquierda; posición: ancho relativo: 250px; |
Así que encuentre una forma en la que le guste trabajar y luego sea constante.
5. Empieza en el lugar correcto
No intente acercarse a su hoja de estilo hasta que el lenguaje de marcado esté completo.
Cuando me preparo para dividir una página web, antes de crear el archivo CSS, necesito obtener una vista previa y marcar todos los documentos entre la etiqueta de apertura del cuerpo y la etiqueta de cierre del cuerpo. No agregaré DIV, ID ni selectores de clases adicionales. Voy a agregar algunos DIV generales, como oyente, contenido y pie de página, porque sé que estas cosas existen.
¡Al etiquetar el documento primero, no se encontrará con los problemas ya condenados de las divisiones1 y clases2!
/*Solo necesitas agregar esas cosas una vez que hayas comenzado a escribir el CSS y te des cuenta de que necesitarás otro gancho para lograr lo que estás tratando de lograr.*/(Texto original no traducido).
Utilice selectores secundarios de CSS para especificar elementos secundarios; no se limite a agregar mecánicamente un selector de clase o ID a un elemento. Recuerde: CSS no sirve de nada sin un documento (o estructura de marcado) bien formateado.