Чому тире віддають перевагу для CSS-селекторів / атрибутів HTML?

У минулому я завжди використовував підкреслення для визначення атрибутів класу та 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 та рубіні

Це насправді не дуже мене турбує, але мені цікаво, чому вони стали настільки нестандартними, здавалося б, цілеспрямовано. Принаймні, з підкресленнями можна було зберегти узгодженість:

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 Schema використовує корпус верблюда.

Загалом, ви побачите, що прийняти стиль, який відчуває та виглядає найбільш «рідним» мовою, на якій ви пишете, краще, ніж намагатися вбудувати свій власний стиль у кожну іншу мову. Оскільки ви не можете уникнути необхідності використання рідних бібліотек та мовних конструкцій, ваш стиль буде "забруднений" рідним стилем, будь то вам подобається чи ні, тому навіть намагатися навіть марно намагатися.

Моя порада - не знаходити улюбленого стилю на різних мовах, а натомість створити себе вдома в межах кожної мови та навчитися любити всі її вигадки. Однією з прихисток 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, використовують тире (наприклад, псевдокласи, такі як: перша дитина та псевдоелементи: перший рядок), а не підкреслення. Те саме стосується властивостей, наприклад, декорування тексту, колір тла тощо. Програмісти - це звички. Є сенс, щоб вони дотримувались стандартного стилю, якщо немає вагомих причин цього не робити.

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), а тенденція до використання цієї моделі у назвах класів, id та атрибутів - просто стадо, яке повільно рухається в цьому загальному напрямку.

Я думаю, що це річ, яка залежить від програміста. Хтось любить використовувати тире, інші використовують підкреслення.
Я особисто використовую підкреслення ( _), оскільки використовую його і в інших місцях. Такі як:
- змінні JavaScript ( var my_name);
- Мої дії контролера ( public function view_detail)
Ще однією причиною того, що я використовую підкреслення, є те, що в більшості IDE два слова, розділені підкресленнями, розглядаються як 1 слово. (і їх можна вибрати двома клацаннями).