Aprender CSS leyendo el código fuente de Bootstrap

Si alguna vez habéis personalizado algún framework CSS tal como Foundation o Bulma, habréis visto que personalizar variables de tipo Map requiere reescribirlas todas.

Veamos esto con un ejemplo:

Estamos personalizando el framework CSS Foundation. Las variables para sobreescribir están localizadas en el archivo _settings.scss.

De todas esas variables, queremos actualizar el color primary de la variable foundation-palette, el cual viene definido como:

$foundation-palette: (
  primary: #1779ba,
  secondary: #767676,
  success: #3adb76,
  warning: #ffae00,
  alert: #cc4b37,
);

Para redefinir el color primary de la variable foundation-palette, tendríamos que hacer lo siguiente:

$foundation-palette: (
  primary: #C010A, // color actualizado
  secondary: #767676,
  success: #3adb76,
  warning: #ffae00,
  alert: #cc4b37,
);

A pesar de querer actualizar únicamente un único color de la paleta de colores, he tenido que definir todos ellos.

Esto no me pareció lo mas correcto posible. Por ello, estuve leyendo el código fuente de varios de los CSS frameworks existentes como Boostrap, Foundation o Bulma.

Ciertamente, cada uno de ellos expone diferentes formas de personalizar el framework. Me gustó como Bootstrap permite actualizar la paleta de colores, evitando redefinir todos los colores.

Usa la bandera !default y un pequeño truco.

$theme-colors: () !default;
$theme-colors: map-merge((
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
), $theme-colors);

El uso de la bandera !default es bienvenido, así como tener variables para el color primario, secundario y otros.

Con la definición que Bootstrap ofrece, si queremos actualizar el color primario, solo tendríamos que actualizar la variable $primary. Si quisieramos añadir una nueva variable a la paleta de colores, haríamos lo siguiente:

$theme-colors: (
  "tertiary":    $tertiary,
);

Solo he tenido que definir el nuevo color sin necesidad de redefinir todos los anteriores.

Tengas la experiencia que tengas, te recomiendo leer el código fuente de varios CSS frameworks. Te aseguro que aprenderás algo de ellos si prestan atención a sus detalles.