Este artículo resume algunas técnicas CSS comunes para sentar las bases para la reconstrucción de sitios web. Espero que puedas aprender algo útil.
1. Utilice abreviaturas CSS
El uso de abreviaturas puede ayudar a reducir el tamaño de sus archivos CSS y hacerlos más fáciles de leer. Para conocer las reglas principales de abreviatura de CSS, consulte "Sintaxis básica de CSS".
2. Defina la unidad claramente a menos que el valor sea 0.
Olvidarse de definir las unidades de una dimensión es un error común entre los novatos en CSS. En HTML puedes escribir simplemente ;100, pero en CSS tienes que dar una unidad exacta, como: " ancho:100em. Sólo hay dos excepciones en las que puedes dejar la unidad sin definir: altura de línea y valor 0. De lo contrario, todos los demás Los valores deben ir seguidos de la unidad. Tenga cuidado de no agregar espacios entre el valor y la unidad.
3. Distingue entre mayúsculas y minúsculas
Cuando se utiliza CSS en XHTML, los nombres de elementos definidos en CSS distinguen entre mayúsculas y minúsculas. Para evitar este error, recomiendo usar minúsculas para todos los nombres de definiciones.
Los valores de clase e id también distinguen entre mayúsculas y minúsculas en HTML y XHTML. Si debe escribir mayúsculas y minúsculas, confirme cuidadosamente que su definición en CSS sea coherente con las etiquetas en XHTML.
4. Cancelar las restricciones de elementos antes de clase e identificación.
Cuando escribe para definir una clase o identificación para un elemento, puede omitir la calificación del elemento anterior, porque la identificación es única en una página y se puede usar varias veces en la página. No tiene sentido que califiques un elemento. Por ejemplo:
div#content { /* declaraciones */ }
fieldset.details { /* declaraciones */ }
se puede escribir como
#content { /* declaraciones */ }
.detalles { /* declaraciones */ }
Esto ahorra algunos bytes.
5.Valor predeterminado
Por lo general, el valor predeterminado de relleno es 0 y el valor predeterminado de color de fondo es transparente. Pero el valor predeterminado puede ser diferente en diferentes navegadores. Si tiene miedo a los conflictos, puede definir los valores de margen y relleno de todos los elementos en 0 al comienzo de la hoja de estilo, de esta manera:
* {
margen:0;
relleno: 0;
}