CSS 선택기/HTML 속성에 대시가 선호되는 이유는 무엇입니까?

CSS 선택기/HTML 속성에 대시가 선호되는 이유는 무엇입니까?

과거에 저는 항상 HTML에서 클래스와 ID 속성을 정의할 때 밑줄을 사용했습니다. 지난 몇 년 동안 저는 대시로 전환했습니다. 대부분 커뮤니티의 추세에 맞추기 위해 사용했습니다. 제가 이해할 수 있었기 때문은 아닙니다.

저는 항상 대시에 더 많은 단점이 있다고 생각해 왔습니다. 하지만 이점은 없습니다.

코드 완성 및 편집

대부분의 편집자는 대시를 단어 구분 기호로 처리하기 때문에 원하는 기호를 누를 수 없습니다.클래스가 "라고 합니다.featured-product는 " 완성을 해야 합니다.featured" 이픈을입를고하력 " 료완합니다하를다니▁"합▁"▁enter완"를 완성합니다.product".

줄포함밑" 포함featured_product한 단어로 처리되므로 한 단계로 채울 수 있습니다.

문서를 탐색할 때도 마찬가지입니다.단어로 건너뛰거나 클래스 이름을 두 번 클릭하면 하이픈으로 구분됩니다.

(일반적으로 클래스와 ID를 토큰으로 생각하기 때문에 하이픈에서 토큰을 그렇게 쉽게 분할할 수 있어야 한다는 것은 말이 되지 않습니다.)

산술 연산자와의 모호성

대시를 사용하면 JavaScript의 양식 요소에 대한 개체 속성 액세스가 중단됩니다.이는 밑줄이 있는 경우에만 가능합니다.

form.first_name.value='Stormageddon';

(물론 양식 요소에 직접 액세스하지는 않지만 대시 대 밑줄을 일반적인 규칙으로 결정할 때는 다른 사용자가 액세스할 수도 있습니다.)

Sass와 같은 언어(특히 나침반 프레임워크 전반에 걸쳐)는 대시를 표준으로 정했습니다. 심지어 변수 이름에 대해서도 그렇습니다.그들은 원래 처음에도 밑줄을 사용했습니다.이것이 다르게 해석된다는 사실이 이상하게 느껴집니다.

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

여러 언어에 걸쳐 변수 이름 지정과 불일치

옛날엔, 난 글을 쓰곤 했어요.underscored_namesPHP, 루비, HTML/CSS 및 JavaScript 일관성이 있었지만, "은 다음을사용합니다.이것은 편리하고 일관성이 있었지만, 다시 한번 "적합"하기 위해 현재 사용하고 있습니다.

• dash-caseCSSHTML/CSS »
• camelCase
• underscore_casePHP와 루비로

이것은 저를 크게 괴롭히지는 않지만, 저는 왜 이것들이 의도적으로 그렇게 잘못 정렬되었는지 궁금합니다.적어도 밑줄을 사용하면 일관성을 유지할 수 있었습니다.

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 요소에 접근하는 것은 기능이라기보다는 버그라고 말하고 싶습니다.이것은 끔찍한 자바스크립트 구현 초기의 끔찍한 구성이며 실제로는 좋은 관행이 아닙니다.요즘 자바스크립트로 하는 대부분의 작업에서, 당신은 어쨌든 DOM에서 요소를 가져오는 데 CSS 선택기를 사용하고 싶을 것이고, 이것은 전체 도트 표기법을 다소 쓸모없게 만듭니다.어떤 것이 더 좋습니까?

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

저는 두 가지 첫 번째 옵션이 훨씬 더 바람직하다고 생각합니다. 특히 그 이후로.'#first-name'JavaScript 변수로 대체하여 동적으로 빌드할 수 있습니다.저는 또한 그들의 눈이 더 즐겁다는 것을 발견합니다.

을 가능하게 한다는 자체에 , 저는 CSS의 합니다(Sass에 CSS를 $변수의 접두사, 당연히 그래야 했습니다.@Sass 문서가 CSS 문서처럼 보이고 느껴지려면 대시를 구분 기호로 사용하는 CSS와 동일한 스타일을 따라야 합니다.CSS3에서 산술은 함수로 제한되며, 이는 CSS 자체에서 이것이 문제가 아니라는 것을 보여줍니다.

여러 언어에 걸쳐 변수 이름 지정과 불일치

마크업 언어, 프로그래밍 언어, 스타일링 언어 또는 스크립트 언어와 같은 모든 언어는 고유한 스타일을 가집니다.XML과 같은 언어 그룹의 하위 언어에서 이를 찾을 수 있습니다. 예를 들어 XSLT는 하이픈 구분 기호가 있는 소문자를 사용하고 XML 스키마는 낙타 대소문자를 사용합니다.

일반적으로, 여러분은 여러분이 쓰고 있는 언어에 가장 "원주민"으로 느껴지고 보이는 스타일을 채택하는 것이 여러분 자신의 스타일을 모든 다른 언어로 구두에 새겨넣으려고 노력하는 것보다 낫다는 것을 알게 될 것입니다.원어민 도서관과 언어 구조를 사용해야 하는 것을 피할 수 없기 때문에, 여러분의 스타일은 여러분이 좋든 싫든 원어민 스타일에 의해 "오염"될 것이기 때문에, 시도하는 것조차 거의 헛된 일입니다.

제 조언은 여러 언어에 걸쳐 좋아하는 스타일을 찾는 것이 아니라, 각 언어 내에서 편안하게 지내며 모든 특이한 점을 사랑하는 법을 배우라는 것입니다.CSS의 특징 중 하나는 키워드와 식별자가 소문자로 작성되고 하이픈으로 구분된다는 것입니다.개인적으로, 저는 이것이 시각적으로 매우 매력적이고 모두 소문자(비록 하이픈은 아니지만) HTML과 잘 어울린다고 생각합니다.

HTML/CSS 커뮤니티가 밑줄 대신 대시로 정렬한 주요 이유는 사양 및 브라우저 구현의 과거 결함 때문일 것입니다.

2001년 3월에 발행된 Mozilla 문서에서 https://developer.mozilla.org/en-US/docs/Underscores_in_class_and_ID_Names

1996년에 최종 형태로 출판된 CSS1 사양은 클래스 및 ID 이름에 밑줄을 사용하는 것을 "도피"하지 않는 한 허용하지 않았습니다.이스케이프된 밑줄은 다음과 같습니다.

    p.urgent\_note {color: maroon;}

그러나 이는 당시 브라우저에 의해 잘 지원되지 않았고, 이 관행은 결코 인기를 얻지 못했습니다.1998년에 출판된 CSS2는 클래스와 ID 이름에 밑줄 사용을 금지했습니다.그러나 2001년 초에 발표된 사양에 대한 오류로 인해 처음으로 밑줄이 합법화되었습니다.이것은 불행하게도 이미 복잡한 풍경을 복잡하게 만들었습니다.

저는 일반적으로 밑줄을 좋아하지만, 백슬래시는 그 당시의 부족한 지원은 말할 것도 없고, 희망을 넘어 추악하게 만듭니다.개발자들이 왜 페스트처럼 피했는지 이해할 수 있습니다.물론 요즘은 백슬래시가 필요하지 않지만 대시에티켓은 이미 확고하게 자리 잡았습니다.

아무도 이것에 대해 명확하게 대답할 수 없다고 생각하지만, 여기 제가 배운 추측들이 있습니다.

1. 밑줄은 Shift 키를 눌러야 하므로 입력하기가 더 어렵습니다.

2. 공식 CSS 사양의 일부인 CSS 선택기는 밑줄이 아닌 대시(첫 번째 자식 및 첫 번째 줄과 같은 유사 클래스)를 사용합니다.속성(예: 텍스트 장식, 배경색 등)도 마찬가지입니다.프로그래머는 습관의 창조물입니다.그렇게 하지 않을 이유가 없다면 그들이 표준의 스타일을 따를 것이라는 것은 말이 됩니다.

3. 이건 좀 더 위험한 곳에 있습니다만...신화든 사실이든, 구글은 밑줄로 구분된 단어를 하나의 단어로, 대시로 구분된 단어를 별도의 단어로 취급한다는 오랜 생각이 있습니다. (Matt Cutts on Hundsores vs. 대시.)이러한 이유로, 저는 현재 페이지 URL을 만드는 것에 대한 제 선호가 대시와 함께 단어를 사용하는 것이라는 것을 알고 있으며, 적어도 저에게는 이것이 CSS 선택기와 같은 다른 것들에 대한 제 명명 규칙에 영향을 미쳤습니다.

여러 가지 이유가 있지만, 가장 중요한 것 중 하나는 일관성을 유지하는 것입니다.

저는 이 기사가 그것을 포괄적으로 설명한다고 생각합니다.

CSS는 하이픈으로 구분된 구문입니다.이것은 우리가 다음과 같은 것들을 쓴다는 것을 의미합니다.font-size,line-height,border-bottom

그래서:

구문을 섞으면 안 됩니다. 일관성이 없습니다.

최근 몇 년 동안 URL의 하이픈으로 구분된 전체 단어 세그먼트가 뚜렷하게 증가했습니다.이는 SEO 모범 사례를 통해 권장됩니다.Google은 명시적으로 "URL에 밑줄(_) 대신 하이픈(-)을 사용해야 합니다."라고 말합니다. http://www.google.com/support/webmasters/bin/answer.py?answer=76329

언급한 바와 같이, 서로 다른 상황에서 서로 다른 시간에 서로 다른 규약이 우세했지만, 일반적으로 그것들은 어떤 프로토콜이나 프레임워크의 공식적인 부분이 아닙니다.

그렇다면, 제 가설은 구글의 위치가 이 패턴을 하나의 핵심 컨텍스트(SEO) 내에 고정시키고, 클래스, ID 및 속성 이름에서 이 패턴을 사용하는 추세는 단순히 이 일반적인 방향으로 느리게 이동하는 무리라는 것입니다.

저는 이것이 프로그래머에 의존하는 것이라고 생각합니다.대시를 사용하는 사람도 있고 밑줄을 사용하는 사람도 있습니다.
저는 개인적으로 밑줄을 사용합니다._) 왜냐하면 다른 곳에서도 사용하기 때문입니다.예:
JavaScript 변수(var my_name);
내 컨트롤러 작업(public function view_detail)
제가 밑줄을 사용하는 또 다른 이유는 대부분의 IDE에서 밑줄로 구분된 두 단어가 하나의 단어로 간주되기 때문입니다(double_click으로 선택할 수 있음).

point of refactoring only btn to bt

case: btn_pink
search btn in word
result btn

case: btn-pink
search btn in word
result btn | btn-pink

case: btn-pink
search btn in regexp
\bbtn\b(?!-) type to hard
result btn

언급URL : https://stackoverflow.com/questions/7560813/why-are-dashes-preferred-for-css-selectors-html-attributes