Todo el mundo puede escribir código CSS, incluso si ya lo tiene funcionando para su proyecto. ¿Pero podría ser mejor CSS? Aunque webjx.com presenta una variedad de técnicas en esta área, comienza a usar estos cinco aspectos para mejorar tu CSS, lo que te hará lucir más profesional y mejorará tu código.
1. Reiniciar
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. Clasificación
Una pequeña prueba: este ejemplo le hará 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#header h1 { borde inferior: 1px sólido #dedede; color: #000; tamaño de fuente: 18px; altura de línea: 24px; posición: relativa;
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:
/*****Reset*****/Elimina el relleno y el margen del elemento.
/*****Elementos básicos*****/Definir el estilo de los elementos básicos: body, h1-h6, ul, ol, a, p, etc.
/*****Clases genéricas*****/ Defina 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 Es necesario procesar el código de manera eficiente.
/*****Diseño básico*****/Definir plantillas básicas: encabezado, pie de página, etc. Ayuda a definir los elementos básicos del diseño de una página web.
/*****Encabezado*****/Definir todos los elementos de Hearder
/*****Contenido*****/Definir todos los elementos en el cuadro de contenido
/*****Pie de página*****/Definir todos los elementos del pie de página
/*****Etc*****/Definir 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. Empiece desde 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 te encontrarás con los problemas ya condenados de divinidades1 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 hacerlo! logra 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.
Resumir
Estos pueden ayudarme a escribir mejor el código CSS. Pero esto no significa el final de esta lista. A continuación, traeré algunos otros para compartir con ustedes. Le invitamos a prestar atención a webjx.com.