pasteles - ¿Hay algún inconveniente para usar nombres de colores en lugar de códigos de color en CSS?
tabla de colores html pdf (10)
Creo que los nombres de los colores son más descriptivos ... Y esta es una buena razón para usarlo cuando sea posible.
Por ejemplo, escribir red es más eficiente que #cc0000 . Tiene menos caracteres, ocupa menos espacio y es más fácil de recordar.
¿Hay inconvenientes en el uso de nombres de colores sobre códigos hexadecimales o valores RGB? Esto incluye la programación en un entorno de múltiples desarrolladores.
Diferentes navegadores pueden no estar de acuerdo con lo que significan algunos nombres de colores. No hay nombres para los 16 millones de colores de 24 bits. De hecho, solo hay 17 nombres de colores estándar W3C. Probablemente esté bien usarlos.
Personalmente utilizo un sistema de plantillas en tiempo de compilación para preprocesar mis archivos CSS, de modo que pueda mantener un conjunto estándar de colores del sitio y referirme a ellos por su nombre. De esa forma obtengo lo mejor de ambos mundos: sé exactamente cuáles son mis valores de color RGB, pero puedo usar nombres más simples en el CSS.
(Por supuesto, todavía no es posible saber exactamente cómo se verá un color en el navegador de un usuario determinado).
editar - en los 5 años desde que se escribió esta respuesta, preprocesadores como Less y Sass se han vuelto bastante comunes. Esos proporcionan algunas herramientas muy sofisticadas para administrar colores (y muchas otras cosas) en fuentes de CSS.
Las respuestas anteriores parecen obsoletas por ahora.
Si desarrolla navegadores compatibles con CSS3, que son todos los principales navegadores desde IE9, puede usar nombres de colores en CSS. En HTML, solo se admiten los 16 colores web originales.
La pregunta era si hay desventajas. Creo que hay algunos:
- Encuentro que algunos de los nombres de los colores son incorrectos. Ejemplos:
- Azure generalmente se considera un color mucho más oscuro.
- El césped verde no es como el césped que he visto en mi vida.
- Violet se parece más a lo que yo llamaría rosa.
- Es más difícil crear una versión ligeramente más oscura o más clara del color cambiando sus valores hexadecimales. Por ejemplo, una variante más oscura de #DCDCDC sería #DADADA, pero si hubiera empezado con el nombre de color gainsboro, no tendría idea.
- Los cálculos de Javascript son más difíciles en un nombre.
Fuentes: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value y http://caniuse.com/#search=css3%20colors
Personalmente, prefiero que todos los colores en un archivo CSS se definan de la misma manera, si es posible.
De esta forma no tengo que pensar de otra manera cuando veo diferentes colores definidos (por ejemplo, red , #cd876f y rgba(255,255,0,0.4) ).
También prefiero las anotaciones de color que coincidan con lo que veré al identificar el color en el diseño que estoy implementando. La paleta de colores de Photoshop proporciona valores RGB y hexadecimales, entre otros, pero no da nombres de colores CSS. (Sin embargo, otras herramientas de diseño podrían hacerlo).
Prefiero una optimización adicional, #c00 para rojo. Si vas a usar un color primario, o cualquier color que sea similar a #aabbcc , puedes usar la abreviatura, #abc .
Realmente se reduce a tu estilo de codificación. Me atengo a los valores hexadecimales por coherencia: un color siempre se formatea como #000 o #000000 , y no tengo que preocuparme por cambiar entre colores namd y sin nombre.
Al final, es una decisión que usted y su equipo tendrán que tomar por su cuenta. Se trata de tus preferencias.
Te recomiendo que sigas las recomendaciones del W3C:
Todos ellos (CSS Nivel 1, Nivel 2 y Nivel 3) indican que el uso de nombres de colores es perfectamente aceptable, pero los que son aceptables varían según la especificación.
Especificación CSS1
La Especificación CSS1 recomienda usar nombres de colores como un sustituto válido para los códigos hexadecimales y RGB.
6.3 Unidades de color
La lista sugerida de nombres de colores de palabras clave es: aguamarina, negro, azul, fucsia, gris, verde, lima, granate, azul marino, oliva, púrpura, rojo, plateado, verde azulado, blanco y amarillo. Estos 16 colores están tomados de la paleta de Windows VGA, y sus valores RGB no están definidos en esta especificación.
Especificación de CSS2
¡Ahora puede usar el nombre de color orange ! El recuento es de hasta 17 colores . Especificación CSS2 para referencia.
Colores CSS3 y X11
CSS3 permite utilizar los colores X11 de SVG 1.0 para las propiedades de CSS (así como los valores de hsl() ). Esto amplía la cantidad de nombres de colores a 147 colores . Cualquiera de estos nombres de colores se puede usar en cualquier navegador que admita la especificación SVG 1.0, que es IE9 o posterior .
Esto también significa que la lista de colores proporcionada en la pregunta generalmente no es válida .
Uso sugerido
Si está tratando de admitir navegadores antiguos, adhiérase a los nombres originales de 16 colores, ya que los colores X11 no son compatibles. De lo contrario, puede usar cualquiera de los 147 nombres de color especificados en la especificación X11.
Todos los navegadores deben cumplir con la especificación en referencia a los códigos hexadecimales equivalentes. El tiempo que le lleva al analizador leer los nombres de los colores es prácticamente, si no exactamente, lo mismo que usar un valor hexadecimal, un valor rgb o un valor hsl ().
Para mí, es más fácil escribir tus códigos HEX en minúsculas. Por ejemplo, # 8b88b6 es obviamente más legible que # 8B88B6. Además, tiendo a usar el color HEX de taquigrafía en lugar del código completo (# 666 en lugar de # 666666) ya que es más eficiente.
Utilizo nombres de colores para la creación de prototipos, la depuración y para establecer esquemas de color monocromáticos realmente básicos que luego están listos para tematizar con colores hexadecimales hiperespecíficos. Hace que una propiedad temible sea fácil de detectar. También es más legible por humanos; menos tensión cerebral al tratar de visualizar al instante lo que está sucediendo.
.component {
background-color: black;
color: white;
}
... luego en el archivo de tematización ...
.some-theme .component {
background-color: #5f5f5c;
color: #fafafc;
}
en mi opinión, es una cuestión de preferencia. si el color es tan simple como rojo, negro, gris, azul, blanco, etc. usaré la palabra en lugar del hexágono.
personalmente, prefiero usar códigos hexadecimales por 2 razones
- es más fácil copiar un código hexadecimal de Photoshop
- puede usar códigos hexadecimales en una hoja de estilo, pero tendrá que mezclar dos estilos (códigos hexadecimales y nombres de colores) de lo contrario. entonces su hoja de estilo puede ser más uniforme / consistente.
Esto supone que estás usando colores distintos al rojo, negro, blanco, etc. En un entorno de múltiples desarrolladores, diría que los códigos hexadecimales son mejores porque son más consistentes universalmente (cada desarrollador sabe exactamente qué color es).