1. Agregue un bloque de comentarios al comienzo de la hoja de estilo para describir la fecha de creación, el creador, las etiquetas y otra información de comentarios de la hoja de estilo.
| Código fuente de ejemplo : /* ---------------------------------- Sitio: nombre del sitio Autor: 52CSS.com Actualizado: fecha y hora Actualizado por: Nombre ---------------------------------- */ |
2. Incluyendo marcas de colores comunes
| Código fuente de ejemplo : /* ---------------------------------- BANDERA Fondo del cuerpo: #def455 Fondo del contenedor: #fff Texto principal: #333 Enlaces: #00600f Enlaces visitados: #098761 Enlaces flotantes: #aaf433 H1, H2, H3: #960 H4, H5, H6: #000 ---------------------------------- */ |
3. Dé nombres significativos a ID y clase.
Método de denominación no recomendado:
| Código fuente de ejemplo : .caja verde {...} #texto grande {...} |
Método de denominación recomendado:
| Código fuente de ejemplo : .pullquote{...} #introducción {... } |
4. Integre reglas de estilo asociadas
| Código fuente de ejemplo : #encabezado {...} #encabezado h1 {...} #encabezado h1 img {...} #formulario de encabezado {...} #encabezado a#skip {...} #navegación {...} #navegación ul {...} #navegación ulli {...} #navegación ul li a {...} #navegación ul li a: hover {...} #contenido { ... } #contenido h2 {...} #contenidop {...} #contentul {...} #contentulli {...} |
5. Agregue comentarios claros a los estilos.
| Código fuente de ejemplo : /* ---------------------------------- estilos de encabezado ---------------------------------- */ #encabezado {...} #encabezado h1 {...} #encabezado h1 img {...} #formulario de encabezado {...} /* ---------------------------------- estilos de navegación ---------------------------------- */ #navegación {...} |