¿Cómo se llaman las variables de color? | Programar Plus

0

¿Qué esquema de nomenclatura usas para las variables de color?
¿Ha logrado escribir CSS que usa variables de color de una manera independiente de los colores que representan?
Probé todo lo siguiente y todavía no tengo éxito en escribir CSS que funcione bien con cualquier combinación de colores. ☹️

– Lea Verou (@LeaVerou) 14 de octubre de 2018

Recuerdo la primera vez que probé Sass en un proyecto. Lo primero que quería hacer era variar mis colores. Por mi habilidad para nombrar cosas en HTML, sabía que debía evitar clases como .header-blue-left-bottom porque el color y la posición de ese elemento pueden cambiar. Es mejor que refleje lo que es que lo que parece.

Entonces, traté de hacer que mis colores sean semánticos, en cierto sentido, lo que representan, no lo que son literalmente:

$mainBrandColor: #F060D6;
$secondaryFocus: #4C9FEB;
$fadedHighlight: #F1F3F4;

Pero descubrí que nunca los recordaba en absoluto y tenía que referirme constantemente a dónde los definía para poder usarlos. Más tarde, en un momento de “atornillar”, nombré colores más como …

$orange: #F060D6;
$red: #BB532E;
$blue: #4C9FEB;

$gray-1: #eee;
$gray-2: #ccc;
$gray-3: #555;

Encontré que es mucho más intuitivo con pocos o ningún efecto secundario negativo. Después de todo, esto no está cruzando el límite de HTML-CSS aquí; todo esto está dentro de CSS y solo para desarrolladores, lo que le da un alcance más limitado al problema.

De manera similar, he intentado mantener los colores dentro de un mapa de Sass, como:

$colors: (
  light: #ccc,
  dark: #333
);

Pero el único objetivo vago era limpiar el espacio de nombres global, lo que probablemente no vale la pena. map-get todo el tiempo. Espacio de nombres como $-c-orange es probablemente un enfoque más fácil si necesita hacer algo.

En gran medida, me he quedado con ese enfoque de solo usar nombres de colores hoy en Sass. A medida que ocurre el cambio hacia las propiedades personalizadas de CSS, creo que tener un --c-orange y --c-gray-5 es igualmente apropiado.

:root {
  -c-orange: #F060D6;
  -c-red: #BB532E;
  -c-blue: #4C9FEB;

  -c-gray-1: #eee;
  -c-gray-2: #ccc;
  -c-gray-3: #555;
}

Podrías ser un poco más específico con esos nombres manteniéndote abstracto, como Marcus Ortense dice:

$color-primary:
$color-primary-dark:
$color-primary-light:

Y variaciones en cada base como dice Mike Street:

$primary:
$primaryLight: 
$primaryDark:

$secondary:
$secondaryLight:
$secondaryDark:

$neutralDarker:
$neutralDark:
$neutral:
$neutralLight:
$neutralLighter: 
$neutralLightest:

Silvestar Bistrović escribió recientemente sobre el uso de la numeración griega abstracta:

$color-alpha: #12e09f;
$color-beta: #e01258;
$color-gamma: #f5f5f5;
$color-psi: #1f1f1f;
$color-omega: #fff;

He usado ese tipo de cosas para los puntos de interrupción de consultas de medios antes, ya que la numeración parece tener sentido allí (es decir, los números bajos son pantallas más pequeñas, los números grandes son pantallas más grandes). También pude ver que es bueno para tintes o tonos del mismo color, pero ¿por qué no números regulares?

Otro enfoque que he visto a menudo es combinar colores con nombre con nombres abstractos. Geoff hace eso y Listas de John Carroll eso aquí:

$color-danube: #668DD1;
$color-cornflower: $6195ED;
$color-east-bay: $3A4D6E;

// theme1.scss
$color-alpha: $color-danube;
$color-bravo: $color-cornflower;
$color-charlie: $color-east-bay;

// theme2.scss
$color-alpha: $color-cornflower;
$color-bravo: $color-danube;
$color-charlie: $color-east-bay;

Eso puede ser tan detallado como lo necesite, incluso agregando variaciones a medida que llama desde la paleta.

$table-row-background: lighten($color-background, 10%);

Stuart Robson incluso se vuelve un poco BEM-y con los nombres, incluido el espacio de nombres:

$ns-color__blue—dark: rgb(25,25,112); 
$ns-brand__color—primary: $ns-color__blue—dark;

// component.scss
$ns-component__color—text: $ns-brand__color—primary;

Material Design utiliza valores que son similares a font-weight! Eso significa que terminaría con algo así como un rango base más alternativas:

$light-green-100:
$light-green-200:
$light-green-300:
// etc
$light-green-900:
$light-green-A200:
$light-green-A400:

$deep-purple-100:
$deep-purple-200:
$deep-purple-300:
// etc
$deep-purple-A900:

¿Cómo elegirías nombres para los colores? Es posible que le guste cómo llamar un amarillo soleado en lugar de un amarillo girasol, o puede que simplemente necesite ayuda. Aquí hay un proyecto para eso y aquí hay otro:

Vea el nombre del color de la pluma de Maneesh (@maneeshc) en CodePen.

Incluso hay un complemento de Sublime Text para convertirlos (a la sintaxis que desee):

Y ya que estamos en el tema de nombrar:

  • Trabajando hacia una mejor denominación
  • Nombrar cosas solo se está volviendo más difícil
  • Nombrar consultas de medios