프론트엔드 사양 요약
Html:
1: 중첩된 노드는 4개의 공백으로 들여쓰기되어야 합니다.
2: 속성에는 큰따옴표를 사용합니다. 예: class=""
3: 단일 태그(`
`)는 닫을 필요가 없습니다.
4: 모든 코드에 소문자만 사용
5: 인코딩 방법 `` 정의
6: `CSS`, `JavaScript` 도입 시 `type`을 지정할 필요가 없습니다
7: HTML 속성 작성 순서 id -->class --> ;name -- >data-* -->src, for, type, href-->title, alt
8: 태그 생성을 피하세요
9: 각 블록 요소, 목록 요소 또는 테이블 요소가 자체 라인을 차지합니다
10: 의미
Css:
1: 들여쓰기: 공백 4개
2: 공백: 공백 1, 공백 2(`:` 있어야 함 `속성 값`과 🎜> 사이에 공백이 있어야 합니다. 3: ID 명명: 카멜 케이스 명명, id를 스타일 제어로 사용하는 것은 금지됩니다. 클래스 명명: 밑줄
4: 모두 클래스 이름 지정(공용 스타일 제외)은 모두 현재 모듈 이름 또는 약식 이름인 ".modelName" + "-" + className으로 시작해야 합니다.
예: .login-label .login-input
5: 각 선택기 선언은 한 줄에 있어야 합니다
예: .post,
.page,
.comment {
줄 높이: 1.5;
}
6: 선택기의 중첩 수준은 `3 수준`보다 커서는 안 됩니다.
7: 속성은 정의된 후 세미콜론으로 끝나야 합니다.
8: 속성 작성: `레이아웃 위치 지정 속성` > `자체 속성` > `텍스트 속성` > `기타 속성
레이아웃 위치 지정 속성: 여백 / 패딩 / 부동 / 지우기 / 위치(상단, 오른쪽, 하단, 왼쪽)
/ 표시 / 가시성 / 오버플로 / z-index(계단식 순서)
자체 속성: 너비/높이/배경/테두리/윤곽선 등
텍스트 속성: 글꼴/색상/텍스트 정렬/텍스트 장식/세로 정렬/선 높이
/text-indent / 공백 / 목록 스타일(목록 스타일) /content 등
기타 속성: 커서/확대/축소 등
9: `url ()` 함수의 경로는 인용되지 않습니다.
10: 색상값에는 명명된 색상값이 허용되지 않습니다. 색상 값 케이스 항목은 일관성이 있어야 합니다.
11: 배경은 가로 및 세로 위치를 모두 지정해야 합니다.
12: 글꼴: Song SimSun Hei SimHei Microsoft YaHei Microsoft YaHei
13: `line-height`는 텍스트 단락을 정의할 때 숫자 값을 사용해야 합니다. 'line-height'를 사용하여 수직 센터링을 제어하는 경우에도 컨테이너와 동일한 높이로 설정되어야 합니다.
예: .container {
line-height: 1.5;
}
14: `hack` 속성은 해당 속성
바로 뒤에 옵니다.