웹 개발자(즉, 귀하)는 CSS 클래스와 ID 이름을 만들고 이 이름을 사용하여 Div 및 기타 페이지 요소와 태그를 식별할 수 있습니다. 개발자의 경우 XHTML 태그(태그)를 재정의하는 CSS 선택기의 이름을 지정할 때 미리 정의된 태그와 정확하게 일치하는지 확인해야 하지만 클래스 및 ID 선택기 이름은 의견의 문제입니다. 그러나 이러한 클래스와 ID의 이름을 원하는 대로 지정하는 것은 좋은 습관이 아닙니다.
Stuff and Nonsense 및 All That Malarkey의 Andy Clarke와 Eric Meyer가 작성한 CSS 클래스 및 ID 명명 규칙에 대한 일련의 기사를 읽은 후 나는 내 웹 사이트 디자인 프로세스에서 클래스와 ID를 사용하는 것에 대해 생각하기 시작했습니다. 명명 방법.
직관적인 명명
웹 페이지를 디자인하고 Div를 식별해야 할 때 가장 자연스러운 아이디어는 페이지에서의 위치를 설명하는 단어를 사용하여 요소의 이름을 지정하는 것입니다. 이 접근 방식을 사용하면 클래스 및 ID 이름이 다음과 같이 표시됩니다.
상단 패널
수평 탐색
왼쪽
중앙 기둥
오른쪽 열
이는 CSS 및 XHTML 클래스와 ID의 이름을 지정하는 유효한 방법입니다. 이러한 용어는 간단하고 설명적이므로 페이지 요소와 해당 CSS 스타일을 식별해야 하는 요구 사항을 충족합니다.
문제는 그러한 이름이 페이지 콘텐츠의 특정 표현과 연관되어 있다는 것입니다. 이러한 이름은 특정 페이지 레이아웃 내에서 페이지 요소의 위치를 나타내므로 해당 레이아웃 외부에서 사용하는 것은 부적절하거나 혼란스러울 수도 있습니다. 동시에 이러한 이름은 문서 내용의 구조와 관련이 없습니다. 따라서 CSS 클래스와 ID의 이름을 지정하는 더 좋은 방법이 있습니다.
구조화된 명명
구조화된 마크업은 표현/위치 정보를 콘텐츠에서 완전히 분리하는 것을 의미합니다. 여기에는 마크업에 나타나는 클래스 및 ID 이름이 포함됩니다.
태그된 관련 정보는 문서의 모양보다는 문서의 구조를 설명하는 데 사용됩니다. 이 기능을 사용하면 CSS를 간단히 변경하여 다양한 모양 형식으로 콘텐츠와 마크업을 재사용할 수 있습니다. 이 방법을 이해하면 오디오와 같은 표시 형식을 처리할 때 페이지 위치를 사용하여 클래스 및 ID 이름을 지정하는 것이 매우 부적절하다는 것을 쉽게 알 수 있습니다. 따라서 클래스와 ID는 나타나는 위치보다는 문서에서의 목적에 따라 구조화되고 이름이 지정되어야 합니다.
클래스 및 ID 이름은 아래와 같이 구조화된 방식으로 이름을 지정할 수 있습니다.
브랜딩
기본 탐색
하위 탐색
주요 내용
사이드바
이러한 이름은 직관적인 명명 규칙만큼 이해하기 쉽지만 위치보다는 페이지 요소의 역할을 설명합니다. 이는 순수한 구조적 마크업을 사용하려는 원래 의도와 코드의 일관성을 더욱 높여줍니다. 즉, 개발자는 마크업을 변경하지 않고도 다양한 미디어의 표시 형식을 처리할 수 있습니다.
웹 페이지의 형식을 다른 미디어로 구성할 계획이 없더라도 구조화된 이름 지정을 사용하면 향후 사이트 업그레이드나 재설계를 더 쉽게 만드는 데 도움이 될 수 있습니다. 예를 들어, 구조화된 이름 지정은 동일한 ID 오른쪽 열을 가진 div가 페이지 왼쪽으로 이동할 때 혼란을 방지합니다. 페이지의 어느 쪽에 표시되든 이름은 여전히 직관적이고 개발자가 이해하기 쉽기 때문에 이런 방식으로 div 사이드바의 이름을 지정하는 것이 더 적절합니다.
일부 명명 규칙
Andy Clarke는 표준화된 웹 디자인 개념을 옹호하는 개발자가 디자인한 40개 웹 사이트의 소스 코드를 분석했습니다. 클래스 이름과 ID 이름은 매우 불일치하지만 자주 나타나는 일부 공통 이름은 여전히 발견됩니다. 가장 일반적으로 사용되는 클래스/ID 이름의 예제 목록은 다음과 같습니다.
헤더
콘텐츠
네비게이션
사이드바
보행인
이러한 공통 클래스 및 ID 이름은 표준의 탄생을 표시합니까, 아니면 일반적으로 허용되는 규칙의 형성을 표시합니까? 이것이 내가 희망하는 것이지만 나는 그렇게 생각하지 않습니다. 저는 우리가 매일 보는 공통 페이지 요소에 대한 일련의 명명 표준을 보고 싶습니다. 동시에 표준화된 명명 방법을 사용하면 페이지 요소를 쉽게 찾고 웹 사이트를 업그레이드할 수 있습니다. 특히 서로 다른 시간에 서로 다른 개발자가 개발한 사이트 간에 작업을 전환해야 하는 경우 더욱 그렇습니다.