10 mejores prácticas de CSS para mejorar tu código
Es muy fácil encontrarse preguntándose cómo su CSS llegó a ser un desastre.
A veces es el resultado de una codificación descuidada desde el principio, a veces se debe a múltiples ataques y cambios a lo largo del tiempo.
Cualquiera que sea la causa, no tiene por qué ser así. Escribir CSS limpio y supergestionable es simple cuando comienzas con el pie derecho y haces que tu código sea más fácil de mantener y editar más adelante.
Aquí hay 11 consejos para acelerar el proceso, escribir CSS que es más delgado, más rápido y con menos probabilidades de causarle dolor de cabeza.
1. Manténgase organizado
Al igual que cualquier otra cosa, vale la pena mantenerse organizado. En lugar de caer al azar en las identificaciones y las clases en el orden en que vienen a la mente, use una estructura coherente.
Le ayudará a tener en cuenta la parte en cascada de CSS y configurará su hoja de estilo para aprovechar la herencia de estilo.
Declare primero sus artículos más genéricos, luego los no genéricos y demás. Esto permite que su CSS herede apropiadamente los atributos y hace que sea mucho más fácil para usted anular un estilo específico cuando lo necesite. Serás más rápido en editar tu CSS más tarde porque seguirá una estructura lógica fácil de leer.
Use una estructura que funcione mejor para usted, teniendo en cuenta las ediciones futuras y otros desarrolladores.
- Restablece y anula
- Enlaces y tipo
- Diseño principal
- Estructuras de disposición secundaria
- Elementos de forma
- Diverso
2. Título, fecha y signo
Deje que otros sepan quién escribió su CSS, cuándo se escribió y con quién contactar si tienen preguntas al respecto. Esto es especialmente útil al diseñar plantillas o temas.
Espera un minuto ... ¿qué tienen los colores de las muestras ? Con el paso de los años, descubrí que agregar una simple lista de colores comunes utilizados en mis hojas de estilo es extremadamente útil durante el desarrollo inicial y al realizar modificaciones más adelante.
Esto le ahorra tener que abrir Photoshop para muestrear un color del diseño, o buscar colores en el sitio guía de estilo (si tiene uno) Cuando necesite el código HTML para ese azul específico, simplemente desplácese hacia arriba y cópielo.
3. Mantenga una biblioteca de plantillas
Una vez que haya establecido una estructura para usar, elimine todo lo que no sea genérico y guarde el archivo como una plantilla CSS para usarlo más adelante.
Puede guardar múltiples versiones para múltiples usos: un diseño de dos columnas, un diseño de blog, impresión, móvil, etc. Coda (el editor para OSX) tiene una característica de Clips impresionante que te permite hacer esto fácilmente. Muchos otros editores tienen una función similar, pero incluso un simple lote de archivos de texto funcionará muy bien.
Es una locura volver a escribir todas y cada una de tus hojas de estilo desde el principio, especialmente cuando estás usando las mismas convenciones y metodologías en cada una de ellas.
4. Usar convenciones de nomenclatura útiles
Notarás más arriba donde declaré un par de id. De columna y los llamé col-alpha y col-beta. ¿Por qué no simplemente llamarlos col-left y col-right? Piensa en ediciones futuras, siempre.
El próximo año puede necesitar rediseñar su sitio y mover esa columna de la izquierda hacia la derecha. No debería tener que cambiar el nombre del elemento en su HTML y cambiarle el nombre a la identificación en su hoja de estilos solo para cambiar su posición.
Claro, podrías cambiar la posición de la columna izquierda a la derecha y mantener la identificación como # col-left, pero ¿qué tan confuso es eso? Si la identificación dice a la izquierda, uno debe esperar que siempre esté a la izquierda. Esto no le deja mucho espacio para mover las cosas más adelante.
Una de las principales ventajas de CSS es la capacidad de separar los estilos del contenido. Puede rediseñar totalmente su sitio simplemente modificando el CSS sin tener que tocar el HTML. Así que no arruines tu CSS usando nombres limitantes . Use convenciones de nomenclatura más versátiles y mantenga la coherencia.
Deje la posición o el estilo de palabras específicas de sus estilos e id. Una clase de .link-blue hará más trabajo para usted, o hará que su hoja de estilos sea realmente desordenada cuando su cliente le pida más tarde que cambie esos enlaces azules a naranja.
Nombra tus elementos según lo que son, no como se ven. Por ejemplo, .comment-blue es mucho menos versátil que .comment-beta, y .post-largefont es más limitante que .post-title.
5. Guiones en lugar de subrayados
A los navegadores antiguos les gusta tener errores con guiones bajos en CSS, o no los admiten en absoluto. Para una mejor compatibilidad con versiones anteriores, adquiera el hábito de usar guiones en su lugar. Use # col-alpha en lugar de #col_alpha.
6. No te repitas
Reutilice atributos siempre que sea posible agrupando elementos en lugar de declarar los estilos nuevamente. Si los elementos h1 y h2 usan el mismo tamaño de fuente, color y márgenes, agrúpelos con una coma.
Esta:
También debe hacer uso de atajos siempre que sea posible. Siempre esté atento a las oportunidades de agrupar elementos y usar atajos de declaración.
Usted puede lograr todo esto:
con solo esto:
Es muy importante que comprenda el orden en que CSS interpreta estos accesos directos: arriba, derecha, abajo, izquierda. Un gran círculo en el sentido de las agujas del reloj, comenzando al mediodía.
Además, si sus atributos superiores e inferiores, o los atributos de la izquierda y la derecha son los mismos, solo necesita usar dos:
Esto establece los márgenes superior e inferior a 1em, y los márgenes izquierdo y derecho a 0.
7. Optimizar para hojas de estilo ligero
Usando los consejos anteriores, realmente puede reducir el tamaño de sus hojas de estilo. Cargas más pequeñas más rápido y más pequeño es más fácil de mantener y actualizar.
Recorte lo que no necesita y consolide siempre que sea posible mediante la agrupación. Tenga cuidado al usar marcos de CSS enlatados también. Es probable que heredes mucho bulto que no se usará.
Otro consejo rápido para CSS delgado: no necesita especificar una unidad de medida cuando usa cero. Si un margen se establece en 0, no necesita decir 0px o 0em. Cero es cero independientemente de la unidad de medida, y CSS lo comprende.
8. Escribe tu base para Gecko, luego ajusta para Webkit e IE
Ahórrese problemas para solucionar problemas y escriba CSS primero para los navegadores Gecko (Firefox, Mozilla, Netscape, Flock, Camino). Si su CSS funciona correctamente con Gecko, es mucho más probable que no tenga problemas en Webkit (Safari, Chrome) e Internet Explorer.
9. Validar
Hacer uso de Validador de CSS gratuito del W3C . Si está atascado y su diseño no está haciendo lo que quiere que haga, el validador de CSS será de gran ayuda para señalar los errores.
10. Mantenga una casa ordenada
Separe el CSS específico del navegador en su propia hoja de estilo e incluya, según sea necesario, el código JavaScript, el lado del servidor o comentarios condicionales . Utilice este método para evitar hackers CSS sucios en sus hojas de estilo principales. Esto mantendrá su CSS base limpio y manejable.
Escrito exclusivamente para WDD por Jeff Couturier
¿Sigue estos métodos al codificar sus sitios web? ¿Qué otras técnicas usas para crear un mejor código?