Logo de CSS

CSS

Propiedades

Responsive

Colores

Imágenes

GRID

Cuando defino el contenedor como grid, los hijos serán grid-items y dejarán de tener el comportamiento por defecto de block o de inline.
El comportamiento por defecto de grid es crear una columna, por lo que sus hijos seran filas. Para crear columnas, puedo usar la propiedad grid-auto-flow: column;.

Propiedades container

.container{
	display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
	grid-auto-flow: row;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	grid-auto-rows: minmax(100px, auto);
  grid-template-areas:
  "header header header"
  "main . sidebar"
  "footer footer footer"
  row-gap: 10px;
  column-gap: 20px;
  gap: 10px 20px;
  gap: 10px;
}

Propiedades items

.item {
  grid-column: 1 / 3;
  grid-column: 1 / -1; // -1 es la ultima linea
  grid-row: 1 / span 2;
  grid-area: header;
}

FLEX

Cuando defino el contenedor como flex, los hijos serán flex-items y dejarán de tener el comportamiento por defecto de block o de inline.
El comportamiento por defecto de flex es crear una fila, por lo que sus hijos
seran columnas.

Lo primero que hace flex, es poner el ancho de los elementos a su content size, y de ser necesario se encogen para que quepan en la fila, porque por defecto flex-shrink: 1. Lo que hace es que toma el espacio que hace falta para que quepan todos los elementos en la fila y lo divide por igual para cada elemento, por lo que si hay un elemento mas grande que el resto, va a seguir siendo mas grande.
Flexbox no tiene en cuenta el padding, margin o border de los elementos, solo mira el content size.

flex es el diminutivo de las propiedades flex-grow, flex-shrink y flex-basis y sus
valores por defecto son 0 1 auto, respectivamente. Cuando se usa flex: 1 los valores son 1 1 0, lo que hace que el elemento ponga su
width: min-content pero despues se expande hasta ocupar todo el espacio disponible.
flex-basis: 100% hace que el elemento tenga el tamaño de su content size, pero
se expande o encoge hasta ocupar todo el espacio disponible.
Cuando se usa flex-grow: 1, se toma todo el espacio disponible y se divide entre los elementos que tienen flex-grow: 1.

flex-flow es el diminutivo de las propiedades flex-direction y flex-wrap y sus valores por defecto son row nowrap, respectivamente.
Una vez flex-wrap: wrap se activa (por defecto es nowrap) y el contenido es multilinea, la propiedad align-content funciona.

Propiedades container

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-content: flex-end;
  justify-items: flex-start;
  align-items: flex-end;
  row-gap: 10px;
  column-gap: 20px;
  gap: 10px 20px;
  gap: 10px;
}

Propiedades items

.item {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 100%;
  flex: 1 1 100%;
  order: 1;
  justify-self: flex-start;
  align-self: flex-end;
}

SASS

Declarar variables al inicio del archivo: $color-primary: red;
Se usa: color: $color-primary
Si quiero usar las variables como selectores, se debe interpolar:

$selector: '.nav';
#{$selector} {
  color: red;
}

Partials definir un archivo sin que sea compilado, para después usarlos en un archivo SASS que referencie a esos archivos, para definir un archivo partial se pone un _ al inicio.
Para usar el partial en un archivo principal se usa: @use 'nombrePartial';. Sin poner el _
Puedo poner un alias al partial: @use 'nombrePartial' as nombreAlias;
Para usar una variable del archivo partial se hace referencia al nombre del partial y después el nombre de la variable: color: nombrePartial.$nombreVariable

Puedo crear un archivo _index.scss dentro de una carpeta para exportar los demás archivos de esa carpeta, y luego importarlos desde un solo lugar.
En el archivo _index.scss: @forward 'nombreArchivo';
Para usarlo en otro archivo: @use 'nombreCarpeta';, y por defecto mirará el archivo _index.scss.
Para usar una variable de uno de los archivos partials: color: nombreCarpeta.$nombreVariable;

Cuando se hace nesting, se usa el & para hacer referencia al elemento padre:

a {
  color: red;
  &:hover {
    color: blue;
  }
}

Ciclo for y condicional if

@for $iterador from 1 through 5 {
  .circle-#{$iterador} {
    color: red;
  }
  @if $iterador == 5 {
    color: blue;
  }
}

Mixins definen estilos que pueden ser reutilizados, pueden recibir parámetros y un valor por defecto, para definirlo:

@mixin alinear-contenido($justify: center) {
  display: flex;
  align-items: center;
  justify-content: $justify;
}

Usar el mixin:
@include alinear-contenido(center)
Si no recibe parámetros, no se pone paréntesis.
Para usar un mixin de un partial, se importa el partial y se usa:
@include nombrePartial.nombreMixin

Las funciones son parecidas a los mixins pero los mixins se usan para estilos y las funciones para otra lógica. Para definirla:

@function pixels-rem($pixeles) {
  $rem: $pixeles * 2rem;
  @return $rem;
}

Para usarla: font-size: pixels-rem(10);

Metodología BEM

BEM significa Bloque, Elemento, Modificador.

Un bloque es un contenedor donde se encontrarán los diferentes elementos. El bloque corresponde a la raíz de la clase y deberá ir siempre primero. Cuando ya está definido es posible nombrar los elementos que compondrán la estructura final y su contenido.
Algunas restricciones a la hora de nombrar un bloque:
No puedes usar mayúsculas. No puedes usar dos guiones bajos seguidos, porque está reservado para los elementos. Y tampoco puedes usar dos guiones seguidos, porque está reservado para los modificadores.

Un elemento es una de las piezas que compondrán la estructura de un bloque.

Un modificador sirve para modificar algunas propiedades de un bloque o elemento.

Para atacar los estilos del bloque en CSS, tienes que utilizar solo el selector de clase con el nombre del bloque.

Ejemplo:

<!-- EJEMPLO 1 -->
<div class="block">
  <div class="block__element">Elem 1</div>
  <div class="block__element">Elem 2</div>
  <div class="block__element block__element--modifier">Elem 3</div>
</div>
<!-- EJEMPLO 2 -->
<div class="item item--modifier">
  <div class="item__element">Elem 1</div>
  <div class="item__element">
    <div class="item__another-element">Elem 2</div>
    <div class="item__another-element">Elem 3</div>
  </div>
  <div class="item__element item__element--modifier">Elem 4</div>
</div>

Los estilos usando un preprocesador de css:

// EJEMPLO 1
.block {
  color: inherit;
  &__element {
    color: inherit;
    &--modifier {
      color: inherit;
    }
  }
}
// EJEMPLO 2
.item {
  color: inherit;
  &--modifier {
    color: inherit;
  }
  &__element {
    color: inherit;
    &--modifier {
      color: inherit;
    }
  }
  &__another-element {
    color: inherit;
  }
}

Otros

MIDUDEV

CSS (Cascading Style Sheets) es un lenguaje de estilos que nos permite darle estilo a nuestros documentos HTML.

Hay algunas propiedades que se heredan de su contenedor padre, por ejemplo, la fuente, pero hay otras que no como el borde.

El valor initial de una propiedad, es el valor por defecto de esa propiedad.
El valor inherit de una propiedad, hereda el valor de su contenedor padre.
El valor unset de una propiedad, resetea la propiedad, le quita las propiedades heredadas.

outline es el contorno del elemento, este se pone sobre el contenido del elemento, no afecta el layout.
border es el borde del elemento, este se pone alrededor del contenido del elemento, afecta el layout.

Pseudoclase :hover es cuando el mouse está sobre el elemento. Pseudoclase :active es cuando se hace click en el elemento.
Pseudoclase :focus es cuando el elemento tiene el foco.

Operador > es para seleccionar el hijo directo de un elemento.
Operador + es para seleccionar el hermano que sigue justo despues del elemento.
Operador ~ es para seleccionar todos los hermanos que vienen despues del elemento.

La especificidad de un selector es la suma de los valores de cada uno de sus selectores.
id tiene un valor de 1,0,0. clase, atributo y pseudo-clase tienen un valor de 0,1,0. elemento y pseudo-elemento tienen un valor de 0,0,1.

Usar Normalize CSS es mejor que usar Reset CSS porque no resetea todo, solo lo necesario. Tailwind ya hace este normalize por defecto.

El modelo de caja content-box es el modelo por defecto, el ancho y alto que se le da al elemento es el ancho y alto del contenido, no toma en cuenta el padding ni el border, estos 2 se van agregando a su tamaño.
En el modelo de caja border-box, el ancho y alto que se le da al elemento es el ancho y alto del contenido, padding y border.

El overflow por defecto es visible, es decir, el contenido que se sale del elemento se muestra. Es recomendable usar auto en vez de scroll porque el navegador va a saber gestionar mejor si poner el scroll o no.

Los elementos se posicionan por defecto de forma estática: position: static.

position: relative crea un punto relativo para uqe cualquier hijo pueda tomarlo como referencia para posicionarse.

position: absolute podemos definir su posición absoluta respecto al punto de referencia más cercano, es decir, si alguno de sus contenedores padre tiene position: relative, se posicionará respecto a este, sino, se posicionará respecto al documento.

position: fixed posiciona el elemento relativo a la pantalla, es decir, si hago scroll, el elemento se va a mantener en la misma posición. No le afecta position: relative de sus contenedores padre.

position: sticky se posiciona relativo a su contenedor padre y se mueve hasta donde su contenedor lo permita. Tiene en cuenta el position: relative de sus contenedores padre. Se debe acompañar de top, bottom, left o right para que se posicione.

Los elementos HTML vienen en 3D, hay un apilamiento o capas y de allí sale la propiedad z-index para darle la profundidad a los elementos.
Algunas propiedades crean el contexto de apilamiento, por ejemplo, position: fixed o opacity menor a 1.
Cuando existe este apilamiento, por derfecto, los elementos hijos se posicionan por encima de sus padres pero por debajo de otros elementos en otros nodos. Los elementos hermanos que estan más abajo en el documento quedan por encima de los otros.
En algunos casos se debe usar position: relative para que el z-index funcione, porque el contexto de apilamiento debe tener alguna referencia.

display: flex establece como tiene que funcionar el contenedor respecto a sus hijos. Permite alinear los elementos hijos. Es unidereccional, en un solo eje, es la diferencia con grid que funciona en 2 ejes.

Por defecto usa flex-wrap: nowrap y lo que hace es intentar que el contenido quepa en una sola linea, si no cabe, le cambia su tamaño para que quepa.
flex-wrap: wrap le dice que si no cabe el contenido en una linea, entonces puede hacer un salto de linea.

flex-flow es una forma abreviada de flex-direction y flex-wrap.

Los valores por defecto son:

Si pongo flex: 1 es lo mismo que poner flex: 1 1 0, es decir, flex-grow: 1, flex-shrink: 1 y flex-basis: 0. Los elementos empiezan desde el mismo tamaño base y crecen hasta tener el mismo tamaño para ocupar todo el espacio disponible.

GRID

Permite poner elementos encima de otros.

La principal diferencia con flex es que este trabaja en un solo eje, mientras que grid trabaja en 2 ejes.

El valor de auto para definir el tamaño de los elementos hace que se ajuste segun su contenido, si una columna tiene mas contenido va a tomar más espacio.

Con auto-fill, si no hay más elementos que cubran el espacio va a respetar el tamaño del elemento asi sobre espacio a los lados. Con auto-fit, si no hay más elementos que cubran el espacio, va a hacer crecer los elementos para cubrir todo el espacio disponible.

Se puede sobreponer unos elementos sobre otros con grid posicionandolos en el mismo lugar, quedaria por encima el elemento que esta más abajo en el DOM:

.container div:nth-child(1) {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
}
.container div:nth-child(2) {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
}

ANIMACIONES

scale cambia el tamaño del elemento solo visualmente porque sigue ocupando lo mismo.

Hay 2 formas de hacer animaciones, con transiciones y animaciones.

Con las transiciones tener cuidado al usar el all porque anima todas las propiedades y en el caso de las sombraas son muy costosas de animar. Es mejor especificar las propiedades que se van a animar.

Podemos hacer que las propiedades tengan diferentes transiciones. ej:

div {
  transition: background-color 0.3s ease-in, color 0.5s ease-out;
}

Para saber que se puede animar, podemos penasr en las propiedades que tienen un estado intermedio, por ejemmplo, cambiar de un color a otro o el tamaño de un elemento. Pero propiedades como background-image o font-family no tienen estado intermedio y no se pueden animar.

Se podria cambiar la transicion de entrada y salida de un elemento al poner distintas propiedades en los distintos estados:

div {
  transition: all 300ms ease-in; // estado final
}
div:hover {
  transition: all 1s ease-out; // la primera animación
}

Por temas de accesibilidad se puede poner una media query para los usuarios que prefieren no tener animaciones:

@media (prefers-reduced-motion: reduce) {
  div {
    transition: none;
  }
}

Utilidades