Consejos Profesionales para CSS

Una colección de consejos para ayudarte a mejorar tus conocimientos profesionales de CSS.

Para ver otras listas geniales, echa un vistazo a la lista curada por @sindresorhus de listas Awesome.

Tabla de contenido

• Consejos Profesionales
• Soporte
• Pautas para contribuir

Consejos Profesionales

1. Utilizar un CSS Reset
2. Heredar box-sizing
3. Utilice unset en lugar de restablecer todas las propiedades
4. Usar :not() para Aplicar o Cancelar la aplicación de bordes en la navegación
5. Añadir line-height al body
6. Establecer :focus para elementos de formulario
7. Centrar cualquier cosa verticalmente
8. Listas separadas por comas
9. Seleccionar elementos usando nth-child negativo
10. Utilizar SVG para los íconos
11. Utilizar la herramienta de selección "Búho lobotomizado"
12. Usar max-height para Sliders con CSS puro
13. Celdas de tabla de igual ancho
14. Deshacerse de hacks para los márgenes en Flexbox
15. Utilizar atributos como selectores en enlaces vacíos
16. Estilizar enlaces por defecto
17. Ritmo vertical consistente
18. Cajas con proporciones intrínsecas
19. Estilizar enlaces rotos a imágenes
20. Usar rem para tamaños globales; Usar em para tamaños locales
21. Esconder videos con reproducción automática que no estén silenciados
22. Utilizar :root para una tipografía flexible
23. Definir font-size en los elementos de formulario para una mejor experiencia móvil
24. Usar eventos de puntero para controlar eventos de mouse

Utilizar un CSS Reset

Los CSS Resets ayudan a hacer cumplir la coherencia de estilo en los diferentes navegadores, como una hoja en blanco para los elementos de estilo. Puedes utilizar una biblioteca CSS Reset como Normalize, y otros, o puedes utilizar un enfoque más simplificado para el reset:

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

Ahora los elementos están despojados de márgenes y paddings, y box-sizing te permite administrar el diseño con el modelo de caja de CSS.

Demo

Nota: Si sigues el consejo de más abajo Heredar box-sizing puedes optar por no incluir la propiedad box-sizing en tu CSS reset.

^{volver al índice de contenidos}

Heredar box-sizing

Heredar box-sizing de html:

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

Esto hace que sea más fácil cambiar box-sizing en plugins u otros componentes que aprovechan otros comportamientos.

^{volver al índice de contenidos}

Utilice unset en lugar de restablecer todas las propiedades

Al restablecer las propiedades de un elemento, no es necesario restablecer cada propiedad individual:

button {
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  outline: none;
  padding: 0;
}

Puede especificar todas las propiedades de un elemento usando la taquigrafía all. Establecer el valor a unset cambia las propiedades de un elemento a sus valores iniciales:

button {
  all: unset;
}

Nota: la taquigrafía all no es compatible con IE11 y actualmente está bajo consideración para soporte en Edge. unset no es compatible con IE11.

^{volver al índice de contenidos}

Usar :not() para Aplicar o Cancelar la aplicación de bordes en la navegación

En lugar de poner en el borde...

/* Agrega estilo al borde */
.nav li {
  border-right: 1px solid #666;
}

... para luego quitarlo del último elemento...

/* quitar estilo al borde */
.nav li:last-child {
  border-right: none;
}

... utiliza la pseudo-clase :not() para sólo aplicar el estilo a los elementos que deseas:

.nav li:not(:last-child) {
  border-right: 1px solid #666;
}

Claro, se puede usar .nav li + li, pero con :not() la intención es muy clara y el selector CSS define los bordes de la forma en que un ser humano lo describiría.

Demo

^{volver al índice de contenidos}

Añadir line-height al body

No es necesario añadir line-height a cada<p>,<h *>, et al. por separado. En su lugar, agregalo al body:

body {
  line-height: 1.5;
}

De esta manera los elementos de texto pueden heredarlo fácilmente de body.

Demo

^{volver al índice de contenidos}

Establecer :focus para elementos de formulario

Los usuarios de teclado videntes confían en el enfoque para determinar dónde van los eventos del teclado en la página. Haga que el enfoque de los elementos de formulario se destaque y sea coherente con la implementación predeterminada de un navegador:

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
  box-shadow: none;
  outline: #000 dotted 2px;
  outline-offset: .05em;
}

Demo

^{volver al índice de contenidos}

Centrar cualquier cosa verticalmente

No, no es magia negra, realmente puedes centrar elementos verticalmente:

html,
body {
  height: 100%;
  margin: 0;
}

body {
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-flex;
  display: flex;
}

...y también con CSS Grid:

body {
  display: grid;
  height: 100vh;
  margin: 0;
  place-items: center center;
}

¿Quieres centrar algo más? Vertical, horizontal… cualquier cosa, en cualquier momento y en cualquier lugar? CSS-Tricks tiene un bonito artículo para hacer todo eso.

Nota: mira algunos comportamientos erróneos de Flexbox en IE11.

Demo

^{volver al índice de contenidos}

Listas separadas por comas

Hacer que los elementos de la lista se vean de forma real, separados por comas:

ul > li:not(:last-child)::after {
  content: ",";
}

Utilice la pseudo-clase :not() para agregar una coma al último elemento.

Nota: Este consejo puede no ser ideal para la accesibilidad, específicamente para lectores de pantalla. Y copiar / pegar desde el navegador no funciona con el contenido generado por CSS. Procede con precaución.

^{volver al índice de contenidos}

Seleccionar elementos usando nth-child negativo

Utiliza nth-child negativo en CSS para seleccionar los numerales de 1 a n.

li {
  display: none;
}

/* seleccionar los elementos de 1 hasta 3 y muestralos */
li:nth-child(-n+3) {
  display: block;
}

O bien, como ya has aprendido un poco sobre [el uso de :not()](# uso no-a-applyunapply-fronteras-on-navegación), trata de:

/* seleccionar todos los elementos excepto los 3 primeros y mostrarlos */
li:not(:nth-child(-n+3)) {
  display: none;
}

Bueno, éso ha sido bastante fácil.

Demo

^{volver al índice de contenidos}

Utilizar SVG para los íconos

No hay ninguna razón para no usar SVG para los íconos:

.logo {
  background: url("logo.svg");
}

SVG funciona bien para todos los tipos de resoluciones y es compatible con todos los navegadores hasta IE9. Así que olvidate de tus archivos .png, .jpg o .gif-jif-loquesea.

Nota: Si tienes botones de íconos con SVG para usuarios no videntes y el SVG falla al cargar, esto te ayudará a mantener la accesibilidad:

.no-svg .icon-only::after {
  content: attr(aria-label);
}}

^{volver al índice de contenidos}

Utilizar la herramienta de selección "Búho lobotomizado"

Puede que tenga un nombre extraño, pero utilizando el selector universal (*) con el selector de hermanos adyacentes (+) puedes proporcionar una potente capacidad de CSS:

* + * {
  margin-top: 1.5em;
}

En este ejemplo, todos los elementos del flujo del documento que siguen otros elementos recibirán margin-top: 1.5em.

Para más información sobre el selector "búho lobotomizado", lee el post de Heydon Pickering en A List Apart.

Demo

^{volver al índice de contenidos}

Usar max-height para Sliders con CSS puro

Implementar un slider con CSS puro utilizando max-height con overflow hidden.

.slider {
  max-height: 200px;
  overflow-y: hidden;
  width: 300px;
}

.slider:hover {
  max-height: 600px;
  overflow-y: scroll;
}

El elemento se expande hasta el valor de max-height en hover y el slider se muestra como resultado del desbordamiento (overflow).

^{volver al índice de contenidos}

Celdas de tabla de igual ancho

Las tablas pueden ser dolorosas para trabajar, por lo que se trate de usar table-layout: fixed para mantener las celdas con el mismo ancho:

.calendar {
  table-layout: fixed;
}

Diseño de tablas sin dolor.

Demo

^{volver al índice de contenidos}

Deshacerse de hacks para los márgenes en Flexbox

Cuando trabajas con el espaciado entre columnas puedes deshacerte de los hacks con nth-, first- y last-child mediante el uso de la propiedad space-between de Flexbox:

.list {
  display: flex;
  justify-content: space-between;
}

.list .person {
  flex-basis: 23%;
}

Ahora las columnas aparecen siempre espaciadas uniformemente.

^{volver al índice de contenidos}

Utilizar atributos como selectores en enlaces vacíos

Mostrar vínculos cuando el elemento <a> no tiene un valor de texto, pero el atributo href tiene un enlace:

a[href^="http"]:empty::before {
  content: attr(href);
}

Eso es bastante conveniente.

Demo

^{volver al índice de contenidos}

Estilizar enlaces por defecto

Añadir un estilo a los enlaces "por defecto":

a[href]:not([class]) {
  color: #008000;
  text-decoration: underline;
}

Ahora los enlaces que se insertan a través de un CMS, que por lo general no tienen un atributo class, tendrán una distinción sin afectar de forma genérica la cascada.

^{volver al índice de contenidos}

Ritmo vertical consistente

Utilice un selector universal (*) dentro de un elemento para crear un ritmo vertical consistente:

.intro> * {
  margin-bottom: 1.25rem;
}

Un ritmo vertical consistente proporciona una estética visual que hace que el contenido sea mucho más legible.

^{volver al índice de contenidos}

Cajas con proporciones intrínsecas

Para crear un cuadro con una proporción intrínseca, todo lo que tiene que hacer es aplicar un padding superior o inferior a un div:

.container {
  height: 0;
  padding-bottom: 20%;
  position: relative;
}

.container div {
  border: 2px dashed #ddd;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

Usando un 20% de padding hace que la altura de la caja sea igual al 20% de su anchura. No importa el ancho de la ventana, el div hijo va a mantener su relación de aspecto (100% / 20% = 5: 1).

Demo

^{volver al índice de contenidos}

Estilizar enlaces rotos a imágenes

Haz que las imágenes rotas sean estéticamente más agradables con un poco de CSS:

img {  
  display: block;
  font-family: sans-serif;
  font-weight: 300;
  height: auto;
  line-height: 2;
  position: relative;
  text-align: center;
  width: 100%;
}

Ahora añade propiedades desde los pseudo-elementos para mostrar un mensaje al usuario y una referencia de dirección URL de la imagen rota:

img::before {  
  content: "We're sorry, the image below is broken :(";
  display: block;
  margin-bottom: 10px;
}

img::after {  
  content: "(url: " attr(src) ")";
  display: block;
  font-size: 12px;
}

Aprende más sobre el estilo de este patrón en post original de Iré Aderinokun.

^{volver al índice de contenidos}

Usar rem para tamaños globales; Usar em para tamaños locales

Después de definir el tamaño de la fuente base en la raíz (html { font-size: 100%; }), ajusta el tamaño de fuente para los elementos textuales con em:

h2 {
  font-size: 2em;
}

p {
  font-size: 1 em;
}

A continuación, establezca el tamaño de fuente para los módulos con rem:

article {
  font-size: 1.25rem;
}

aside .module {
  font-size: .9rem;
}

Ahora cada módulo se vuelve compartimentado y más fácil de estilizar, más fácil de mantener, y más flexible.

^{volver al índice de contenidos}

Esconder videos con reproducción automática que no estén silenciados

Este es un gran truco para una hoja de estilo de usuario personalizada. Evita la sobrecarga de un usuario con el sonido de un vídeo que se reproduce automáticamente cuando se carga la página. Si el sonido no está silenciado, no se muestra el video:

video[autoplay]:not([muted]) {
  display: none;
}

Una vez más, estamos tomando ventaja de usar la pseudo-clase :not().

^{volver al índice de contenidos}

Utilizar :root para una tipografía flexible

El tamaño de tipo de letra en un diseño que responde debe ser capaz de ajustar con cada ventana. Se puede calcular el tamaño de la fuente basada en la altura y la anchura de la ventana gráfica usando :root:

:root {
  font-size: calc(1vw + 1vh + .5vmin);
}

Ahora se puede utilizar la unidad de root em basado en el valor calculado por :root:

body {
  font: 1rem/1.6 sans-serif;
}

^{volver al índice de contenidos}

Definir font-size en los elementos de formulario para una mejor experiencia móvil

Para evitar que los navegadores móviles (iOS Safari, et al.) hagan zoom sobre los elementos de un formulario HTML cuando un <select> desplegable es pulsado, agrega font-size a la regla del selector:

input[type="text"],
input[type="number"],
select,
textarea {
  font-size: 16px;
}

💃

^{volver al índice de contenidos}

Usar eventos de puntero para controlar eventos de mouse

Eventos del puntero le permiten especificar cómo el mouse interactúa con el elemento que está tocando. Para deshabilitar el evento de puntero predeterminado en un botón, por ejemplo:

.button-disabled {
  opacity: .5;
  pointer-events: none;
}

Es así de simple.

^{volver al índice de contenidos}

Soporte

Las versiones actuales de Chrome, Firefox, Safari, Opera, Edge y IE11.