it-swarm.com.ru

Есть ли какие-то недостатки в использовании имен цветов вместо цветовых кодов в CSS?

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

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

61
Jitendra Vyas

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

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

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

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

20
Pointy

Я рекомендую вам следовать рекомендациям 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), поскольку он более эффективен.

14
Liyali

лично я предпочитаю использовать hexcodes по двум причинам

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

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

7
pixeltocode

Предыдущие ответы уже устарели.

Если вы разрабатываете для браузеров, которые поддерживают 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

3
kslstn

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

2
Stephen

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

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

... тогда в файле тем ...

.some-theme .component {
    background-color: #5f5f5c;
    color: #fafafc;
}
2
James

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

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

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

1
Paul D. Waite

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

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

1
derekerdmann

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

0
Jonathan

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

0
cp3