A lo largo del tiempo que lleva el blog activo, he recopilado artículos para nivel básico, medio, y ahora toca escribir uno para el nivel avanzado. Aquí traigo una lista de consejos sobre CSS vista en GitHub para gente experta en el tema, junto con una demostración:

Usar CSS Reset

CSS resets te ayuda a mostrar consistencia de estilos en distintos navegadores de forma limpia. Puedes usar una librería CSS reset como Normalize o trabajar con este trozo de código:

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

Demo

Nota: Si sigues el tip de abajo quizás no desees meter la propiedad «box-sizing» en tu CSS Reset.

Inherit box-sizing

Vamos a hacer que box-sizing esté heredado de html:

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

Esto hace más facil la tarea de cambiar box-sizing en plugins u otros componentes.

Usar :not() para aplicar/no aplicar bordes en navegación

En vez de poner el borde

.nav li {
border-right: 1px solid #666;
}

..y luego eliminarlo del último elemento:

/* remove border */
.nav li:last-child {
border-right: none;
}

…usa la pseudo-clase :not() para aplicarlo sólo a los elementos que desees:

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

Está claro que puedes usar.nav li + li o .nav li:first-child ~ li, pero con esta propiedad se definen los bordes de forma más humana

Demo

Añadir line-height al cuerpo

No necesitas añadir line-height a cada

, , etc. En vez de eso, añade al body:

body {
line-height: 1.5;
}

De esta manera los elementos heredarán el line-height del body.

Demo

Vertical-center a cualquier cosa

Realmente puedes hacerlo:

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

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

También puedes hacerlo horizontalmente, etc, revista este artículo para más info.

Nota: Existen posibles fallos en IE11.

Demo

Listas separadas por comas

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

Usa la pseudo clase :not() así las comas no se añadirán al ultimo item. the :not() pseudo-class so no comma is added to the last item.

Nota: Puede que falle en cuanto a accesibilidad, especialmente en dispositivos de lectura.

Selectionar items usando nth-child negativo

Usa nth-child negativo en CSS para seleccionar items a través de n.

li {
display: none;

/* select items 1 through 3 and display them */
li:nth-child(-n+3) {
display: block;
}

O, aplicando :not(), prueba:

/* select items 1 through 3 and display them */
li:not(:nth-child(-n+3)) {
display: none;
}

Demo

Usar SVG para iconos

No hay razón para no usar SVG para iconos:

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

SVG escala bien en todas las resoluciones y está soportado en todos los navegadores más adelantados que IE9.

Nota: Si tienes iconos en SVG y fallan al cargar, esto ayudará a la accesibilidad:

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

Usar el lobotomizado owl selector

Usar el selector universal (*) con el selector sibling (+) te proporcionará grandes posibilidades

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

En este ejemplo todos los elementos en el flujo del documento que siguen otros elementos recibirán margin-top: 1.5em. Para más información echa un vistazo aquí.

Demo

Usar max-height para CSS Sliders puros

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

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

El elemento se expande a la altura máxima on hover y el slider se muestra como resultado del overflow.

Igualar la anchura de celdas en tablas

Usando table-layout: fixed consigues una anchura igual en todas las tablas:

.calendar {
table-layout: fixed;
}

Demo

Olvidate de los margin hacks con Flexbox

Cuando se trabajan con gutters en columnas puedes usar la propiedad flexbox space-between para desacerte de nth-, first-, y last-child.

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

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

Ahora los gutters de las columnas aparecen separados siempre.

Usar selectores atributos con enlaces vacíos

Se muestra cuando el elemento no tiene valor de texto pero href tiene un enlace:

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

Demo

Estilizar enlaces por defecto

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

Los enlaces que no tengan el atributo class se distinguirán de sin afectar a la cascada.

Ritmo vertical consistente

Usando el selector universal (*) entre un elemento:

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

Esto hará que el contenido sea mucho más fácil de leer.

Ratio boxes intrínsecas

Para crear una caja con un ratio intrínseco, sólo tienes que aplicar padding top o bottom 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 el 20% para padding hace que la altura de la caja sea equivalente al 20% de su anchura, da igual la anchura de la ventana.

Demo

Estilizar imágenes rotas

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

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

Ahora añade pseudo elementos para mostrar un mensaje al usuario y una url en la imagen rota:

img:before {
content: "Lo siento, la imagen no funciona";
display: block;
margin-bottom: 10px;

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

Puedes leer más en Ire Aderinokun.

Usar rem para tamaño global y em para tamaño local:

Después de escribir la fuente base en el root (html { font-size: 100%; }), especifica el tamaño de la fuenta para elementos textuales a em:

h2 {
font-size: 2em;

p {
font-size: 1em;
}

Después especifica el tamaño de la fuente para módulos a rem:

article {
font-size: 1.25rem;

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

Ahora cada módulo es más fácil de estilizar y más flexible.

Esconder vídeos de autoplay que no están muteados

Si el sonido está muteado no mostrar el vídeo (gracias a la pseudo clase :not() nuevamente):

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

Usar :root para tipografía flexible

Ideal para adaptar la tipografía en todos los tamaños de ventana:

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

Puedes usar la unidad em en root: al valor calculado por :root.

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

Demo

Especificar la font-size en elementos del form para una mejor experiencia móvil

De esta forma los navegadores móviles no harán zoom en los elementos del form HTML cuando se presione el dropdown