유연하고 안정적인 고품질 HTML 및 CSS 코드를 작성하는 방법

이번에는 유연하고 안정적인 고품질 HTML 및 CSS 코드 작성 방법과 유연하고 안정적인 고품질 HTML 및 CSS 코드 작성 시 노트가 무엇인지 알려드리겠습니다. 봐.

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

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

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

3 IE 호환 모드:

IE는 특정 항목을 지원합니다. 사용해야 하는 IE 버전을 결정하는 태그입니다. 강력한 요구 사항이 없는 한 IE가 지원하는 최신 모드를 사용할 수 있도록 엣지 모드로 설정하는 것이 가장 좋습니다. 4. 문자 인코딩:

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

5. CSS 및 JavaScript 파일 도입:

HTML5 사양에 따라 CSS 및 JavaScript 파일 도입 일반적으로 text/css 및 text/javascript가 각각 기본값이므로 유형 속성을 지정할 필요가 없습니다.

6. 실용성이 왕입니다.

HTML 표준과 의미를 따르되, 언제든지 최소한의 태그를 사용하고 복잡성을 최소화하도록 노력하세요.
HTML 속성은 다음과 같아야 합니다. 코드의 가독성을 보장하기 위해 다음 순서로 정렬되었습니다:

1.class

2.id,name　
3 .data-*　

4.src,for,type,href　

5.title,alt　
6.Aria, role　
class는 재사용 가능성이 높은 구성 요소를 표시하는 데 사용되므로 먼저 순위를 매겨야 합니다.

8. 태그 수를 줄입니다.
HTML 코드를 작성할 때 중복되는 상위 요소를 피하십시오. 이를 위해서는 반복과 리팩토링이 필요합니다.

9. JavaScript로 생성된 태그
태그는 콘텐츠를 찾고 편집하기 어렵게 만듭니다.

10. CSS 구문:
1. 탭 문자(탭);

선택기

를 그룹화할 때 개별 선택기를 한 줄로 구분하세요.
3. 코드의 가독성을 위해 각 선언 블록의 왼쪽 중괄호 사이에 공백을 추가하세요. 4. 선언 블록의 오른쪽 중괄호는 별도의 줄에 있어야 합니다.

5. 각 선언문 뒤에 공백을 삽입해야 합니다.

6.
7. 모든 선언문은 세미콜론으로 끝나야 하며, 마지막 선언문 뒤의 세미콜론은 선택 사항이지만, 이 세미콜론을 생략하면 코드를 실행하기가 더 쉬울 수 있습니다. 쉼표로 각 쉼표 뒤에 공백을 삽입해야 합니다.
9. 속성 값 또는 색상 매개변수의 경우 앞의 0을 생략합니다(예: 0.5 대신 .5). 모두 소문자여야 합니다(예: #fff). 예를 들어 #ffffff 대신 #fff를 사용하세요. 11. 선택한 속성에 큰따옴표를 추가하세요. ; 12. margin:0px 대신 margin:0과 같이 0 값에 대한 단위를 지정하지 마세요.

11. 선언 순서:

관련 속성 선언은 다음 순서로 그룹화되고 정렬되어야 합니다. 위치 지정(위치: 절대; 위쪽: 0; 아래쪽: 0; 오른쪽: 0; 왼쪽: 0; z-색인: 100;)
2.box model(display: block; float: 왼쪽; 너비: 100px; 높이: 100px;);
3.typographic(글꼴: 일반 13px "Microsoft YaHei"; 줄 높이: 1.5em; 색상: #333; 텍스트 정렬:center;);
4.visual(배경: 노란색; 테두리: 1px solid #c00; border-radius: 3px; opacity: 1; );
　
위치 지정으로 인해 일반 문서 흐름에서 그릴 수 있으며 상자 모델과 관련된 스타일도 재정의할 수 있으므로 순위가 높습니다. 박스 모델은 컴포넌트의 크기와 위치를 결정하기 때문에 두 번째로 순위가 높습니다. 다른 속성 지식은 컴포넌트 내부에 영향을 미치거나 처음 두 그룹의 속성에 영향을 주지 않으므로 뒤쳐집니다.

12. @import를 사용하지 마세요.
태그와 비교할 때 @import 명령은 추가 요청 수를 늘릴 뿐만 아니라 예측할 수 없는 문제도 발생시킵니다.
1.
2. sass 이하의 CSS 전처리기를 통해 여러 CSS 파일을 하나의 파일로 변환합니다.
3. Rails, jekyll 또는 기타 시스템을 통해 CSS 파일 병합 기능을 제공합니다. 13. 미디어 쿼리를 다음과 같이 배치합니다. 가능한 한 관련 규칙에 가깝게 단일 스타일 파일로 패키지하거나 문서 하단에 배치하지 마세요.

14. 접두사 속성:
제조업체의 접두사가 붙은 속성의 경우 각 속성의 값이 정렬됩니다. 여러 줄의 편집이 용이하도록 잠금을 통해 세로 방향으로 선언합니다. 가독성과 빠른 편집을 위해 선언문이 여러 줄에 있는 경우에도 선언을 여러 줄로 나누어야 합니다. 이를 수행하는 요인은 오류 감지를 위한 것입니다. 예를 들어 CSS 유효성 검사기 180행에

문법 오류

가 있습니다. 한 줄에 단일 문이 있으면 이 오류를 무시하지 않습니다.

16. Less 및 Sass 중첩

중첩을 사용할 수 있다고 해서 반드시 중첩을 사용해야 하는 것은 아닙니다. 스타일을 상위 요소(즉,
descendant selector)로 제한해야 하며 중첩을 사용하기 전에 중첩해야 하는 요소가 여러 개 있습니다.

17. 참고:

코드는 사람이 작성하고 유지 관리합니다. 코드가 자체 설명적이고 주석이 잘 되어 있으며 다른 사람이 쉽게 이해할 수 있는지 확인하세요. 좋은 코드 주석은 코드의 맥락과 목적을 전달할 수 있습니다.
단순히 구성요소나 클래스 이름을 다시 언급하지 마세요. 완전한 문장을 작성해야 하며, 일반적인 코멘트의 경우 소개 문구를 작성하면 됩니다. TEN 8. 클래스 명명

클래스 이름에는 작은 문자와 대시만 사용할 수 있습니다. 명명 관련에서는 대시를 사용해야 합니다. 클래스(.btn 및 .btn-danger와 같은

네임스페이스
와 유사)
지나치게 임의적인 약어를 사용하지 마세요. .btn은 버튼을 나타내지만 .s는 어떤 의미도 표현할 수 없습니다.
클래스 이름은 최대한 짧아야 하며 의미가 명확해야 합니다.

의미 있는 이름을 사용하고, 체계적이거나 명확한 목적을 가진 이름을 사용하고, 표현의 이름을 사용하지 마세요.

가장 최근 클래스 또는 기본 클래스를 기반으로 하는 새 클래스의 접두사를 사용하세요. (스타일과 반대로) 이러한 클래스를 CSS 파일에 포함하지 마세요.
Sass 및 Less 변수의 이름을 지정할 때 위에 나열된 사양을 참조할 수도 있습니다. 19. 선택기
클래스를 사용하세요.
자주 발생하는 구성요소의 경우
속성 선택
(예: [class^="···"])을 사용하지 마세요. 브라우저 성능은 이러한 요인에 영향을 받습니다. 선택기는 가능한 한 짧아야 하며 선택기를 구성하는 요소 수는 3개를 초과하지 않는 것이 좋습니다.
필요한 경우 클래스를 가장 가까운 상위 요소로 제한하세요.

20.

일관적인 주석 사양을 지정합니다.
일관적인 공백을 사용하여 코드를 블록으로 구분하므로 더 큰 문서를 쉽게 스캔할 수 있습니다.
여러 CSS 파일을 사용하는 경우 페이지 대신 구성 요소로 분할합니다. 페이지가 재구성되고 구성 요소만 이동되기 때문입니다믿거나 말거나 이 사례를 읽고 나면 방법을 마스터하신 것이므로 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목해 보세요!

관련 읽기:

반응형 프레임워크에서 테이블 헤더의 자동 줄 바꿈을 처리하는 방법

테이블 표시 테두리를 만드는 방법

HTML 테이블을 어떻게 배치해야 합니까?

위 내용은 유연하고 안정적인 고품질 HTML 및 CSS 코드를 작성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!