CSS 코딩 표준 부트 스트랩

문법

두 개의 공백 대신 탭 (탭)으로 -이 모든 환경에서 보여주기 위해 일관된 접근을 보장하는 유일한 방법입니다.
선택기는 라인 선택기에 별도로 그룹화됩니다.
코드의 가독성을 위해, 블록의 앞에 각 문장의 괄호는 공간을 추가 할 수 있습니다.
중괄호 블록 문은 혼자 여행을해야합니다.
각 문은 문이다 : 공백을 삽입해야 후.
보다 정확한 오류보고를 얻기 위해, 각 명령은 별도의 라인이어야한다.
모든 선언 문은 세미콜론 (;)으로 끝나야합니다. 마지막 선언 문 뒤에 세미콜론은 선택 사항입니다,하지만 당신은 세미콜론을 생략하면, 당신의 코드가 더 잘못 될 수 있습니다.
쉼표로 구분 된 속성 값의 경우, 각 쉼표 (예를 들어, 공간에 삽입해야합니다 box-shadow ).
하지 마십시오 rgb() , rgba() , hsl() , hsla() 또는 rect() 공백을 삽입 쉼표 내부 값 뒤에 있습니다. 복수의 속성 값 (또한 콤마 공간 모두)에서 이러한 이점은 컬러 값 (단지 콤마, 공백)의 복수의 구별한다.
(예를 들어, 색 속성 값 또는 파라미터 십진수 0 앞의 1 이하 생략 .5 대신 0.5 ; -.5px 대체 -0.5px ).
진수 값은 예를 들어 모두 소문자,해야 #fff . 문서를 스캔 할 때 자신의 형태를보다 쉽게 구별 할 수 있기 때문에, 소문자 쉽게 구별 할 수 있습니다.
더불어, 예를 들어, 16 진수 값의 약칭을 사용하려고 #fff 대신 #ffffff .
예를 들어, 속성의 선택에 큰 따옴표 추가 input[type="text"] . 특정 상황에서는 선택 사항입니다 따옴표로 일관성 코드의 제안에 대해, 그러나.
지정된 값 0 단위는, 예를 들어 피하는 margin: 0; 대신 margin: 0px; .

용어에 대한 질문이 여기에 사용? 에 위키 백과를 참조하십시오 캐스 케이 딩 스타일 시트 - 문법을 .

/* Bad CSS */
.selector, .selector-secondary, .selector[type=text] {
  padding:15px;
  margin:0px 0px 15px;
  background-color:rgba(0, 0, 0, 0.5);
  box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF
}

/* Good CSS */
.selector,
.selector-secondary,
.selector[type="text"] {
  padding: 15px;
  margin-bottom: 15px;
  background-color: rgba(0,0,0,.5);
  box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}

선언 순서

부동산 관련 구문은 다음 순서로 그룹화 및 배치되어야한다 :

위치
박스 모델
인쇄상의
비주얼

일반 문서 흐름 요소를 제거하고, 또한, 스타일에 관한 상자 모델 (박스 모델)을 덮는 첫 번째 행의 수 있으므로, 위치 (위치)로서. 2 위 상자 모델은 그 크기와 구성 요소의 위치를 결정하기 때문이다.

다른 속성 때문에 뒤에 만 내부 구성 요소 (내부) 또는 처음 두 그룹 속성에 영향을주지 않습니다 영향을 미칩니다.

전체 속성 목록과 순서를 참조 쉬는 시간 .

.declaration-order {
  /* 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;
}

사용하지 마십시오 `@import`

그리고 <link> 비교 태그, @import 훨씬 느린뿐만 아니라 추가 요청의 수를 증가뿐만 아니라, 예기치 않은 문제가 발생할 명령. 몇 가지 대안이 있습니다 :

다중를 사용하여 <link> 요소
말대꾸 또는 CSS 전처리 여러 CSS 파일 등 이하 하나의 파일로 컴파일
레일으로 지킬 또는 다른 시스템은 CSS 파일 병합 기능을 구비

를 참조하십시오 스티브 Souders 기사 더 많은 지식을 배울 수 있습니다.

<!-- Use link elements -->
<link rel="stylesheet" href="core.css">

<!-- Avoid @imports -->
<style>
  @import url("more.css");
</style>

미디어 쿼리 (미디어 쿼리) 위치

미디어 쿼리는 관련 규정에 가깝게 배치. 하나의 스타일 파일에 팩을하거나 문서의 하단에하지 마십시오. 당신이 그들을 떨어져 가지고가는 경우에, 미래 모두에서 잊혀 질 것입니다. 여기에 전형적인 예입니다.

.element { ... }
.element-avatar { ... }
.element-selected { ... }

@media (min-width: 480px) {
  .element { ...}
  .element-avatar { ... }
  .element-selected { ... }
}

속성의 접두사

각 속성의 값이 수직 방향으로 정렬되어 있도록 압입, 접두사 벤더 고유의 속성을 사용하는 경우, 다중 라인 편집이 용이하다.

TextMate를에서 편집 → 선택 (각 라인 텍스트를 사용하여 ^ ⌘A을). 숭고한 텍스트 2에서, 선택 →이 (^ ⇧ ↑ 이전 라인을 추가 사용 ) 및 선택 → 다음 라인 (^ ⇧ ↓ 추가 ).

/* Prefixed properties */
.selector {
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
          box-shadow: 0 1px 2px rgba(0,0,0,.15);
}

한 줄 규칙 선언

가독성 빠른 편집을 용이하게하기 위해, 단지 설명을 포함 스타일을 위해, 우리는 같은 행의 문 바랍니다. 선언 또는 문 스타일의 번호를 여러 줄로 나눌 수 있습니다.

예를 들어, CSS 유효성 검사기가 183 라인에 구문 오류가 있음을 지적 -이 일의 핵심 요소는 오류를 감지하는 것입니다. 이 한 줄 하나의 문이있는 경우,이 오류를 무시하지 않습니다, 그것은 한 줄의 문장보다 더 많은 경우에, 당신은주의 깊게 누락 방지하기 위해 실수를 분석해야합니다.

/* Single declarations on one line */
.span1 { width: 60px; }
.span2 { width: 140px; }
.span3 { width: 220px; }

/* Multiple declarations, one per line */
.sprite {
  display: inline-block;
  width: 16px;
  height: 15px;
  background-image: url(../img/sprite.png);
}
.icon           { background-position: 0 0; }
.icon-home      { background-position: 0 -20px; }
.icon-account   { background-position: 0 -40px; }

약식 속성 선언

명시 적으로 모든 경우의 값을 설정할 필요에서는 약식 속성 선언의 사용을 제한하려고한다. 다음과 같은 상황 일반적으로 학대 약식 속성 선언 :

padding
margin
font
background
border
border-radius

대부분의 경우, 우리는 속성 선언 약자로 모든 값을 지정할 필요가 없습니다. 단지 필요한 경우 피복, 예를 들면, HTML 만 세트 상하 마진 소자 호 (마진)의 값은, 따라서,이 두 값이 될 수있다. 속성 선언의 약식 과도한 사용은 혼란 코드, 속성 값으로 이어질 수 있으며, 예기치 않은 부작용을 일으키는 불필요한 중복을 가져올 것입니다.

MDN에 대한 아주 좋은 생각에 (모질라 개발자 네트워크) 약식 속성 덜 익숙한 약식 속성 선언 및 사용자 행동에 대한 기사가 유용합니다.

/* Bad example */
.element {
  margin: 0 0 10px;
  background: red;
  background: url("image.jpg");
  border-radius: 3px 3px 0 0;
}

/* Good example */
.element {
  margin-bottom: 10px;
  background-color: red;
  background-image: url("image.jpg");
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

이하 말대꾸 중첩

불필요한 중첩을 피하십시오. 당신이 둥지를 사용할 수 있지만, 그건 당신이 중첩 사용한다는 의미는하지 않지만 때문이다. 만 스타일로 당신은 부모 요소 (즉, 하위 선택) 내에서 제한해야하며, 중첩하여 중첩 된 복수의 요소는 존재해야합니다.

// Without nesting
.table > thead > tr > th { … }
.table > thead > tr > td { … }

// With nesting
.table > thead > tr {
  > th { … }
  > td { … }
}

주의

코드 작성 및 사람들에 의해 유지된다. 코드가 잘 주석과 다른 사람을 이해하기 쉬운 자체 설명이 될 수 있는지 확인하십시오. 좋은 코드 주석 코드의 상황과 목적을 전달할 수 있습니다. 단순히 구성 요소 또는 클래스 이름을 반복하지 마십시오.

일반적인 의견, 간단한 문구를 작성 할 수 있습니다 더 이상 의견을 완전한 문장을 작성해야합니다.

/* Bad example */
/* Modal header */
.modal-header {
  ...
}

/* Good example */
/* Wrapping element for .modal-title and .modal-close */
.modal-header {
  ...
}

클래스 이름

클래스 이름은 소문자 및 대시 (dashe) (안 밑줄,도 고비 명칭)를 표시 할 수 있습니다. 대시 (예, 대한 (네임 스페이스와 같은)라는 이름의 해당 클래스에 사용되어야 .btn 및 .btn-danger ).
과도한 임의의 속기을 피하십시오. .btn 대표는 버튼 만 .s 어떤 의미를 표현하지.
클래스 이름은 짧고 명확한 의미해야한다.
의미있는 이름을 사용합니다. 이름의 조직 또는 목적 사용, 표현 (표상) 이름을 사용하지 마십시오.
새로운 클래스의 접두사로 가장 가까운 상위 클래스 또는 기본 (기본) 클래스 기준으로합니다.
사용 .js-* 클래스 (스타일 대조적으로) 동작을 식별하고, CSS 파일이 클래스에 포함되지 않는다.

말대꾸 변수 명명에 대한 이하는 위에 나열된 모든 사양을 읽습니다.

/* Bad example */
.t { ... }
.red { ... }
.header { ... }

/* Good example */
.tweet { ... }
.important { ... }
.tweet-header { ... }

선택자

공통 요소 클래스를 사용하는 경우, 그래서 도움이 렌더링 성능을 최적화 할 수 있습니다.
구성 요소들은 (예를 들어, 속성 선택기를 사용하지 않도록를 들어 [class^="..."] ). 브라우저 성능은 이러한 요인에 의해 영향을받을 것이다.
가능한 한 짧게하고, 셀렉터 소자의 수를 제한하려고 선택기, 3을 초과하지 않을 것을 권장한다.
부모 요소의 마지막 클래스 (즉, 하위 선택)으로 제한 할 필요가있는 경우에만 (예를 들어, 접두사로 클래스를 사용하지 않는 - 네임 스페이스 접두사가 유사하다).

추가 읽기 :

/* Bad example */
span { ... }
.page-container #stream .stream-item .tweet .tweet-header .username { ... }
.avatar { ... }

/* Good example */
.avatar { ... }
.tweet-header .username { ... }
.tweet .avatar { ... }

코드 조직

구성 요소 단위 조직 코드입니다.
일관된 특수 사양의 개발.
큰 문서를 스캔, 그래서 도움이 코드 블록으로 분리 일관된 공백을 사용하십시오.
만약 페이지가 재구성되고, 조립체가 이동되기 때문에 분사 조립체보다는 페이지의 형태로 하나 이상의 CSS 파일.

/*
 * Component section heading
 */

.element { ... }


/*
 * Component section heading
 *
 * Sometimes you need to include optional context for the entire component. Do that up here if it's important enough.
 */

.element { ... }

/* Contextual sub-component or modifer */
.element-heading { ... }

구성 편집기

다음과 같은 구성 설정에 따라 귀하의 편집기는 공통 코드 불일치와 차이를 피하기 위해 :

두 공간 대신 탭 (공백 탭 문자를 대표 소프트 탭).
당신은 파일을 저장할 때 후행 공백을 제거합니다.
UTF-8로 파일 인코딩을 설정합니다.
파일의 끝에 빈 줄을 추가합니다.

문서를 참조하고 프로젝트에 구성 정보 추가 .editorconfig 파일. 예를 들어 부트 스트랩에 .editorconfig 인스턴스 . 자세한 내용을 참조하시기 바랍니다 [정보 EditorConfig .

이전 : HTML 코딩 규칙 부트 스트랩

Bootstrap 코스

Bootstrap CSS

Bootstrap 레이아웃 구성 요소

Bootstrap 위젯

Bootstrap 다른

CSS 코딩 표준 부트 스트랩

문법

선언 순서

사용하지 마십시오 `@import`

미디어 쿼리 (미디어 쿼리) 위치

속성의 접두사

한 줄 규칙 선언

약식 속성 선언

이하 말대꾸 중첩

주의

클래스 이름

선택자

코드 조직

구성 편집기

Bootstrap 코스

Bootstrap CSS

Bootstrap 레이아웃 구성 요소

Bootstrap 위젯

Bootstrap 다른

CSS 코딩 표준 부트 스트랩

문법

선언 순서

사용하지 마십시오 @import

미디어 쿼리 (미디어 쿼리) 위치

속성의 접두사

한 줄 규칙 선언

약식 속성 선언

이하 말대꾸 중첩

주의

클래스 이름

선택자

코드 조직

구성 편집기

사용하지 마십시오 `@import`