Почему тире предпочтительнее для селекторов CSS / атрибутов HTML?


214

В прошлом я всегда использовал подчеркивания для определения атрибутов class и id в HTML. За последние несколько лет я перешел на тире, в основном, чтобы присоединиться к тенденции в сообществе , не обязательно, потому что это имело смысл для меня.

Я всегда думал, что у черт есть больше недостатков, и я не вижу преимуществ:

Завершение кода и редактирование

Большинство редакторов рассматривают дефисы как разделители слов, поэтому я не могу перейти к нужному символу. Скажите, что класс " featured-product", я должен автоматически завершить " featured", ввести дефис и завершить " product".

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

То же самое относится и к навигации по документу. Прыжок по словам или двойной щелчок по имени класса прерывается дефисами.

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

Неоднозначность с арифметическим оператором

Использование черточек нарушает доступ к свойствам объекта для элементов формы в JavaScript. Это возможно только с подчеркиванием:

form.first_name.value='Stormageddon';

(По общему признанию я не получаю доступ к элементам формы таким способом сам, но при выборе черты против подчеркивания как универсального правила, учтите, что кто-то мог.)

Такие языки, как Sass (особенно в рамках Compass ), в качестве стандарта используют тире даже для имен переменных. Они изначально использовали подчеркивание в начале тоже. То, что это анализируется по-разному, кажется мне странным:

$list-item-10
$list-item - 10

Несоответствие с именами переменных в разных языках

Когда-то я писал underscored_namesпеременные на PHP, ruby, HTML / CSS и JavaScript. Это было удобно и последовательно, но опять же, чтобы «вписаться», я сейчас использую:

  • dash-case в HTML / CSS
  • camelCase в JavaScript
  • underscore_case в PHP и ruby

Это не слишком беспокоит меня, но я удивляюсь, почему они стали такими смещенными, казалось бы, нарочно. По крайней мере, с подчеркиванием можно было сохранить последовательность:

var featured_product = $('#featured_product'); // instead of
var featuredProduct = $('#featured-product');

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

Поэтому я спрашиваю: почему сообщество почти повсеместно остановилось на черточках, и есть ли причины, которые перевешивают подчеркивания?

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


50
Я использую тире, потому что мне не нужно нажимать клавишу Shift.
Джрод

12
Любопытно, почему это было закрыто ... были ли голоса, чтобы закрыть его? Я не спрашиваю мнения в этом вопросе. Я привел конкретные причины против использования тире, но для этого должны быть веские причины, если бы все, казалось бы, согласились с этой тенденцией. Здесь есть несколько хороших ответов и полезной информации. Могу ли я улучшить вопрос?
Андрей Вит

9
Я выдвигаю свой вопрос для повторного открытия: все ответы ниже включают «факты, ссылки или конкретные знания» ... поэтому я не понимаю, как это было «неконструктивно».
Андрей Вит

12
Я думаю, что закрывать эту ветку как неконструктивную было глупым решением. Если есть какой-то стиль кодирования, который предпочтителен из-за чего-то другого, а не из-за предпочтений (проще для IDE, проще для завершения кода, лучшей интеграции с инструментами), я думаю, это был бы довольно конструктивный вопрос / ответы / обсуждение.
Джейк Уилсон

8
@AndrewVit: это очень хороший вопрос, хорошо отформатированный, информативный и освещающий несколько аспектов. +1 за это. Кстати, я согласен, что было бессмысленно закрывать эту тему как «неконструктивную» . На самом деле это конструктивно.
Sk8erPeter

Ответы:


131

Завершение кода

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

Кроме того, использование дефисов позволяет вам воспользоваться селектором атрибута | = , который выбирает любой элемент, содержащий текст, за которым, возможно, следует тире:

span[class|="em"] { font-style: italic; }

Это сделало бы следующие элементы HTML курсивным шрифтом:

<span class="em">I'm italic</span>
<span class="em-strong">I'm italic too</span>

Неоднозначность с арифметическим оператором

Я бы сказал, что доступ к элементам HTML с помощью точечной нотации в JavaScript - это скорее ошибка, чем функция. Это ужасная конструкция с первых дней ужасных реализаций JavaScript и не очень хорошая практика. Для большинства вещей, которые вы делаете с JavaScript в наши дни, вы все равно захотите использовать CSS-селекторы для извлечения элементов из DOM, что делает целую нотацию точек бесполезной. Какой из них вы бы предпочли?

var firstName = $('#first-name');
var firstName = document.querySelector('#first-name');
var firstName = document.forms[0].first_name;

Я считаю, что первые два варианта гораздо предпочтительнее, тем более что '#first-name'их можно заменить переменной JavaScript и построить динамически. Я также считаю их более приятными на глаза.

Тот факт, что Sass включает арифметику в своих расширениях CSS, на самом деле не относится к самому CSS, но я понимаю (и принимаю) тот факт, что Sass следует языковому стилю CSS (за исключением $префикса переменных, который, конечно, должен были @). Если документы Sass должны выглядеть и чувствовать себя как документы CSS, они должны следовать тому же стилю, что и CSS, в котором в качестве разделителя используется тире. В CSS3 арифметика ограничена calcфункцией, которая показывает, что в самом CSS это не проблема.

Несоответствие с именами переменных в разных языках

Все языки, будь то языки разметки, языки программирования, языки стиля или языки сценариев, имеют свой собственный стиль. Вы найдете это в подъязыках языковых групп, таких как XML, где, например, XSLT использует строчные буквы с разделителями дефисов, а схема XML использует верблюжий регистр .

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

Мой совет - не находить любимый стиль на разных языках, а лучше чувствовать себя как дома на каждом языке и учиться любить все его причуды. Одна из странностей CSS заключается в том, что ключевые слова и идентификаторы пишутся в нижнем регистре и разделяются дефисами. Лично я нахожу это очень визуально привлекательным и думаю, что оно вписывается в строчный (хотя и без дефиса) HTML .


4
«То, интерпретируется ли тире как пунктуация или как непрозрачный идентификатор, зависит от выбранного редактора». Я не думаю, что это обычно так, хотя могут быть некоторые исключительные редакторы. Двойной щелчок на слове дефиса выберет только его часть, а не весь токен: кажется, это для всей ОС.
Андрей Вит

13
Хорошая точка зрения о |=селекторе, я видел это в другом ответе, и это справедливо. Была ли языковая конвенция разработана вокруг этого или наоборот? (Дефис как универсальная тенденция, кажется, относительно недавний, они могли появиться примерно в то же время.)
Эндрю Вит

1
@AndrewVit, есть редакторы на основе CLI, где двойной щелчок неактуален (так как обычно мыши нет), и его можно настроить для такого поведения. Но в целом ты прав. |=Селектор атрибута сделан специально для langатрибута, но его использование может быть продлено. Я всегда использовал дефисы в своем CSS, поэтому я не могу говорить за широкую публику, но определенно произошла конвергенция к дефисам из паскаля, верблюда и подчеркивания. |=Селектор и дефис в качестве разделителя являются, насколько я могу сказать , связаны между собой, хотя.
Асбьерн Ульсберг

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

2
@ KamilKiełczewski Это полезно, но работает немного по-другому.
gcampbell

68

Возможно, основная причина, по которой сообщество HTML / CSS выровнялось с черточками вместо подчеркиваний, связана с историческими недостатками спецификаций и реализаций браузера.

Из документа Mozilla, опубликованного в марте 2001 года @ https://developer.mozilla.org/en-US/docs/Underscores_in_class_and_ID_Names

Спецификация CSS1, опубликованная в окончательном виде в 1996 году, не позволяла использовать подчеркивания в именах классов и идентификаторов, если они не были «экранированы». Подчеркнутое подчеркивание будет выглядеть примерно так:

    p.urgent\_note {color: maroon;}

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

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


6
Спасибо! Мне нравится узнавать «этимологию» такой конвенции. Это помогает мне не забыть использовать соглашение, так как я могу связать язык с ним. Наличие ассоциации помогает мне подсознательно использовать соглашение в результате.
Апе-инаго

39

Я не думаю, что кто-то может ответить на этот вопрос окончательно, но вот мои догадки:

  1. Подчеркивания требуют нажатия клавиши Shift, и поэтому их сложнее набирать.

  2. Селекторы CSS, которые являются частью официальных спецификаций CSS, используют тире (такие как псевдоклассы, такие как: first-child и псевдоэлементы: первая строка), а не подчеркивание. То же самое для свойств, например, текстовое оформление, цвет фона и т. Д. Программисты - существа привычки. Имеет смысл, что они будут следовать стилю стандарта, если для этого нет веских причин.

  3. Это еще дальше, но ... Является ли это мифом или фактом, существует давняя идея, что Google рассматривает слова, разделенные подчеркиванием, как одно слово, а слова, разделенные черточками, как отдельные слова. (Мэтт Каттс: «Подчеркивание против черточек».) По этой причине я знаю, что сейчас я предпочитаю создавать URL-адреса страниц, чтобы использовать слова-с-черточками, и, по крайней мере, для меня это стало частью моих соглашений об именах для других целей. , как селекторы CSS.


2
Хороший вопрос о SEO в отношении штрихов в URL-адресах и семантической разметки (действительно ли это действительно так) ... Можете ли вы уточнить, какие "селекторы CSS, являющиеся частью официальных спецификаций CSS, используют штрихи"?
Андрей Вит

Я расширил пункт 2 в своем ответе, чтобы привести несколько примеров, хотя я больше думал о свойствах CSS, таких как оформление текста, а не о «селекторах», так что это было несколько опечаткой, хотя есть несколько селекторов, которые делают, как отмечено выше.
Мейсон Дж. Жвити,

1
Спасибо @albert, это сделало бы хороший ответ само по себе ... по крайней мере, для исторического контекста. Я не знал, что оригинальная спецификация не допускает подчеркивания! (Но это не имеет смысла, почему они должны быть запрещены.)
Эндрю Вит

4
Пункт № 2 убедил меня, особенно учитывая такие свойства, как цвет фона, оформление текста и т. Д.
Big McLargeHuge,

2
К вашему сведению, URL-адрес devedge-temp, указанный в комментарии @ albert выше ( devedge-temp.mozilla.org/viewsource/2001/css-underscores ), теперь находится на сайте developer.mozilla.org/en-US/docs/…
Апонзани

14

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

Я думаю, что эта статья объясняет это всесторонне.

CSS - это синтаксис, разделенный дефисом. Под этим я подразумеваю , что мы писать такие вещи , как font-size, line-height, и border-bottomт.д.

Так:

Вы просто не должны смешивать синтаксис: это противоречиво .


11

За последние годы произошел явный рост числа разделенных дефисами целых слов URL-адресов. Это поощряется лучшими практиками SEO. Google явно «рекомендует использовать дефисы (-) вместо подчеркивания (_) в ваших URL»: http://www.google.com/support/webmasters/bin/answer.py?answer=76329 .

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

Моя гипотеза заключается в том, что позиция Google закрепляет этот шаблон в одном ключевом контексте (SEO), и тенденция использовать этот шаблон в именах классов, идентификаторов и атрибутов - это просто стадо, медленно движущееся в этом общем направлении.


5

Я думаю, что это зависит от программиста. Кому-то нравится использовать тире, другим - подчеркивание.
Я лично использую подчеркивание ( _), потому что я использую его и в других местах. Такие как:
- переменные JavaScript ( var my_name);
- Действия моего контроллера ( public function view_detail)
Другая причина, по которой я использую подчеркивания, заключается в том, что в большинстве сред IDE два слова, разделенные подчеркиванием, рассматриваются как одно слово. (и можно выбрать с помощью double_click).

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.