En este post quiero compartir con vosotros una serie de 20 útiles consejos y buenas prácticas recomendados por la comunidad de CSS. Algunos están más enfocados a principiantes, y algunos son un poco más avanzados, pero espero que todo el mundo encuentre un buen truco que no conociese. ¡A disfrutar!
Cuidado con el colapso de márgenes
A diferencia de muchas otras propiedades, los márgenes verticales colapsan cuando se juntan. Lo que esto significa es que cuando el margen inferior de un elemento toca el margen superior de otro, sólo el mayor de los dos sobrevive. Aquí tienes un ejemplo sencillo:
.square {
width: 80px;
height: 80px;
}
.red {
background-color: #F44336;
margin-bottom: 40px;
}
.blue {
background-color: #2196F3;
margin-top: 30px;
}
div class="square red"></div>
<div class="square blue"></div>
En lugar de 70 píxeles entre el cuadrado rojo y el azul tenemos solo 40px, el margen del cuadrado azul no se tiene en cuenta en absoluto. Hay formas de combatir este comportamiento, pero es mejor acostumbrarse a él y utilizar solamente márgenes que vayan en una dirección, preferentemente margin-bottom.
Usa flexbox en tus diseños
El modelo flexbox existe por una razón. Los floats y los inline-blocks funcionan, pero todos son esencialmente herramientas para documentos de estilo, no para páginas web. El modelo flexbox, por el contrario, se ha diseñado específicamente para que sea fácil crear cualquier diseño exactamente de la forma en que fue visionado.
El conjunto de propiedades que vienen con el modelo flexbox otorga a los desarrolladores una gran flexibilidad, y una vez que te acostumbres, hacer cualquier diseño responsive es coser y cantar. La compatibilidad con navegadores actualmente es casi total, por lo que no hay nada que te impida que te tires de lleno a la piscina flexbox.
.container {
display: flex;
/* Don't forget to add prefixes for Safari */
display: -webkit-flex;
}
Haz un CSS Reset
Aunque la situación ha mejorado mucho en los últimos años, todavía hay un montón de variaciones en la forma que tienen los diversos navegadores de comportarse. La mejor manera de resolver este problema es aplicar CSS Reset que establezca los valores por defecto universales para todos los elementos, lo que te permite empezar a trabajar en una hoja de estilo limpia que producirá el mismo resultado en todas partes.
Hay librerías como normalize.css, minireset, y ress que hacen esto muy bien, corrigiendo todas las inconsistencias imaginables del navegador. Si no deseas utilizar una librería, puedes hacer un CSS Reset básico con estos estilos:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
Puede parecer un poco duro, pero anulando los márgenes y los paddings trazaremos elementos de forma más sencilla ya que no hay espacios predeterminados entre ellos a tener en cuenta. La propiedad box-sizing: border-box es otro valor a tener en cuenta del cual vamos a hablar en el siguiente consejo.
Border-box para todo
La mayoría de los novatos ni conocen la propiedad box-sizing, y en realidad es bastante importante. La mejor manera de entender lo que hace, es echar un vistazo a sus dos posibles valores:
- content-box (por defecto) - Cuando establecemos una ancho o un alto a un elemento, es sólo el tamaño de su contenido. Todos los paddings y bordes están por encima de eso. Por ejemplo, un div que tiene una anchura de 100 y un padding de 10, ocupará un total de 120 píxeles (100 + 2 * 10).
- border-box - El padding y el borde se incluyen en la anchura/altura. Un div con ancho de 100px y box-sizing: border-box; tendrá 100 píxeles de ancho, sin importar los bordes o los paddings que añadas.
Definiendo un border-box a todos los elementos hace que sea mucho más fácil de personalizarlo todo, ya que no tienes que hacer cálculos todo el rato.
Imágenes como fondo
Al añadir imágenes a tu diseño, especialmente si van a ser responsive, utiliza un tag div con la propiedad background de CSS en lugar de un elemento img.
Esto puede parecer mucho trabajo para nada, pero en realidad hace que sea mucho sencillo dar estilo a las imágenes correctamente, manteniendo su tamaño original y su aspect-ratio, gracias a background-size, background-position y demás propiedades.
img {
width: 300px;
height: 200px;
}
div {
width: 300px;
height: 200px;
background: url('http://ejemplo.com/imagen.jpg');
background-position: center center;
background-size: cover;
}
section{
float: left;
margin: 15px;
}
<section>
<p>Img element</p>
<img src="http://ejemplo.com/imagen.jpg" alt="imagen">
</section>
<section>
<p>Div with background image</p>
<div></div>
</section>
Un inconveniente de esta técnica es que la accesibilidad de la web se verá resentida, ya que las imágenes no podrán ser rastreadas adecuadamente por los lectores de pantalla y por los motores de búsqueda. Este problema puede ser resuelto por el impresionante object-fit, pero cuenta con soporte en muchos navegadores aún.
Tablas con bordes simples
Las tablas de HTML no molan. Son raras, casi imposible de convertirse en responsive, y por regla general, difíciles a la hora de darles estilo. Por ejemplo, si deseas agregar bordes simples a tu tabla y a tus celdas, lo más probable es que acabes así:
table {
width: 600px;
border: 1px solid #505050;
margin-bottom: 15px;
color:#505050;
}
td{
border: 1px solid #505050;
padding: 10px;
}
<table>
<thead>
<tr>
<th >Title</th>
<th >Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="http://programacion.net/articulo/el_mejor_metodo_para_embeber_videos_de_youtube_en_tu_web_1578">El mejor método para embeber vídeos de YouTube en tu web</a></td>
<td>Es fácil insertar un vídeo de YouTube en tu web, y eso es bien, lo que no es bien es la carga extra que el susodicho vídeo de YouTube embebido añade a tus páginas web.</td>
</tr>
<tr>
<td><a href="http://programacion.net/articulo/como_leer-_parsear_y_mostrar_datos_xml_en_orden_aleatorio_con_jquery_1577">Cómo leer, parsear y mostrar datos xml en orden aleatorio con jQuery</a></td>
<td>En este tutorial veremos cómo crear un script de jQuery que lea y parsee un archivo XML, para después mostrar sus datos en orden aleatorio.</td>
</tr>
</tbody>
</table>
Como se puede ver, los bordes se repiten en todas partes y no se ve bien. Aquí tienes una forma rápida de eliminar todos los bordes duplicados: sólo tienes que añadir border-collapse:collapse; a la mesa.
table {
width: 600px;
border: 1px solid #505050;
margin-bottom: 15px;
color: #505050;
border-collapse: collapse;
}
td{
border: 1px solid #505050;
padding: 10px;
}
<table>
<thead>
<tr>
<th >Title</th>
<th >Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="http://programacion.net/articulo/el_mejor_metodo_para_embeber_videos_de_youtube_en_tu_web_1578">El mejor método para embeber vídeos de YouTube en tu web</a></td>
<td>Es fácil insertar un vídeo de YouTube en tu web, y eso es bien, lo que no es bien es la carga extra que el susodicho vídeo de YouTube embebido añade a tus páginas web.</td>
</tr>
<tr>
<td><a href="http://programacion.net/articulo/como_leer-_parsear_y_mostrar_datos_xml_en_orden_aleatorio_con_jquery_1577">Cómo leer, parsear y mostrar datos xml en orden aleatorio con jQuery</a></td>
<td>En este tutorial veremos cómo crear un script de jQuery que lea y parsee un archivo XML, para después mostrar sus datos en orden aleatorio.</td>
</tr>
</tbody>
</table>
¡Mucho mejor!
Mejores comentarios
CSS puede no ser un lenguaje de programación de código, pero necesita estar documentado. Algunos comentarios son muy útiles a la hora de organizar una hoja de estilo y hacerla más accesible a tus compañeros o tu yo del futuro.
Para bloques grandes de CSS como componentes o media-queries, utiliza comentarios estilizados y deja un par de nuevas líneas después:
/*---------------
#Header
---------------*/
header { }
header nav { }
/*---------------
#Slideshow
---------------*/
.slideshow { }
Los detalles en el diseño o los componentes menos importantes pueden ser descritos con un comentario en una sola línea.
/* Footer Buttons */
.footer button { }
.footer button:hover { }
Además, recuerda que CSS no tiene comentarios individuales //, por lo que la hora de comentar algo tendrás que utilizar la sintaxis / * * /.
/* Do */
p {
padding: 15px;
/*border: 1px solid #222;*/
}
/* Don't */
p {
padding: 15px;
// border: 1px solid #222;
}
Nombra bien
Los nombres de clases e identificadores deben ser escritos con un guión medio (-) cuando contienen más de una palabra. CSS diferencia entre mayúsculas y minúsculas, por lo que camelCase no es una opción.
/* Do */
.footer-column-left { }
/* Don't */
.footerColumnLeft { }
.footer_column_left { }
No te repitas
Los valores para la mayoría de las propiedades CSS son heredados del elemento superior en el árbol DOM, de ahí viene el nombre de hojas de estilo en cascada. Vamos a coger la propiedad font, por ejemplo, que casi siempre se hereda del padre. Dicha propiedad no tienes que volver a configurarla de nuevo para cada elemento de la página.
Basta con añadir los estilos de fuente que serán más frecuentes en tu diseño para el elemento html o body y dejar que se hereden. Estos son algunos buenos valores por defecto:
html {
font: normal 16px/1.4 sans-serif;
}
Después, siempre puedes cambiar los estilos para cualquier elemento dado. Lo que te estoy diciendo es que evites la repetición y utilices la herencia tanto como sea posible.
Animaciones CSS con transform
No animes elementos cambiando directamente su anchura o altura, o su posición. Es preferible utilizar la propiedad transform, ya que proporciona transiciones más suaves y hace que tus sean más entendibles a la hora de leer el código.
He aquí un ejemplo. Queremos animar una pelota y deslizarla hacia la derecha. En lugar de cambiar el valor de la izquierda, es mejor utilizar translateX():
.ball {
left: 50px;
transition: 0.4s ease-out;
}
/* Not Cool*/
.ball.slide-out {
left: 500px;
}
/* Cool*/
.ball.slide-out {
transform: translateX(450px);
}
Transform, así como muchas de sus funciones (translate, rotate, scale, etc.) son compatibles con casi todos los navegadores y se pueden utilizar libremente.
Fuente: tutorialzine.com