Estilos CSS recomendados

Estos son algunos estilos base que conviene aplicar al comenzar cualquier proyecto.

box-sizing

Por defecto, el navegador calcula el ancho y alto de un elemento sin contar el padding ni el border. Con border-box el padding y el border quedan incluidos dentro del ancho/alto definido, lo cual facilita mucho maquetar.

* {
  box-sizing: border-box;
}

Quitar margin y padding por defecto

Cada navegador aplica sus propios márgenes y paddings a elementos como body, h1, ul, etc. Los reseteamos a 0 para partir de una base predecible.

* {
  box-sizing: border-box;
  margin: 0; /* Nuevo */
  padding: 0; /* Nuevo */
}

Imágenes responsivas

Para que una imagen nunca se desborde de su contenedor, le limitamos el ancho máximo al 100%.

img {
  max-width: 100%;
}

Tipografía del body

Conviene definir un font-family en el body para que toda la página herede la misma tipografía en lugar de depender del estilo por defecto del navegador.

body {
  font-family: "Tipografía personalizada", sans-serif;
}

Contenedor

Clase reutilizable para centrar y limitar el ancho del contenido dentro de una sección.

.contenedor {
  max-width: 1200px;
  margin: 0 auto;
}

Todo junto

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

img {
  max-width: 100%;
}

body {
  font-family: "Tipografía personalizada", sans-serif;
}

.contenedor {
  max-width: 1200px;
  margin: 0 auto;
}

Con estos estilos aplicados, trabajar los estilos de una página web se vuelve predecible y evitamos cometer varios errores comunes.