유연하고 안정적인 고품질 HTML 및 CSS 코드 사양 작성 가이드_HTML/Xhtml_웹페이지 제작

황금률
동일한 프로젝트에 아무리 많은 사람이 작업하더라도 모든 코드 줄이 동일한 사람이 작성한 것처럼 보이도록 항상 동일한 코딩 표준을 따르세요.

1. 문법:
1. 탭 문자(tab)를 바꾸려면 두 개의 공백을 사용하세요.
2. 중첩된 요소는 한 번만 들여쓰기해야 합니다(공백 두 개). . 속성 정의에는 작은따옴표가 아닌 큰따옴표를 사용하세요.
4. 자체 닫는 요소 끝에 슬래시를 추가하지 마세요(
https://dev). .w3.org/html5/spec-author-view/syntax.html#syntax-start-tag)는 이것이 선택사항임을 명확하게 명시합니다. 5. 선택적인 종료 태그를 생략하지 마십시오. . 각 HTML 페이지의 첫 번째 줄에 표준 모드 선언을 추가하여 각 브라우저에 표시되도록 합니다.

2. 언어 속성:

HTML5 사양에 따라 HTML 루트 요소에 lang 속성을 지정하여 텍스트에 대한 올바른 언어를 설정하는 것이 좋습니다. 합성 도구는 어떤 언어를 사용해야 할지 결정합니다. 의 발음은 번역 도구가 번역 중에 따라야 하는 규칙을 결정하는 데 도움이 됩니다. 언어 속성 목록: http://www.sitepoint.com/web-foundations/iso-2-letter -언어 코드/

3. IE 호환 모드:

IE는 영수증의 현재 페이지에서 사용해야 하는 IE 버전을 결정하기 위해 특정 태그를 지원합니다. 강력한 요구 사항이 없는 한 설정하는 것이 가장 좋습니다. 따라서 IE는 지원하는 최신 모드를 채택합니다.

4. 문자 인코딩:

문자 인코딩을 선언하면 브라우저가 페이지 콘텐츠의 렌더링 방법을 빠르고 쉽게 결정할 수 있습니다. 이렇게 하면 문자 엔터티 태그를 사용하지 않아도 됩니다. HTML이므로 모두 문서 인코딩과 일치합니다.

5. CSS 및 JavaScript 파일 가져오기:

HTML5 사양에 따르면 일반적으로 CSS 및 JavaScript 파일을 도입할 때 type 속성을 지정할 필요가 없습니다. javascript는 각각의 기본값입니다.

6. 실용성이 가장 중요합니다.

HTML 표준과 의미를 따르되 항상 최소한의 태그를 사용하고 복잡성을 유지하십시오.
7. 속성 순서:

코드의 가독성을 보장하기 위해 HTML 속성은 다음 순서로 정렬되어야 합니다: 1.class2.id,name　
3.data-*　
4.src,for,type,href　　
5.title,alt　　
6.Aria,role　
class는 재사용 가능성이 높은 구성 요소를 표시하는 데 사용되므로 다음과 같아야 합니다. 우선 정리했습니다.


8. 태그 수를 줄이세요

HTML 코드를 작성할 때 중복되는 상위 요소를 피하세요. 이를 위해서는 반복과 리팩토링이 필요한 경우가 많습니다.
9. JavaScript로 생성된 태그

JavaScript로 생성된 태그는 콘텐츠 검색 및 편집을 어렵게 만들고 성능에 영향을 미칩니다.
10. CSS 구문:

1. 탭 문자(tab)를 바꾸려면 공백을 두 개 사용하세요. 2. 선택자를 한 줄에 따로 배치하세요. 🎜>3. 코드 가독성을 위해 각 선언 블록의 왼쪽 중괄호 사이에 공백을 추가하세요. 4. 선언 블록의 오른쪽 중괄호는 별도의 줄에 있어야 합니다.
5.
6. 보다 정확한 오류 보고를 얻으려면 각 명령문을 한 줄에 입력해야 합니다.
7. 모든 선언문은 세미콜론으로 끝나야 합니다. 문 뒤의 세미콜론은 선택 사항이지만 이 세미콜론을 생략하면 코드를 작성하기가 더 쉽습니다.
8. 쉼표로 구분된 속성 값의 경우 각 쉼표 뒤에 공백을 삽입해야 합니다. 값 또는 색상 매개변수의 경우 1보다 작은 소수점 앞의 0을 생략합니다(예: 0.5 대신 .5).
10. 16진수 값은 모두 소문자여야 합니다(예: #fff). 축약된 16진수 형식의 기본 값을 사용합니다. 예를 들어 #ffffff 대신 #fff를 사용합니다.
11. input[type="text"];
12와 같이 선택한 속성에 큰따옴표를 추가합니다. 0 값의 단위는 margin:0px 대신 margin:0을 사용합니다.


11. 선언 순서:

관련 속성 선언은 함께 그룹화하고 다음 순서로 정렬해야 합니다.

1.위치 지정(위치: 절대; 위쪽: 0; 아래쪽: 0; 오른쪽: 0; 왼쪽: 0; z-색인: 100;) 2.box 모델(디스플레이: 블록; 부동: 왼쪽 ; 너비: 100px; 높이: 100px;);

3.typographic(글꼴: 일반 13px "Microsoft YaHei"; 줄 높이: 1.5em; 색상: #333; text-align:center;); 4.visual(Background: yellow; border: 1px solid #c00; border-radius: 3px; opacity: 1; );

　

위치 지정으로 인해 요소가 일반 문서 흐름에서 제거될 수 있으며, 상자 모델과 관련된 스타일을 다루므로 상자 모델은 구성 요소의 크기와 위치를 결정하므로 두 번째로 순위가 매겨집니다. 다른 속성 지식은 구성 요소 내부에 영향을 미치거나 영향을 미치지 않습니다. 따라서 두 가지 속성 세트가 뒤쳐져 있습니다.

12. @import를 사용하지 마세요　
태그에 비해 @import 명령은 추가 요청 수가 늘어날 뿐만 아니라 예측할 수 없는 문제도 발생합니다. 다음은 몇 가지입니다:
1. 여러 요소를 사용합니다.
2. sass 이하의 CSS 전처리기를 통해 여러 CSS 파일을 하나의 파일로 변환합니다.
3. 시스템은 다음을 제공합니다. CSS 파일 병합 기능.

13. 미디어 쿼리 위치
미디어 쿼리를 가능한 한 관련 규칙에 가깝게 배치하거나 단일 스타일 파일로 묶거나 문서 하단에 배치하지 마세요.

14. 접두사 속성:
특정 제조업체의 접두사 속성을 사용할 경우, 예를 들어 여러 줄 편집에서 각 속성의 값을 잠그는 것이 편리합니다. :

CSS 코드클립보드에 콘텐츠 복사

1. .selector { 　　　
3. - webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15 ); 　　　　
5. 　　　　　　box-shadow: 0 1px 2px rgba(0,0,0,.15) 🎜 >
7. }

15. 한 줄 규칙 선언:
값이 하나인 스타일의 경우 가독성과 빠른 편집을 위해 같은 줄에 선언하는 것이 좋습니다. 다중 선언 스타일을 사용하는 경우에도 선언은 여러 줄로 나누어야 합니다. 이를 수행하는 핵심 요소는 오류 감지를 위한 것입니다. 예를 들어 180행의 CSS 유효성 검사기에 구문 오류가 있습니다. 한 줄에 여러 문이 있는 경우 오류 누락을 방지하기 위해 신중하게 분석해야 합니다.

16. Less 및 Sass에서의 중첩 중첩을 사용할 수 있다고 해서 중첩만 사용해야 한다는 의미는 아닙니다. 스타일은 상위 요소(즉, 하위 선택자)로 제한되어야 하며 중첩되어야 하는 요소가 여러 개 있습니다.

17. 댓글: 코드는 사람들이 작성하고 유지관리합니다. 코드가 자기 설명적이고, 주석이 잘 되어 있고, 다른 사람들이 쉽게 이해할 수 있도록 하세요.
단순히 컴포넌트나 클래스 이름을 다시 언급하지 마세요.
긴 댓글의 경우 완전한 문장을 작성하고, 일반적인 댓글의 경우 소개 문구를 작성하세요.

18. 클래스 이름 지정 클래스 이름에는 작은 문자와 대시만 사용할 수 있습니다(밑줄이나 낙타 문자는 사용 불가). btn 및 .btn-danger)
지나치게 임의적인 약어는 피하세요. .btn은 버튼을 나타내지만 .s는 어떤 의미도 표현할 수 없습니다.
클래스 이름은 최대한 짧아야 하며 의미가 명확해야 합니다. , 체계적이거나 목적이 있는 이름을 사용하고, 표현적인 이름을 사용하지 마세요.
가장 최근 클래스나 기본 클래스를 기반으로 새 클래스의 접두사를 붙입니다.
스타일이 아닌 동작을 식별하려면 .js-* 클래스를 사용하세요. 이러한 클래스를 CSS 파일에 포함하지 마세요.
Sass 및 Less 변수의 이름을 지정할 때 위에 나열된 사양을 참조할 수도 있습니다.

19. 선택기

렌더링 성능을 최적화하는 데 도움이 되는 클래스를 사용하세요. 자주 발생하는 구성요소의 경우 속성 선택기를 사용하지 마세요(예: [class^ ="· ··"]), 브라우저 성능은 이러한 요소의 영향을 받습니다.
선택기를 최대한 짧게 만들고 선택기를 구성하는 요소 수를 제한하려고 합니다. 3을 초과하지 않는 것이 좋습니다.
필요한 경우에만 클래스를 가장 가까운 상위 요소로 제한하세요.

20. 코드 구성:

코드 세그먼트를 구성 요소 단위로 구성합니다. 일관적인 주석 사양을 지정합니다.
일관적인 공백을 사용하여 코드를 블록으로 구분합니다.
여러 CSS 파일을 사용하는 경우 페이지가 재구성되고 구성 요소만 이동되므로 페이지가 아닌 구성 요소로 분할하세요.

위 내용은 이 글의 전체 내용입니다. 표준화되고 유연하며 안정적이며 고품질의 HTML 및 CSS 코드를 작성하는 모든 분들께 도움이 되기를 바랍니다.

원문:

http://www.cnblogs.com/codinganytime/p/5258223.html