이름 지정 요소 - 모범 사례

Question

요소 이름을 지정할 때 CSS에 'class'이름을 사용해야합니까? & JS의 'id'이름은 무엇입니까? 다른 규칙이 있습니까? 이름을 하나만 사용해야할까요? 통찰력이나 제안을 환영합니다.

Answer 1

이름 지정 규칙에 대해 class 및/또는 id으로가는 것보다 조금 더 복잡합니다. 사실 자바 스크립트와 CSS는 요소를 명명하고 식별하는 것과는 아주 다른 방식으로 처리되어야합니다. 나는이 그

참고합니다 (bootstrap lib 디렉토리를 만든 사람 중 하나) this guide on beginning CSS 체크 아웃하는 것이 좋습니다 또는 당신이 자신을 도전하고 정말 다양하고 재사용 스타일을 구축하려는 경우, @fat에 의해 this article on semantic class names 또는 Meduim's CSS is Actually Pretty F***n good 체크 아웃 것 의견이 있으며 CSS로 자유가 많습니다. 창의적 일뿐 아니라 다른 사람이 죽으면 코드를 이해하고 활용할 수있는 무언가를 만듭니다.

JavaScript는 좋은 사례를 따르지 않으면 더 쉽게 혼란에 빠질 수 있습니다.이 글의 맨 아래에있는 링크 중 일부를 확인해 보겠습니다.하지만 중요한 점은 일관성이 있다는 것입니다. , 자세한 정보 및 주석과 테스트를 사용하십시오. HTML 요소를 조작하기 위해 이름을 지정하는 것과 관련하여 인 경우은 특정 작업을 수행 할 페이지 당 개의 요소 (예 : 로그인 양식의 사용자 이름 필드)가 Id은 이름이 일관성있는 한 허용됩니다. 예를 들어, 로그인 양식 id="name"에 사용자 이름 필드를 호출하지 말고 오해 할 수 있으므로 id="username" 또는 id="login-username"으로 전화하십시오. 미래의 개발자가 ID와 클래스에서 어떤 일이 벌어지고 있는지 알아 내려고 노력할 수있는 모든 두통을 대체하기 위해 상당한 양의 메모리와 네트워크 대역폭을 낭비합니다.

javascript를 통해 페이지의 요소 컬렉션을 식별하는 클래스를 사용하는 것이 의미가 있습니다. 자바 스크립트에 클래스 이름을 사용하도록 지정하십시오. js-<classname>으로 접두어를 붙이거나 is-selected과 같은 상태 저장 이름으로 지정하십시오. 그래서 당신은 1) 자바 스크립트 코드에서 조작하기에 유용 할 수있는 무언가일지도 모르고, 2) CSS에서 자신의 스타일을 혼란스럽지 않게 혼란스럽게 만들지 않도록 알아야한다.

간략히 말하자면 이름 지정에 일관성과 명료성이 있어야합니다. 가끔은 id (페이지에 무언가가 하나만있을 경우)이고 다른 경우는 class 일 때가 있습니다 페이지에 많은 사람들이있을 수도 있고 없을 수도 있습니다.) - 처음 보는 사람에게 의미가 있는지를 생각해보십시오.

링크 덤프 :

• opinion 1 on js variable naming
• opinion 2
• opinion 3

주석이 의견의 톤이 거기있다 - 오히려 사람들이 무엇을 말보다 일관성을 다시 한 더 중요 올해 최고의 모범 사례 (그러나 사람들은 상수에 대한 모든 대문자와 같은 이름 지정 기본 사항을 따르는 경향이 있음을 알게 될 것입니다. s 및 javascript 변수 등을위한 camelCase) - 읽고, 원하는 것을 골라 내십시오.