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

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

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

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

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

ОТВЕТЫ

Ответ 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 Selectors для получения элементов из 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.

Ответ 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 года, сделали первый раз. Это, к сожалению, осложнило уже сложный пейзаж.

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

Ответ 3

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

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

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

  • Это еще один выход на уступ, но... Является ли это мифом или фактом, существует давняя идея о том, что Google обрабатывает слова, разделенные символами подчеркивания, как одно слово, а слова, разделенные тире как отдельные слова, (Matt Cutts on Underscores vs. Dashes.) По этой причине я знаю, что теперь я предпочитаю создавать URL-адреса страниц, чтобы использовать-words-with -dash, и для меня, по крайней мере, это повлияло на мои соглашения об именах для других вещей, таких как селектор CSS.

Ответ 4

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

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

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

Ответ 5

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

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

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

Итак:

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

Ответ 6

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