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

Question

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

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

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

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

Answer 1

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

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

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

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

Answer 2

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

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

Answer 3

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

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

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

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

Answer 4

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

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

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

Answer 5

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

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

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

Итак:

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

Answer 6

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