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

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