html / css ID 및 클래스에 대한 표준 명명 규칙은 무엇입니까?

사용중인 플랫폼에 따라 결정됩니까, 아니면 대부분의 개발자가 제안 / 추천하는 일반적인 규칙이 있습니까?

몇 가지 옵션이 있습니다.

1. id="someIdentifier"' -자바 스크립트 코드와 꽤 일치합니다.
2. id="some-identifier" -html5와 유사한 속성 및 html의 다른 항목과 비슷합니다.
3. id="some_identifier" -루비 코드와 꽤 일관성이 있으며 Javascript 내부의 유효한 식별자입니다.

Javascript로 더 잘 연주하기 때문에 위의 1 위와 3 위가 가장 의미가 있다고 생각했습니다.

이것에 대한 정답이 있습니까?

없어요

텍스트 편집기 (Gedit)의 구문 강조 표시를 엉망으로 만드는 하이픈으로 인해 항상 밑줄을 사용하지만 개인 취향입니다.

나는이 모든 관습이 모든 곳에서 사용되는 것을 보았습니다. 가장 잘 생각되는 책, 가장 잘 읽히기 쉬운 책, 많이 사용하기 때문에 가장 쉽게 입력 할 수있는 책을 사용하십시오. 예를 들어 키보드 밑면에 밑줄 키가있는 경우 (아마도 가능하지만 완전히 가능하지 않은 경우) 하이픈을 사용하십시오. 자신에게 가장 적합한 것을 선택하십시오. 또한이 세 가지 규칙을 모두 쉽게 읽을 수 있습니다. 팀에서 작업하는 경우 팀 지정 규칙 (있는 경우)을 준수해야합니다.

2012 업데이트

시간이 지남에 따라 프로그래밍 방식이 변경되었습니다. 이제 thisIsASelector하이픈 대신 낙타 케이스 ( )를 사용합니다. 나는 후자가 오히려 못 생겼습니다. 사용은 어떤 당신은 쉽게 시간이 지남에 따라 변경 될 수있는 선호합니다.

2013 년 업데이트

매년 물건을 섞는 것처럼 보입니다 ... Sublime Text로 전환하고 잠시 동안 Bootstrap을 사용한 후 다시 대시로 돌아갔습니다. 나에게 지금 그들은 un_der_scores 또는 camelCase보다 훨씬 깨끗해 보입니다. 이 : 내 원래 점은 여전히 있지만 의미 없는 표준.

2015 업데이트

여기에 규칙이있는 흥미로운 코너 케이스는 Rust 입니다. 나는 언어를 정말로 좋아하지만 이외의 것을 사용하여 물건을 정의하면 컴파일러에서 경고합니다 underscore_case. 경고를 끌 수는 있지만 컴파일러가 기본적으로 규칙을 제안하는 것이 흥미 롭습니다. 더 큰 프로젝트에서는 더 깨끗한 코드로 이어지지 만 이는 나쁘지 않습니다.

업데이트 2016 ( 당신이 그것을 요구)

앞으로 프로젝트에 BEM 표준을 채택했습니다 . 클래스 이름은 상당히 장황하지만 클래스와 CSS와 함께 좋은 구조와 재사용 성을 제공한다고 생각합니다. 나는 BEM 이 실제로 표준 이라고 가정 하지만 (아마도 내 no것이 yes될 수도 있음) 여전히 프로젝트에서 사용하기로 결정한 것은 당신에게 달려 있습니다. 가장 중요한 것은 선택한 것과 일치해야합니다.

업데이트 2019 ( 당신이 그것을 요구)

꽤 오랫동안 CSS를 쓰지 않은 후, 나는 그들의 제품 중 하나에서 OOCSS 를 사용하는 곳에서 일하기 시작했습니다 . 나는 개인적으로 모든 곳에서 클래스를 쓰레기 처리하는 것이 매우 불쾌하지만, HTML과 CSS를 항상 뛰어 넘을 필요는 없다고 생각합니다.

그래도 여전히 BEM에 정착했습니다. 장황하지만 이름 공간은 React 구성 요소에서 매우 자연스럽게 작업합니다. 또한 브라우저 테스트시 특정 요소를 선택하는 데 좋습니다.

OOCSS와 BEM은 CSS 표준 중 일부일뿐입니다. CSS 는 그다지 좋지 않기 때문에 모두 타협으로 가득 합니다.

2020 업데이트

올해 지루한 업데이트. 여전히 BEM을 사용하고 있습니다. 위에 나열된 이유로 2019 업데이트에서 내 위치가 실제로 변경되지 않았습니다. 팀 규모에 따라 확장하고 원하는 CSS 기능을 거의 또는 적게 숨길 수있는 기능을 사용하십시오.

Google의 CSS 및 HTML 스타일 가이드가 있습니다 . https://google.github.io/styleguide/htmlcssguide.html#ID_and_Class_Name_Delimiters 는 항상 하이픈을 사용하는 것이 좋습니다 .

하이픈 (-) 대신 밑줄을 사용하는 것이 좋습니다. 왜냐하면 ...

<form name="myForm">
  <input name="myInput" id="my-Id" value="myValue"/>
</form>

<script>
  var x = document.myForm.my-Id.value;
  alert(x);
</script>

그런 식으로 쉽게 id로 값에 액세스 할 수 있습니다. 그러나 하이픈을 사용하면 구문 오류가 발생합니다.

이것은 오래된 샘플이지만 jquery없이 작동 할 수 있습니다-:)

@jean_ralphio 덕분에 피할 수있는 해결 방법이 있습니다.

var x = document.myForm['my-Id'].value;

대시 스타일은 Google 코드 스타일이지만 실제로는 마음에 들지 않습니다. id로는 TitleCase를, 수업에는 camelCase를 선호합니다.

tl; dr;

진정한 답은 없습니다. 많은 사람 중 하나를 선택하거나 함께 일하는 사람에 따라 의미가있는 것을 기준으로 고유 한 표준을 만들 수 있습니다. 그리고 플랫폼에 100 % 의존합니다.

원본 게시물

고려해야 할 또 하나의 대안 표준 :

<div id="id_name" class="class-name"></div>

그리고 당신의 스크립트에서 :

var variableName = $("#id_name .class-name");

변수, id 및 클래스에 대해 각각 camelCase, under_score 및 하이픈을 사용합니다. 이 웹 사이트에서이 표준에 대해 읽었습니다. css / jquery 선택기에는 약간 중복되어 있지만 중복성은 오류를 쉽게 포착 할 수있게합니다. 예 : CSS 파일을 .unknown_name보거나 #unknownName참조하면 실제로 무엇을 참조하는지 알아 내야합니다.

2019 업데이트

하이픈은 'kebab-case', 밑줄은 'snake_case', 'TitleCase', 'pascalCase'가 있습니다.

나는 개인적으로 하이픈을 싫어합니다. 나는 원래 규칙을 간단하기 때문에 이것을 대안으로 게시했습니다. 그러나 하이픈은 선택 바로 가기를 매우 어렵게 만듭니다 ( vsCode의 두 번 클릭, ctrl/ option+ left/ right및 ctrl/ cmd+ D. 또한 클래스 이름과 파일 이름은 거의 항상 따옴표 또는 CSS로 표시되므로 하이픈이 작동하는 유일한 위치입니다) 그러나 지름길은 여전히 ​​적용됩니다.

변수, 클래스 이름 및 ID 외에도 파일 이름 규칙을 보려고합니다. 그리고 힘내 지점.

내 사무실의 코딩 그룹은 실제로 한 달 또는 두 달 전에 회의에서 우리가 어떻게 이름을 지정할지 논의했습니다. 자식 분기의 경우 321-the_issue_description 또는 321_the-issue-description을 결정할 수 없습니다. (321_theIssueDescription을 원했지만 동료들은 그 점을 좋아하지 않았습니다.)

다른 사람들의 표준과 함께 일하는 것을 보여주는 예

Vue.js에는 표준이 있습니다. 실제로 그들은 여러 품목에 대해 두 가지 대체 표준을 가지고 있습니다. 파일 이름에 대한 두 버전을 모두 좋아하지 않습니다. "/path/kebab-case.vue"또는을 추천합니다 "/path/TitleCase.Vue". 특별히 이름을 바꾸려는 경우가 아니면 전자의 이름을 바꾸기가 더 어렵습니다. 후자는 크로스 플랫폼 호환성에 좋지 않습니다. 나는 선호한다 "/path/snake_case.vue". 그러나 다른 사람이나 기존 프로젝트와 함께 일할 때는 이미 마련된 표준을 따르는 것이 중요합니다. 따라서 Vue에서 파일 이름에 대해 케밥 케이스와 함께 사용하지만 완전히 불평 할 것입니다. 따르지 않기 때문에 vue-cli가 설정 한 많은 파일을 변경해야합니다.

HTML 및 CSS에 대한 명명 규칙에 동의하지 않았습니다. 그러나 객체 디자인에 대한 명명법을 구성 할 수 있습니다. 좀 더 구체적으로 소유권과 관계라고 부릅니다.

소유권

객체를 설명하는 키워드는 하이픈으로 구분할 수 있습니다.

차가 우회전하다

개체를 설명하는 키워드는 개체, 개체 설명자, 동작 및 동작 설명 자라는 네 가지 범주 (왼쪽에서 오른쪽으로 정렬해야 함)로 분류 될 수도 있습니다.

자동차-명사, 객체
새로운 것-형용사, 그리고 객체를 더 자세하게 설명하는 객체 설명자
-동사, 객체
오른쪽에 속하는 행동 -형용사 및 행동 설명자 더 자세하게 행동

참고 : 동사 (동작)는 과거형이어야합니다 (회전, 실행, 실행 등).

관계

개체는 부모 및 자식과 같은 관계를 가질 수도 있습니다. Action 및 Action-Descriptor는 상위 개체에 속하며 하위 개체에는 속하지 않습니다. 객체 간의 관계를 위해 밑줄을 사용할 수 있습니다.

자동차-신규-오른쪽-휠-왼쪽-왼쪽-왼쪽

• 차를 새로 우회전 (소유 규칙 준수)
• 좌회전 좌회전 (소유 규칙 준수)
• car-new-turned-right_wheel- 왼쪽-왼쪽-왼쪽 (관계 규칙을 따릅니다)

최종 노트 :

• CSS는 대소 문자를 구분하지 않기 때문에 모든 이름을 소문자 (또는 대문자)로 작성하는 것이 좋습니다. 이름이 모호해질 수 있으므로 낙타 사건이나 파스칼 사건을 피하십시오.
• 클래스 사용시기와 ID 사용시기를 알고 있어야합니다. 웹 페이지에서 ID가 한 번만 사용되는 것이 아닙니다. 대부분의 경우 ID가 아닌 클래스를 사용하려고합니다. 버튼, 폼, 패널 등과 같은 웹 구성 요소는 항상 클래스를 사용해야합니다. ID는 이름 충돌로 쉽게 이어질 수 있으며 마크 업 이름을 지정하는 경우에는 드물게 사용해야합니다. 위의 소유권 및 관계 개념은 클래스와 ID의 이름을 지정하는 데 적용되며 이름 충돌을 피하는 데 도움이됩니다.
• 내 CSS 명명 규칙이 마음에 들지 않으면 구조 명명 규칙, 프레젠테이션 명명 규칙, 시맨틱 명명 규칙, BEM 명명 규칙, OCSS 명명 규칙 등 여러 가지가 있습니다.

많은 사람들이 CSS id 및 클래스 이름에서 하이픈을 선호하는 또 다른 이유는 기능성입니다.

option+ left/ right(또는 Windows의 경우 ctrl+ left/) 와 같은 키보드 단축키를 사용하여 right단어 단위로 코드를 탐색하면 각 대시에서 커서가 중지되므로 키보드 단축키를 사용하여 ID 또는 클래스 이름을 정확하게 탐색 할 수 있습니다. 밑줄과 낙타 케이스가 감지되지 않고 커서가 마치 한 단어 인 것처럼 커서가 표류합니다.

최근에 XML을 배우기 시작했습니다. 밑줄 버전은 XML 관련 (DOM, XSD 등)을 Java, JavaScript (낙타의 경우)와 같은 프로그래밍 언어와 분리하는 데 도움이됩니다. 그리고 프로그래밍 언어에서 허용되는 식별자를 사용하는 것이 더 나아 보인다는 것에 동의합니다.

편집 : 관련이 없을 수 있지만 여기에서 ID 이름을 지정할 때 따르는 XML 요소 이름 지정에 대한 규칙 및 권장 사항에 대한 링크가 있습니다 ( "XML 이름 지정 규칙"및 "최상의 이름 지정 방법"섹션).

http://www.w3schools.com/xml/xml_elements.asp

플랫폼에 따라 다릅니다. .Net MVC에서 개발할 때 클래스 이름에는 부트 스트랩 스타일 소문자와 하이픈을 사용하지만 ID에는 PascalCase를 사용합니다.

이것에 대한 추론은 내보기가 강력한 형식의보기 모델에 의해 뒷받침되기 때문입니다. C # 모델의 속성은 파스칼 사례입니다. MVC와의 모델 바인딩을 위해 모델에 바인딩하는 HTML 요소의 이름이 파스칼 사례 인 뷰 모델 속성과 일치한다는 것이 합리적입니다. 간단하게하기 위해 이름이 지정된 입력 그룹의 각 요소에 고유 한 ID가 필요한 단일 선택 단추 및 선택란을 제외하고 내 ID는 요소 이름과 동일한 이름 지정 규칙을 사용합니다.