Есть ли какие-то недостатки в использовании имен цветов вместо цветовых кодов в CSS? - PullRequest
61 голосов
/ 12 июля 2010

Например, запись red более эффективна, чем #cc0000.В нем меньше символов, он занимает меньше места и его легче запомнить.

Есть ли какие-либо недостатки в использовании имен цветов для шестнадцатеричных кодов или значений RGB?Это включает программирование в среде нескольких разработчиков.

Ответы [ 10 ]

20 голосов
/ 12 июля 2010

Различные браузеры могут не соглашаться с тем, что означают некоторые названия цветов.Не существует названий для всех 16 миллионов 24-битных цветов.На самом деле существует только 17 наименований цветов стандарта W3C.Возможно, это нормально.

Лично я использую систему шаблонов во время сборки для предварительной обработки своих CSS-файлов, чтобы я мог сохранить стандартный набор цветов сайта и обращаться к ним по имени.Таким образом я получаю лучшее из обоих миров: я точно знаю, каковы мои значения цвета RGB, но я могу использовать более простые имена в CSS.

(Конечно, все еще невозможно точно знать как будет выглядеть цвет в браузере данного пользователя.)

edit - за 5 лет с момента написания этого ответа препроцессоры, такие как Less и Sass, стали довольно распространенным явлением.Они предоставляют некоторые очень сложные инструменты для управления цветами (и многими другими) в источниках CSS.

14 голосов
/ 19 декабря 2011

Я рекомендую вам следовать рекомендациям W3C:

Все они (уровень CSS 1, уровень 2 и уровень 3) указывают на то, что использование названий цветов вполне приемлемо, но какие из них приемлемы, зависит отспецификация.

CSS1 Спецификация

CSS1 Спецификация рекомендует использовать имена цветов в качестве допустимой замены шестнадцатеричных кодов и кодов RGB.

6.3 Единицы цвета

Предлагаемый список названий цветов ключевых слов: аква, черный, синий, фуксия, серый, зеленый, салатовый, бордовый, темно-синий, оливковый, фиолетовый, красный, серебристый, чирок, белый и желтый.Эти 16 цветов взяты из палитры VGA Windows, и их значения RGB не определены в этой спецификации.

Спецификация CSS2

Вы можете использовать цветимя orange сейчас!Количество до 17 цветов . Спецификация CSS2 для справки.

Цвета CSS3 и X11

CSS3 допускает использование SVG 1.0 * X11 используется для свойств CSS (а также hsl() значений).Это увеличивает количество названий цветов до 147 цветов .Любое из этих названий цветов может использоваться в любом браузере, который поддерживает спецификацию SVG 1.0, которая является IE9 или новее .

Это также означает, что список цветов, представленный в вопросе, в основном недействительно .

Рекомендуемое использование

Если вы хотите поддерживать устаревшие браузеры, придерживайтесь веб-сейфа оригинальных 16 цветовых названий, начиная с цветов X11не поддерживаютсяВ противном случае вы можете использовать любое из 147 названий цветов, указанных в спецификации X11.

Все браузеры должны соблюдать требования спецификации в отношении эквивалентных шестнадцатеричных кодов.Время, которое требуется парсеру для чтения имен цветов, фактически, если не точно, совпадает с использованием шестнадцатеричного значения, значения rgb или значения hsl ().

Для меня это более читабельнонапишите свои HEX коды в нижнем регистре.Например, # 8b88b6, очевидно, более читабелен, чем # 8B88B6.Кроме того, я склонен использовать сокращенный цвет HEX вместо полного кода (# 666 вместо # 666666), поскольку он более эффективен.

7 голосов
/ 13 июля 2010

лично, я предпочитаю использовать гекс-коды по двум причинам

  1. проще скопировать шестнадцатеричный код из Photoshop
  2. Вы можете использовать шестнадцатеричные коды по всей таблице стилей, но в противном случае вам придется смешивать два стиля (шестнадцатеричные и названия цветов). поэтому ваша таблица стилей может быть более равномерной / последовательной.

Это предполагает, что вы используете цвета, отличные от простого красного, черного, белого и т. Д. В среде с несколькими разработчиками я бы сказал, что гекскоды лучше, потому что они более универсальны (каждый разработчик точно знает, какой цвет есть).

3 голосов
/ 10 сентября 2017

Предыдущие ответы выглядят устаревшими.

Если вы разрабатываете для браузеров, которые поддерживают CSS3, которые являются основными браузерами начиная с IE9, вы можете использовать имена цветов в CSS.В HTML поддерживаются только 16 оригинальных веб-цветов.

Вопрос был в том, есть ли недостатки.Я думаю, что есть несколько:

  • Я считаю, что некоторые названия цветов просто неверны.Примеры:
    • Лазурь обычно считается намного более темным цветом.
    • Зеленый газон - это не то же самое, что газон, который я когда-либо видел.
    • Фиолетовый цвет больше похож на то, что яназовите розовый.
  • Труднее создать слегка темную или более светлую версию цвета, изменив его шестнадцатеричные значения.Например, более темный вариант #DCDCDC был бы #DADADA, но если бы я начал с имени цвета gainsboro, у меня не было бы никакой идеи.
  • Вычисления JavaScript более сложны для имени.

Источники: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value и http://caniuse.com/#search=css3%20colors

2 голосов
/ 11 января 2014

Я использую названия цветов для создания прототипов, отладки и для настройки действительно базовых, монохроматических цветовых схем, которые затем подходят для создания гиперспецифических шестнадцатеричных цветов.Это позволяет легко найти объект с возможностью тематической обработки.Это также более читабельно;меньше усилий мозга при попытке мгновенно визуализировать происходящее.

.component {
    background-color: black;
    color: white;
}

... затем в файле тем ...

.some-theme .component {
    background-color: #5f5f5c;
    color: #fafafc;
}
2 голосов
/ 12 июля 2010

Я предпочитаю дальнейшую оптимизацию, #c00 для красного.Если вы собираетесь использовать основной цвет или любой цвет, похожий на #aabbcc, вы можете использовать сокращение #abc.

1 голос
/ 12 июля 2010

Лично я предпочитаю, чтобы все цвета в файле CSS определялись одинаково, если это возможно.

Таким образом, мне не нужно думать по-другому, когда я вижу разные цвета (например, red, #cd876f и rgba(255,255,0,0.4)).

Я также предпочитаю цветовые обозначения, которые соответствуют тому, что я увижу при определении цвета в проекте, который я реализую.Цветовая палитра в Photoshop, помимо прочего, дает значения RGB и hex, но не дает названия цветов CSS.(Хотя другие инструменты дизайна могли бы сделать.)

1 голос
/ 12 июля 2010

Это действительно сводится к вашему стилю кодирования.Я придерживаюсь шестнадцатеричных значений для согласованности - цвет всегда форматируется как #000 или #000000, и мне не нужно беспокоиться о переключении между namd и неназванными цветами.

В конце концов, этоРешение, которое вы и ваша команда должны будете принять самостоятельно.Все зависит от ваших предпочтений.

0 голосов
/ 12 июля 2010

по моему мнению, это вопрос предпочтений.если цвет такой же простой, как красный, черный, серый, синий, белый и т. д., то вместо шестнадцатеричного слова следует использовать слово.

0 голосов
/ 12 июля 2010

Я думаю, что названия цветов более наглядны ... И это хорошая причина использовать его, когда это возможно.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...