동일한 프로젝트에서 얼마나 많은 사람이 작업하더라도 모든 코드 줄이 동일한 사람이 작성한 것처럼 보이도록 하세요.
1. 탭 대신 공백 두 개를 사용합니다. 이는 모든 환경에서 일관된 표시를 보장하는 유일한 방법입니다.
2. 중첩된 요소는 한 번만 들여쓰기해야 합니다(예: 공백 2개).
3. 속성 정의에는 큰따옴표를 사용하고 작은따옴표는 절대 사용하지 마세요.
4. 자체 닫는 요소에 후행 슬래시를 추가하지 마세요. HTML5 사양에는 이것이 선택 사항이라고 명확하게 명시되어 있습니다.
5. 선택적 닫는 태그를 생략하지 마세요
<!DOCTYPE HTML> <html> <머리> <title>페이지 제목</title> </head> <본문> <img src="images/company-logo.png" alt="회사"> <h1 class="hello-world">안녕하세요, 세상!</h1> </body> </html>
모든 브라우저에서 일관된 표시를 보장하려면 모든 HTML 페이지의 첫 번째 줄에 표준 모드 선언을 추가하세요.
<!DOCTYPE HTML> <html> <머리> </head> </html>
HTML5 사양에 따르면:
문서에 대한 올바른 언어를 설정하려면 html 루트 요소에 대한 lang 속성을 지정하는 것이 좋습니다. 이는 음성 합성 도구가 사용해야 하는 발음을 결정하고 번역 도구가 번역할 때 따라야 하는 규칙을 결정하는 데 도움이 됩니다.
<html lang="en-us"> <!-- ... --> </html>
IE는 현재 페이지를 그리는 데 사용해야 하는 IE 버전을 결정하기 위해 특정 태그를 지원합니다. 특별히 필요한 경우가 아니라면 엣지 모드로 설정하여 IE가 지원하는 최신 모드를 채택하도록 알리는 것이 가장 좋습니다.
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
문자 인코딩을 명시적으로 선언하면 브라우저가 페이지 콘텐츠를 렌더링하는 방법을 빠르고 쉽게 결정하도록 할 수 있습니다. 이것의 장점은 HTML에서 문자 엔터티 태그를 사용하지 않아도 되므로 모든 것이 문서 인코딩(보통 UTF-8 인코딩)과 일치한다는 것입니다.
<머리> <meta charset="UTF-8"> </head>
HTML5 사양에 따르면 일반적으로 CSS 및 JavaScript 파일을 도입할 때 type 속성을 지정할 필요가 없습니다. 왜냐하면 text/css 및 text/javascript가 각각 기본값이기 때문입니다.
<!-- 외부 CSS --> <link rel="stylesheet" href="code-guide.css"> <!-- 문서 내 CSS --> <스타일> /* ... */ </style> <!-- 자바스크립트 --> <script src="code-guide.js"></script>
HTML 표준과 의미를 따르되 실용성을 희생하지 마십시오. 항상 최소한의 태그를 사용하고 복잡성을 최소화하도록 노력하세요.
코드의 가독성을 보장하려면 HTML 속성을 아래 순서대로 정렬해야 합니다.
수업
아이디, 이름
데이터-*
src, for, 유형, href, 값
제목, 대체
역할, 아리아-*
클래스는 재사용 가능성이 높은 구성 요소를 식별하는 데 사용되므로 먼저 나열되어야 합니다. ID는 특정 구성 요소를 식별하는 데 사용되며 주의해서 사용해야 합니다(예: 페이지 내의 책갈피). 따라서 두 번째로 사용됩니다.
부울 속성은 값 없이 선언될 수 있습니다. XHTML 사양에서는 값을 할당해야 하지만 HTML5 사양에서는 그렇지 않습니다.
자세한 내용은 부울 속성에 대한 WhatWG 섹션을 참조하세요.
요소의 부울 속성에 값이 있으면 true이고, 값이 없으면 false입니다.
값을 할당해야 하는 경우 WhatWG 사양을 참조하세요.
속성이 존재하는 경우 해당 값은 빈 문자열이거나 […] 선행 또는 후행 공백 없이 속성의 정식 이름이어야 합니다.
간단히 말해서 값을 할당할 필요가 없습니다.
HTML 코드를 작성할 때 중복되는 상위 요소를 피하십시오. 이를 달성하려면 반복과 리팩토링이 필요한 경우가 많습니다. 다음 사례를 참조하시기 바랍니다.
<!-- 그다지 좋지는 않습니다 --> <스팬 클래스="아바타"> <img src="..."> </span> <!-- 더 좋음 --> <img 클래스="아바타" src="...">
JavaScript를 통해 생성된 태그는 콘텐츠를 찾고 편집하기 어렵게 만들고 성능을 저하시킵니다. 가능하면 피하세요.
1. 탭 대신 공백 두 개를 사용합니다. 이는 모든 환경에서 일관된 표시를 보장하는 유일한 방법입니다.
2. 선택기를 그룹화할 때 개별 선택기를 해당 줄에 배치합니다.
3. 코드 가독성을 위해 각 선언 블록의 여는 중괄호 앞에 공백을 추가합니다.
4. 선언 블록의 닫는 중괄호는 별도의 줄에 있어야 합니다.
5. 각 선언문의 뒤에 공백을 삽입해야 합니다.
6. 보다 정확한 오류 보고를 위해 각 명령문은 별도의 줄에 있어야 합니다.
7. 모든 선언문은 세미콜론으로 끝나야 합니다. 마지막 선언문 뒤의 세미콜론은 선택 사항이지만 생략하면 코드에 오류가 발생할 가능성이 더 커질 수 있습니다.
8. 쉼표로 구분된 속성 값의 경우 각 쉼표 뒤에 공백을 삽입해야 합니다(예: box-shadow).
9. rgb(), rgba(), hsl(), hsla() 또는 ect() 값 내에서 쉼표 뒤에 공백을 삽입하지 마십시오. 이는 여러 색상 값(쉼표만, 공백 없음)을 여러 속성 값(쉼표 및 공백)과 구별하는 데 도움이 됩니다.
10. 속성 값이나 색상 매개변수의 경우 1보다 작은 소수점 앞에 오는 0을 생략합니다(예: 0.5 대신 .5, -0.5px 대신 -.5px).
11/Hex 값은 모두 소문자여야 합니다(예: #fff). 소문자는 형태를 구별하기 쉽기 때문에 문서를 스캔할 때 읽기가 더 쉽습니다.
12. 축약된 16진수 값을 사용해 보십시오. 예를 들어 #ffffff 대신 #fff를 사용합니다.
13. 선택기의 속성에 큰따옴표를 추가합니다(예: input[type="text"]). 일부 경우에만 선택 사항이지만 코드 일관성을 위해 큰따옴표를 사용하는 것이 좋습니다.
14. 0 값에 단위를 지정하지 마십시오. 예를 들어 margin: 0px; 대신 margin: 0을 사용하십시오.
/* 잘못된 CSS */
.selector, .selector-secondary, .selector[type=text] {
패딩:15px;
여백:0px 0px 15px;
배경색:rgba(0, 0, 0, 0.5);
상자 그림자:0px 1px 2px #CCC,삽입 0 1px 0 #FFFFFF
}
/* 좋은 CSS */
.선택자,
.selector-보조,
.selector[type="text"] {
패딩: 15px;
여백 하단: 15px;
배경색: rgba(0,0,0,.5);
상자 그림자: 0 1px 2px #ccc, 삽입 0 1px 0 #fff;
}관련 속성 선언은 함께 그룹화하고 다음 순서로 정렬해야 합니다.
포지셔닝
박스 모델
인쇄상의
시각적
위치 지정은 일반적인 문서 흐름에서 요소를 제거하고 상자 모델 관련 스타일을 재정의할 수 있기 때문에 가장 먼저 나타납니다. 상자 모델은 구성 요소의 크기와 배치를 결정하므로 두 번째입니다.
다른 속성은 구성 요소 내부에만 영향을 미치거나 처음 두 속성 그룹에는 영향을 주지 않으므로 순위가 뒤쳐집니다.
.선언-순서 {
/* 위치 지정 */
위치: 절대;
상단: 0;
오른쪽: 0;
하단: 0;
왼쪽: 0;
Z-색인: 100;
/* 박스 모델 */
디스플레이: 블록;
플로트: 오른쪽;
너비: 100px;
높이: 100px;
/* 타이포그래피 */
글꼴: 일반 13px "Helvetica Neue", sans-serif;
줄 높이: 1.5;
색상: #333;
텍스트 정렬: 중앙;
/* 시각적 */
배경색: #f5f5f5;
테두리: 1px 솔리드 #e5e5e5;
테두리 반경: 3px;
/* 기타 */
불투명도: 1;
}태그에 비해 @import 지시어는 속도가 훨씬 느리기 때문에 추가 요청 수가 늘어날 뿐만 아니라 예측할 수 없는 문제도 발생합니다. 대안에는 다음이 포함됩니다.
Sass 또는 Less와 유사한 CSS 전처리기를 통해 여러 CSS 파일을 하나의 파일로 컴파일합니다. CSS 파일 병합 기능은 Rails, Jekyll 또는 기타 시스템을 통해 제공됩니다.
<!-- 링크 요소 사용 -->
<link rel="stylesheet" href="core.css">
<!-- @imports를 피하세요 -->
<스타일>
@import url("more.css");
</style>미디어 쿼리를 관련 규칙에 최대한 가깝게 배치하세요. 단일 스타일 파일로 패키지하거나 문서 하단에 배치하지 마세요. 분리하면 앞으로 모두에게 잊혀질 뿐입니다. 전형적인 예가 아래에 나와 있습니다.
.요소 { ... }
.요소-아바타 { ... }
.요소 선택 { ... }
@media (최소 너비: 480px) {
.요소 { ...}
.요소-아바타 { ... }
.요소 선택 { ... }
}하나의 문만 포함하는 스타일의 경우 가독성과 빠른 편집을 위해 같은 줄에 문을 배치하는 것이 좋습니다. 여러 선언이 포함된 스타일의 경우 선언은 여러 줄로 나누어야 합니다.
이를 수행하는 핵심 요소는 오류 감지입니다. 예를 들어 CSS 유효성 검사기는 183행에 구문 오류가 있음을 나타냅니다. 한 줄에 하나의 명령문이면 오류를 무시하지 않을 것이며, 한 줄에 여러 명령문이면 오류를 놓치지 않도록 주의 깊게 분석해야 합니다.
/* 한 줄에 단일 선언 */
.span1 { 너비: 60px }
.span2 { 너비: 140px }
.span3 { 너비: 220px }
/* 여러 선언(한 줄에 하나씩) */
.스프라이트 {
디스플레이: 인라인 블록;
너비: 16px;
높이: 15px;
배경 이미지: url(../img/sprite.png);
}
.icon { 배경 위치: 0 0 }
.icon-home { 배경 위치: 0 -20px }
.icon-account { 배경 위치: 0 -40px }모든 값을 명시적으로 설정해야 하는 경우 단축 속성 선언의 사용을 제한해야 합니다. 축약된 속성 선언의 일반적인 남용은 다음과 같습니다.
심
여유
세례반
배경
국경
국경 반경
대부분의 경우 단축 속성 선언에 모든 값을 지정할 필요는 없습니다. 예를 들어 HTML 제목 요소는 위쪽 및 아래쪽 여백 값만 설정하면 되므로 필요한 경우에만 이 두 값을 재정의하면 됩니다. 단축 속성 선언을 과도하게 사용하면 코드가 복잡해질 수 있으며 속성 값이 불필요하게 재정의되어 의도하지 않은 부작용이 발생할 수 있습니다.
/* 나쁜 예 */
.요소 {
여백: 0 0 10px;
배경: 빨간색;
배경: url("image.jpg");
테두리 반경: 3px 3px 0 0;
}
/* 좋은 예 */
.요소 {
여백 하단: 10px;
배경색: 빨간색;
배경 이미지: url("image.jpg");
테두리 상단 왼쪽 반경: 3px;
테두리 상단 오른쪽 반경: 3px;
}불필요한 중첩을 피하세요. 중첩을 사용할 수는 있지만 반드시 사용해야 한다는 의미는 아니기 때문입니다. 스타일을 상위 요소(예: 하위 선택기)로 제한해야 하고 중첩해야 하는 요소가 여러 개 있는 경우에만 중첩을 사용하세요.
// 중첩하지 않고
.table > thead > tr > th { &hellip }
.table > thead > tr > td { &hellip }
// 중첩 포함
.table > 머리글 > tr {
> 일 { &hellip }
> td { &헬립 }
}가독성을 높이려면 괄호로 묶인 수학 표현식의 값, 변수, 연산자 사이에 공백을 추가하세요.
// 나쁜 예
.요소 {
여백: 10px 0 @variable*2 10px;
}
// 좋은 예
.요소 {
여백: 10px 0 (@variable * 2) 10px;
}코드는 사람이 작성하고 유지 관리합니다. 코드가 자기 설명적이고, 주석이 잘 되어 있고, 다른 사람이 쉽게 이해할 수 있도록 하세요. 좋은 코드 주석은 코드의 맥락과 목적을 전달합니다. 단순히 구성요소나 클래스 이름을 다시 언급하지 마십시오.
긴 댓글의 경우 완전한 문장을 작성하세요. 일반적인 댓글의 경우 간결한 문구를 작성할 수 있습니다.
/* 나쁜 예 */
/* 모달 헤더 */
.modal-헤더 {
...
}
/* 좋은 예 */
/* .modal-title 및 .modal-close에 대한 래핑 요소 */
.모달 헤더 {
...
} 1. 클래스 이름에는 소문자와 대시(밑줄이나 낙타 대문자 제외)만 사용할 수 있습니다. 대시는 관련 클래스의 이름을 지정하는 데 사용되어야 합니다(네임스페이스와 유사)(예: .btn 및 .btn-danger).
2. 지나치게 임의적인 약어를 사용하지 마십시오. .btn은 버튼을 나타내지만 .s는 어떤 의미도 표현할 수 없습니다.
3. 클래스 이름은 가능한 한 짧고 의미가 명확해야 합니다.
4. 의미 있는 이름을 사용하십시오. 표현적인 이름보다는 체계적이거나 목적이 있는 이름을 사용하십시오.
5. 가장 가까운 상위 클래스 또는 기본 클래스를 새 클래스의 접두어로 기반으로 합니다.
6. .js-* 클래스를 사용하여 동작(스타일과 반대)을 식별하고 이러한 클래스를 CSS 파일에 포함하지 마십시오.
/* 나쁜 예 */
.t { ... }
.빨간색 { ... }
.헤더 { ... }
/* 좋은 예 */
.트윗 { ... }
.중요한 { ... }
.트윗 헤더 { ... } 렌더링 성능을 최적화하는 데 도움이 되는 공통 요소에 대한 클래스를 사용하십시오.
자주 발생하는 구성 요소의 경우 속성 선택기(예: [class^=”…”])를 사용하지 마세요. 브라우저 성능은 이러한 요소의 영향을 받을 수 있습니다.
선택자는 가능한 한 짧아야 하며, 선택자를 구성하는 요소 수는 3개를 초과하지 않는 것이 좋습니다.
필요한 경우에만 클래스를 가장 가까운 상위 요소(예: 하위 선택기)로 제한합니다(예: 접두사가 붙은 클래스를 사용하지 않는 경우 접두사는 네임스페이스와 같습니다).
/* 나쁜 예 */
기간 { ... }
.page-container #stream .stream-item .tweet .tweet-header .username { ... }
.아바타 { ... }
/* 좋은 예 */
.아바타 { ... }
.tweet-header .사용자 이름 { ... }
.tweet .avatar { ... }일반적인 코드 불일치 및 차이점을 방지하려면 다음과 같이 편집기를 설정하십시오.
탭 문자를 바꾸려면 공백 두 개를 사용합니다(소프트 탭은 공백을 사용하여 탭 문자를 나타내는 것을 의미합니다). 파일을 저장할 때 후행 공백 문자를 제거하십시오. 파일 인코딩을 UTF-8로 설정합니다. 파일 끝에 빈 줄을 추가합니다.
설명서를 참조하고 이 구성 정보를 프로젝트의 .editorconfig 파일에 추가하세요. 예: Bootstrap의 .editorconfig 인스턴스. 자세한 내용은 EditorConfig를 참조하세요.