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

В прошлом я всегда использовал подчеркивания для определения атрибутов 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');

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

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

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

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

Полагаю, будет ли тире интерпретироваться как пунктуация или непрозрачный идентификатор, зависит от выбранного редактора. Однако, как личное предпочтение, я предпочитаю возможность переходить между каждым словом в файле 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 .

Возможно, основная причина, по которой сообщество 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 года, впервые подчеркнули законность. Это, к сожалению, усложнило и без того сложный ландшафт.

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

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

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

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

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

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

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

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

Так:

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

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

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

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

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