의견 : HTML5 명명 규칙 및 마이크로 형식 개발.
2004 년 5 월 29 일, 은퇴 한 블로그와 모든 큰 대화에서, 40 개의 디자이너 웹 사이트를 조사하여 타이틀 및 배너, 내비게이션, 콘텐츠 및 바닥 글과 같은 공개 페이지 요소에 대한 규칙을 보았을 때 (결과).
과학적 연구는 거의 없었지만 그해 6 월에 나는 Eric Meyer의 의견 중 일부를 따르고 일련의 명명 규칙을 발표했습니다. 웹 사이트가 이러한 이름 지정 규칙을 통과 한 것을 알았을 때, 나는 항상 4 년이 지난 후에 매일 그것을 사용하고 있다는 것을 기쁘게 생각합니다.
내 생각은 이것으로 요약 될 수 있습니다
ID 및 클래스 속성 이름은 소개가 아니라 요소의 함수 또는 내용을 반영해야합니다. 그래서 나는 헤더에서 나와 다시 브랜딩을 갔다. 바닥 글에서 나와 사이트 인포로 교체했습니다.
이름 지정은 거의 XML 스타일 구조를 취해야합니다. 이름 지정은 거의 XML 스타일 구조를 취합니다. 따라서 내부 컨텐츠는 컨텐츠 메인, 콘텐츠 서브 및 콘텐츠 업프가 제공됩니다.
이 컨벤션은 저에게 잘 봉사하고, 내가하는 일은 그들의 핵심을 거의 바꾸지 않습니다. 그들이 모두 내 일을 더 빠르고 일관되며 더 유익하다는 것은 의심의 여지가 없습니다. 그들은 제품을 더 쉽게 만들고 내 사고 방식으로 내가 함께 일하는 사람들을 키울 수 있도록합니다. 이름 지정 컨벤션이 작동합니다.
마이크로 기형 및 관련 속성 이름
HCARD, HCALENDAR, HATOM 및 기타 드래프트와 같은 미세 기형은 너무 많은 속성 값을 가져 와서 종종 어떤 구조 파일을 고려해야하는지 또는 이러한 더 많은 속성 값에 대해 어떤 제약 조건 CSS 패턴을 제공하는지 고려해야합니다. 이제 나는 마이크로 기형을 사용 하여이 수준에 도달하여 클래스 속성 (마이크로 포맷과 수반되는 클래스 속성 제외)을 사용하지 않아 전체 페이지를 개발합니다.
드문 경우에, 나는 새로운 요소를 추가해야합니다 (레이아웃 목적의 구분을 가정). 처음으로 생각하는 것은 이미 확장 마이크로 기형에 존재한다고 생각합니다. Hatom 모드를 사용하는 예를 제공하겠습니다.
<div class = hentry>
<h2 class = Entry-Title> 제목 </h2>
<div class = Entry-Content>
주요 내용
</div>
<div class = Entry-Rerated>
관련 내용
</div>
</div>
마이크로 형식의 장점을 유지하고 있다면, 입력 관련이 하톰 패턴의 일부가 아니라는 것을 알았습니다.이 경우 절대적으로 명시 적으로 추가 요인이 있어야합니다. 관련 Sidelinks와 같은 속성 가치를 어떻게 구성합니까?
마이크로 포트의 명명 패턴을 확장하는 것이 더 논리적으로 보이나요?
html5
이 장의 시작 부분에서 나는 솔직히 말해야합니다.이 순간, 나는 html5에 덜주의를 기울일 수 없습니다. 그러나 이것은 문제의 열쇠가 아닙니다. HTML5는 다음과 같은 잠재적으로 매우 유용한 새로운 요소를 소개합니다.
부분
일반 파일 또는 응용 프로그램 섹션. 이와 관련하여 챕터는 컨텐츠의 주제 분류입니다.
기사
문서, 웹 페이지 또는 웹 사이트의 독립적 인 부분을 형성하는 기사로 구성된 페이지의 일부. 포럼 게시물, 잡지 또는 신문 기사, 웹 로그 항목, 사용자 제출 한 의견 또는 기타 독립적 인 콘텐츠 항목 일 수 있습니다.
곁에
콘텐츠로 구성된 페이지의 일부는 제외한 요소와 관련된 컨텐츠와 무관하며 컨텐츠와 분리 된 것으로 간주 될 수 있습니다. 이 부분은 종종 인쇄 및 인쇄물 사이드 바로 나타납니다.
마이크로 기형의 발명가가 기존 사양에 따라 스키마를 기반으로하는 것이 논리적 이었기 때문에, 이제 HTML5의 사람들을 따라 가도록 내 이름을지는 규칙을 조정하는 것이 합리적입니까? 물론 사용할 수 없습니다.
<섹션>
<H2> 제목 </h2>
<기사>
주요 내용
</article>
<따로>
관련 내용
</제쳐두고>
</섹션>
그러나 이제 ID 및 클래스 속성 값을 사용하여 HTML5에 익숙해지면서 문서를 통해 한 걸음 더 나아갈 수 있습니다.
<div class = 섹션>
<H2> 제목 </h2>
<div class = article>
주요 내용
</div>
<div class = 따로>
관련 내용
</div>
</div>
나는 그것이 나에게 논리적 인 다음 단계라고 생각합니다. 그래서이 데모 파일을 살펴보면, 나는 이름 지정 컨벤션에 대한 HTML5 요소를 기반으로했습니다. 방금 언급 한 내용 외에도, ColGroup 및 Col을 사용하여 필드를 구축하고 (NAV)를 분류하고 탐색하는 방법을 결정하고, 변절되지 않은 목록을 그리드로 변환하고, DataGrid를 사용했습니다.
HTML5의 태깅 사양에는 세부 사항, 대화 상자 및 그림도 포함되어 있으며 속성 값으로 사용할 수 있습니다.
내가 오늘 소원을 달성 할 수 있다면,이 소원은 모든 CSS 프레임 워크 개발이 동일한 이름 지정 컨벤션 (그리고 마이크로 형식으로 널리 포함됨)을 채택하여 의미있는 태그와 CSS를 가진 초보자 인 사람들이 표현 ID 및 클래스 속성보다는 더 의미 있고 논리적으로 사용하는 올바른 출발점을 갖기를 원합니다.