CSS 인 코딩 규범

CSS 인 코딩 규범
문건
CSS 파일 사용UTF-8인 코딩.

스타일 파일 은@charset규칙 을 써 야 하고 스타일 파일 의 첫 번 째 줄 의 첫 번 째 문자 위치 에서 쓰기 시작 해 야 합 니 다.인 코딩 이름 용UTF-8

문자@charset;모두 소문 자 를 사용 합 니 다.전의 문자 가 나타 나 면 안 됩 니 다.인 코딩 이름 은 대소 혼합 을 허용 합 니 다

@charset "UTF-8";

움츠리다4개의 빈 칸 을 들 여 쓰기 단계 로 사용 하고2개의 빈 칸 이나tab문 자 를 사용 할 수 없습니다.
예시:

.selector {
     
    margin: 0;
    padding: 0;
}

스페이스 바

와{ 사이 에는 빈 칸 이 포함 되 어야 합 니 다.예시:

.selector {
       
}

과 그 후의:사이 에는 빈 칸 이 포함 되 지 않 으 며,:과 사이 에는 빈 칸 이 포함 되 어야 한다.예시:

margin: 0;

한 줄 에 쓸 때,뒤에 빈 칸 을 따라 야 한다.예시:

font-family: Arial, sans-serif;

주석
주석 통일 용/* */(scss 에서 도 사용 하지 마 십시오//.들 여 쓰기 가 다음 줄 코드 와 일치 합 니 다.코드 줄 의 끝 에 있 을 때 코드 와 빈 칸 을 두 십시오.
예시:

/* header */
.header {
     
    ...
}

.header {
     
    /* 50px */
    width: 50px;
    color: red; /* color red */
}

선택 기

하나의 rule 이 여러 개의 selector 를 포함 할 때 모든 선택 기 는 한 줄 을 독점 해 야 합 니 다.예시:

/* good */
.post,
.page,
.comment {
       
    line-height: 1.5;
}

/* bad */
.post, .page, .comment {
       
    line-height: 1.5;
}

>,+,~선택 기의 양쪽 에 각각 빈 칸 을 보류한다.예시:

/* good */
main > nav {
       
    padding: 10px;
}

label + input {
       
    margin-left: 5px;
}

input:checked ~ button {
       
    background-color: #69C;
}

/* bad */
main>nav {
       
    padding: 10px;
}

label+input {
       
    margin-left: 5px;
}

input:checked~button {
       
    background-color: #69C;
}

속성 선택 기의 값 은 쌍 따옴표 로 둘러싸 야 합 니 다.예시:

/* good */
article[character="juliet"] {
       
    voice-family: "Vivien Leigh", victoria, female
}

/* bad */
article[character='juliet'] {
       
    voice-family: "Vivien Leigh", victoria, female
}

속성

속성 정 의 는 다른 줄 을 만들어 야 합 니 다.예시:

/* good */
.selector {
       
    margin: 0;
    padding: 0;
}

/* bad */
.selector {
        margin: 0; padding: 0; }

속성 정의 후 반드시 분점 으로 끝내 야 합 니 다.예시:

/* good */
.selector {
       
    margin: 0;
}

/* bad */
.selector {
       
    margin: 0
}

줄 임 말 을 사용 할 수 있 는 경우 속성 줄 임 말 을 사용 합 니 다.예시:

/* good */
.post {
       
    font: 12px/1.5 arial, sans-serif;
}

/* bad */
.post {
       
    font-family: arial, sans-serif;
    font-size: 12px;
    line-height: 1.5;
}

속성 쓰기 순서(제안)
관련 속성 성명 은 한 그룹 으로 분류 하고 아래 순서에 따라 배열 해 야 합 니 다.

Positioning-포 지 셔 닝 속성

박스 모델-박스 모델 속성

Typographic-레이아웃 속성

Visual-시각 속성

Misc-기타 속성

포 지 셔 닝(positioning)은 정상 적 인 문서 흐름 에서 요 소 를 제거 할 수 있 고 박스 모델(box model)과 관련 된 스타일 도 덮어 쓸 수 있 기 때문에 1 위 를 차지 합 니 다.
상자 모형 은 구성 요소 의 크기 와 위 치 를 결정 하기 때문에 두 번 째 에 랭크 되 어 있다.
다른 속성 은 구성 요소 의 내부(inside)에 만 영향 을 주거 나 앞의 두 그룹의 속성 에 영향 을 주지 않 기 때문에 뒤에 있 습 니 다.
전체 속성 목록 과 배열 순 서 는 Recess 를 참고 하 십시오.
예시:

.selector {
     
    /* Positioning */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    /* Box-model */
    display: block;
    float: right;
    width: 100px;
    height: 100px;
    /* Typography */
    font: normal 13px "Helvetica Neue", sans-serif;
    line-height: 1.5;
    color: #333;
    text-align: center;
    /* Visual */
    background-color: #f5f5f5;
    border: 1px solid #e5e5e5;
    border-radius: 3px;
    /* Misc */
    opacity: 1;
}

값 과 단위

속성 치가 0-1 사이 의 소수 일 때 정수 부분의0를 생략 합 니 다.예시:

/* good */
panel {
       
    opacity: .8
}

/* bad */
panel {
       
    opacity: 0.8
}

속성 치가0일 때 단 위 를 생략 해 야 한다.예시:

/* good */
body {
       
    padding: 0 5px;
}

/* bad */
body {
       
    padding: 0px 5px;
}

RGB 색상 값 은 16 진수 기호 형식#rrggbb을 사용 해 야 하 며,사용rgba()시 쉼표 마다 빈 칸 을 유지 해 야 합 니 다.예시:

/* good */
.success {
       
    box-shadow: 0 0 2px rgba(0, 128, 0, .3);
    border-color: #008000;
}

/* bad */
.success {
       
    box-shadow: 0 0 2px rgba(0,128,0,.3);
    border-color: rgb(0, 128, 0);
}

색상 값 을 줄 일 수 있 을 때 줄 임 말 형식 을 사용 해 야 합 니 다.예시:

/* good */
.success {
       
    background-color: #aca;
}

/* bad */
.success {
       
    background-color: #aaccaa;
}

색상 값 은 이름 색 값 을 사용 할 수 없습니다.예시:

/* good */
.success {
       
    color: #90ee90;
}

/* bad */
.success {
       
    color: lightgreen;
}

색상 값 의 영문 문 자 는 소문 자 를 사용 합 니 다.소문 자 를 쓰 지 않 아 도 같은 항목 에서 대소 문자 가 일치 하도록 보장 해 야 한다.예시:

/* good */
.success {
       
    background-color: #aca;
    color: #90ee90;
}

/* good */
.success {
       
    background-color: #ACA;
    color: #90EE90;
}

/* bad */
.success {
       
    background-color: #ACA;
    color: #90ee90;
}

클래스 이름
BEM 의 명명 규범 을 채택 하 다BEM는 각각 Block(블록),Element(요소),Modifier(수식 상태)를 나타 낸다.

Block 은 페이지 에 독립 적 으로 존재 하 는 블록 으로 서로 다른 상황 에서 재 활용 할 수 있 습 니 다.페이지 마다 여러 블록 으로 구 성 된 것 으로 볼 수 있 습 니 다.

Element 은 Block 을 구성 하 는 요소 로 해당 Block 내부 에서 만 의미 가 있 고 Block 에 의존 하 는 존재 입 니 다.

Modifier 는 Block 또는 Element 의 속성 이나 상 태 를 설명 합 니 다.같은 Block 이나 Element 에 여러 개의 Modifier 가 있 을 수 있 습 니 다.

선택 기 에서 다음 세 가지 기호 로 확 장 된 관 계 를 표시 합 니 다.-에서 선 긋 기:하이픈 으로 만 사용 되 며 특정한 블록,특정한 키 요소 나 상 태 를 나타 내 는 다 중 단어 간 의 연결 기호 입 니 다.__더 블 밑줄:더 블 밑줄 은 블록 과 블록 을 연결 하 는 서브 요 소 를 사용한다.--쌍 횡선:쌍 횡선 은 하나의 블록 이나 블록의 하위 원소 의 상 태 를 묘사 하 는 데 쓰 인 다.is-xxx:일종 의 업무 논 리 를 나타 낸다.type-block__element--modifier
구성 요소 간 의 완전한 결합 은 네 임 스페이스 를 오염 시 키 지 않 습 니 다.예 를 들 어.block-xxx ul li 의 쓰기 가 가 져 온 잠재 적 인 내장 위험 입 니 다.
BEM 이름 은 Class 클래스 이름 을 길 게 만 들 지만 압축 을 거 친 후 이 대역 폭 비용 은 무시 할 수 있 습 니 다.

/* normal */
.list-ranking {
     }

.list-ranking.select {
     }

.list-ranking .item {
     }

.list-ranking .item.active {
     }

/* BEM */
.list-ranking {
     } /* block */

.list-ranking--select {
     } /* block modifier*/

.list-ranking__item {
     } /* block element */

.list-ranking__item--large {
     } /* block element modifier*/

.list-ranking__item.is-active {
     } /*    */

"list-ranking list--select">
    "list-ranking__item list-ranking__item--large">
    "list-ranking__item is-active">
    "list-ranking__item">
    "list-ranking__item">
    "list-ranking__item">

.END
참고:구 글 HTML/CSS 규범 코드 규범

CSS 인 코딩 규범

좋은 웹페이지 즐겨찾기