Dlaczego myślniki są preferowane dla selektorów CSS / atrybutów HTML?

W przeszłości zawsze używałem podkreślników do definiowania atrybutów class i id W HTML. W ciągu ostatnich kilku lat zmieniłem zdanie na myślniki, głównie po to, aby dostosować się do trendu w społeczności, niekoniecznie dlatego, że miało to dla mnie sens.

Zawsze myślałem, że kreski mają więcej wad i nie widzę korzyści:

Uzupełnianie i edycja kodu

Większość edytorów traktuje myślniki jako separatory słów, więc nie mogę przejść do zakładki symbol, którego chcę. Powiedzmy, że klasa to "featured-product", muszę automatycznie uzupełniać " featured", wprowadzić myślnik i uzupełnić " product".

Z podkreślnikami" featured_product " jest traktowane jako jedno słowo, więc można je wypełnić w jednym kroku.

To samo dotyczy poruszania się po dokumencie. Skakanie po słowach lub dwukrotne klikanie nazw klas jest łamane myślnikami.

(bardziej ogólnie, myślę o klasach i identyfikatorach jako tokeny , więc nie ma dla mnie sensu, aby token był tak łatwy możliwość podziału na myślniki.)

Wieloznaczność z operatorem arytmetycznym

Użycie myślników powoduje przerwanie właściwości obiektu dostępu do elementów formularza w JavaScript. Jest to możliwe tylko z podkreślnikami: 

form.first_name.value='Stormageddon';

(co prawda sam nie mam dostępu do elementów formularza w ten sposób, ale decydując się na myślniki vs podkreślenia jako uniwersalną zasadę, weź pod uwagę, że ktoś może.)

Języki takie jak Sass (szczególnie w całym Compass framework) mają standardowo stosowano myślniki, nawet dla nazw zmiennych. Początkowo również używali podkreślników. Fakt, że jest to parsowane inaczej, wydaje mi się dziwny: 

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

Niespójność z nazewnictwem zmiennych w różnych językach

Kiedyś pisałem underscored_names dla zmiennych w PHP, ruby, HTML / CSS i JavaScript. To było wygodne i spójne, ale ponownie, aby" dopasować się " używam teraz: {]}

  • dash-case W HTML / CSS
  • camelCase w JavaScript
  • underscore_case w PHP i ruby

To nie przeszkadza mi zbytnio, ale zastanawiam się, dlaczego stały się tak źle dopasowane, pozornie celowo. Przynajmniej z podkreślnikami udało się utrzymać spójność: 

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

Różnice tworzą sytuacje, w których musimyniepotrzebnie tłumaczyć łańcuchy wraz z potencjałem wystąpienia błędów.

[11]} więc pytam: dlaczego społeczność prawie powszechnie osiadła na kreskach i czy są jakieś powody to przeważa nad podkreśleniem?

Istnieje powiązane pytanie z czasów, kiedy to się zaczęło, ale jestem zdania, że to nie jest (lub nie powinno być były) tylko kwestia gustu. Chciałbym zrozumieć, dlaczego wszyscy zgodziliśmy się na tę konwencję, jeśli to była tylko kwestia gustu.

Author: Community, 2011-09-27
Source

6 answers

Uzupełnianie kodu

To, czy dash jest interpretowany jako interpunkcja, czy jako nieprzezroczysty identyfikator, zależy chyba od wybranego edytora. Jednak jako osobiste preferencje, preferuję możliwość zakładki Między każdym słowem w pliku CSS i byłoby to denerwujące, gdyby były oddzielone podkreśleniem i nie było żadnych przystanków.

Ponadto użycie myślników pozwala skorzystać z selektora atrybutów |= , który opcjonalnie zaznacza dowolny element zawierający tekst po którym następuje myślnik: 

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

To sprawi, że następujące elementy HTML będą miały kursywę w stylu czcionki: 

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

Wieloznaczność z operatorem arytmetycznym

Powiedziałbym, że dostęp do elementów HTML za pomocą notacji kropkowej w JavaScript jest raczej błędem niż funkcją. Jest to straszna konstrukcja z pierwszych dni strasznych implementacji JavaScript i nie jest to naprawdę świetna praktyka. W przypadku większości rzeczy, które robisz w dzisiejszych czasach z JavaScript, powinieneś użyć selektorów CSS dla pobieranie elementów z DOM, co sprawia, że cała notacja kropek jest raczej bezużyteczna. Który wolisz?

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

Uważam, że dwie pierwsze opcje są o wiele bardziej pożądane, zwłaszcza, że '#first-name' można zastąpić zmienną JavaScript i budować dynamicznie. Uważam je również za przyjemniejsze dla oczu.

Fakt, że Sass umożliwia arytmetykę w swoich rozszerzeniach do CSS, tak naprawdę nie odnosi się do samego CSS, ale Rozumiem (i akceptuję) fakt, że Sass podąża za styl języka CSS (poza prefiksem $ zmiennych, który oczywiście powinien być @). Jeśli dokumenty Sass mają wyglądać i czuć się jak dokumenty CSS, muszą postępować zgodnie z tym samym stylem, co CSS, który używa kreski jako ogranicznika. W CSS3 arytmetyka ogranicza się do calc funkcja, która pokazuje, że w samym CSS nie jest to problemem.

Niespójność z nazewnictwem zmiennych w różnych językach

Wszystkie języki, będące językami znaczników, programowanie języki, języki stylizujące lub języki skryptowe, mają swój własny styl. Można to znaleźć w pod-językach grup językowych, takich jak XML, gdzie np. XSLT używa małych liter z ogranicznikami myślników i XML Schema używa obudowy wielbłąda.

Ogólnie rzecz biorąc, przekonasz się, że przyjęcie stylu, który wydaje się najbardziej "rodzimy" dla języka, w którym piszesz, jest lepsze niż próba dopasowania własnego stylu do każdego innego języka. Ponieważ nie można uniknąć posiadania aby korzystać z natywnych bibliotek i konstrukcji językowych, Twój styl będzie "zanieczyszczony" przez natywny styl, czy ci się to podoba, czy nie, więc nawet wypróbowanie go jest daremne.

Moja rada to nie znaleźć ulubionego stylu w różnych językach, ale zamiast tego Poczuj się jak w domu w każdym języku i naucz się kochać wszystkie jego dziwactwa. Jednym z dziwactw CSS jest to, że słowa kluczowe i identyfikatory są pisane małymi literami i oddzielone myślnikami. Osobiście uważam to za bardzo atrakcyjne wizualnie i myślę, że pasuje do wszystkich małych liter (chociaż bez myślnika) HTML .

 121
Author: Asbjørn Ulsberg,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-09-26 21:14:52

Być może kluczowym powodem, dla którego społeczność HTML/CSS dostosowała się do myślników zamiast podkreślników, są historyczne braki w specyfikacjach i implementacjach przeglądarki.

Z Mozilla doc opublikowanego w marcu 2001 @ https://developer.mozilla.org/en-US/docs/Underscores_in_class_and_ID_Names

Specyfikacja CSS1, opublikowana w ostatecznej formie w 1996 roku, nie pozwalają na użycie podkreślników w nazwach klas i ID, chyba że byli " uciekli."An uciekający podkreślnik wyglądałby mniej więcej tak:

    p.urgent\_note {color: maroon;}

To nie było dobrze obsługiwane przez przeglądarki w tym czasie, jednak i praktyka nigdy się nie załapała. CSS2, wydany w 1998 roku, również zakazał użycie podkreślników w nazwach klas i ID. Jednak errata do specyfikację opublikowaną na początku 2001 r. dopuszczono do pierwszy raz. To niestety skomplikowało już złożony krajobraz.

Ogólnie lubię podkreślenia, ale odwrotny ukośnik po prostu sprawia, że jest brzydki ponad nadzieję, nie wspominając o rzadkim wsparciu w tym czasie. Rozumiem, dlaczego deweloperzy unikali tego jak zarazy. Oczywiście w dzisiejszych czasach nie potrzebujemy ukośnika wstecznego, ale etykieta kreska została już mocno ugruntowana.

 51
Author: user193130,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-11-27 21:08:02

Myślę, że nikt nie może na to definitywnie odpowiedzieć, Ale oto moje przemyślenia:

  1. Podkreślenia wymagają wciśnięcia klawisza Shift i dlatego są trudniejsze do wpisania.

  2. Selektory CSS, które są częścią oficjalnych specyfikacji CSS, używają myślników (takich jak pseudo-klasy, takie jak :first-child I pseudo-elements :first-line), a nie podkreślników. To samo dotyczy właściwości, np. dekoracji tekstu, koloru tła itp. Programiści są stworzeniami z przyzwyczajenia. Sprawia, że Poczuj, że będą podążać za standardowym stylem, jeśli nie ma dobrego powodu, aby tego nie robić.

  3. Ten jest dalej na krawędzi, ale... Niezależnie od tego, czy jest to mit, czy fakt, istnieje od dawna idea, że Google traktuje słowa oddzielone podkreślnikami jako pojedyncze słowo, a słowa oddzielone myślnikami jako oddzielne słowa. (Matt Cutts na podkreślenia vs. kreski.) z tego powodu wiem, że teraz preferuję tworzenie adresów URL stron, używając-słów-z-myślnikami, a przynajmniej dla mnie to wpisał się w moje konwencje nazewnicze dla innych rzeczy, jak selektory CSS.

 37
Author: Mason G. Zhwiti,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-09-27 03:32:09

W ostatnich latach odnotowano wyraźny wzrost segmentów adresów URL oddzielonych myślnikami. Zachęcają do tego najlepsze praktyki SEO. Google wyraźnie "zaleca używanie myślników ( - ) zamiast podkreślników ( _ ) w adresach URL": http://www.google.com/support/webmasters/bin/answer.py?answer=76329 .

Jak zauważono, różne konwencje panowały w różnym czasie w różnych kontekstach, ale zazwyczaj nie są one formalną częścią żadnego protokołu lub ramy.

Moja hipoteza jest więc taka, że pozycja Google zakotwicza ten wzór w jednym kluczowym kontekście (SEO), a tendencja do używania tego wzorca w nazwach klas, id i atrybutów jest po prostu stadem poruszającym się powoli w tym ogólnym kierunku.

 11
Author: Faust,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-09-26 22:16:24

Powodów jest wiele, ale jednym z najważniejszych jest zachowaniespójności .

Myślę, że Ten artykuł wyjaśnia to kompleksowo.

CSS jest składnią rozdzielaną myślnikami. Chodzi mi o to, że piszemy takie rzeczy jak font-size, line-height, border-bottom itd.

Więc:

Po prostu nie należy mieszać składni: to niespójne .

 4
Author: simhumileco,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-03-22 09:39:25

Myślę, że to zależy od programisty. Niektórzy lubią używać myślników, inni podkreślników.
Ja osobiście używam underscores (_), ponieważ używam go również w innych miejscach. Np.:
- Zmienne JavaScript(var my_name);
- Moje działania kontrolera(public function view_detail)
Innym powodem, dla którego używam podkreślników, jest to, że w większości Idów dwa słowa oddzielone podkreślnikami są uważane za 1 słowo. (i są możliwe do wyboru za pomocą double_click).

 2
Author: Ali Farhoudi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-06-29 07:43:32