Una imagen es un 'inline-element' por lo que es recomendable insertarla en un div para manejarla.
Un 'block' ocupa todo el espacio que tiene disponible y crea saltos de línea antes y después.

Pilares del CSS básico

Diseño responsivo : ajuste a todo tipo de resoluciones y formatos de pantalla.
Código mantenible y escalable: limpieza y fácil entendimiento.
Rendimiento Web: minimizar el tamaño de la Web y reducir el número de solicitudes HTTP.

Flujo de carga de una página web

Carga del HTML -> Decodificación del HTML => DOM (Document Object Model) Decodificación del HTML -> Carga del CSS -> Decodificación del CSS (Resolución de conflictos y procesado final de valores) => CSSOM (CSS Object Model) DOM + CSSOM => Árbol de renderizado -> Modelo de formateado visual => Web final en pantalla

Decodificación del CSS

Importancia -> Especifidad -> Orden

Hay declaración por defecto y declaraciones de autor.

.<selector> { //Bloque de declaración
    <propiedad>: <valor_declarado>; //Declaración
}

Importancia

!important
Autor
Por defecto

Especifidad

En caso de empatar en importancia entra en juego la especificidad. Se mira como un array: (0,0,1,0) sería una clase, (0,1,2,2) un elemento con 1 ID, 2 clases y 2 elementos.

Estilos en línea (dentro del elemento)
IDs
Clases y pseudoclases
Elementos

Procesamiento de los valores

La unidad (no es una unidad pero la tratamos como tal) '%' cuando se aplica en fuentes, parte del tamaño de la fuente del padre.
La unidad 'em' actua diferente para tamaños de letra y para elementos:
- Para fuentes toma el tamaño de la fuente del elemento padre.
- Para elementos toma el tamaño de la fuente del elemento actual.
Si una propiedad es heredada, no se hereda el valor especificado, si no el ya procesado sobre los valores del padre (en pixeles por ejemplo).
NO todas las propiedades heredan del padre a falta de estar especificadas, es cuyo caso el valor especificado será el inicial (por defecto).
Darle valor a 'font-size' en 'html{}' hará que no se cambien los valores de la fuente con los ajustes del navegador, esta es una práctica muy mala.
- Solución: html { font-size: 100%; } -> Tendrá por defecto 16px, y cambiará si el usuario así lo decide en las opciones de su navegador.

Tamaños de los contenedores

Por defecto, si creamos un contenedor con altura 100px y le añadimos un padding de 20 píxeles arriba y abajo, el contenedor terminará ocupando 140px. No es muy práctico:
- Solución: box-sizing: border-box. El elemento terminará con 100px.

Animaciones

Hay dos tipos de animaciones:

Con la propiedad 'transition'
Con keyframes
- Lo ideal es solo animar con opacity y transform, porque los navegadores están optimizados para ellas dos solo.

Pseudo-elementos

Estados especiales de un selector (:hover, :link, etc.) ::after -> Add a virtual element 'after' el elemento

SASS

Preprocesador de css.

$ live-server $ npm run compile:sass

Bases of responsive design

Use fluid layouts
Use % instead of px, especially in images
Use max-width instead of width, especially in images
Use rem instead of px
Use media queries when the rest fails

Fluid Layouts

Float : older way of doing the same job
Flexbox : 1 dimensional rows
CSS Grid : 2 dimensional grids

Selectors

Select all the elements that starts with col-

[class^='col-'] {
    background-color: red;
}

Select all the elements that ends with col-

[class$='col-'] {
    background-color: red;
}

Select all elements but the last

&:not(:last-child) {
    //stuff
}

Select elements not hovered on continer hovered 'nombre__photo'

&:hover &__photo:not(:hover) {
    transform: scale(0.9);
}

Bordes

Borders can be achieved on a more advanced way with outline, it allows us to create a gap on a simple manner.

Outline

outline-offset: 2rem;
outline: 1.5rem solid $color-primary;

Shadows

box-shadow : box-shadow: offsetX offsetY blur color

box-shadow: 0 1.5rem 4rem rgba($color-black, .4);