부트스트랩 CSS 코딩 사양

Syntax

• 탭 대신 공백 두 개를 사용하세요. 이것이 모든 환경에서 일관된 표시를 보장하는 유일한 방법입니다.

• 선택기를 그룹화할 때 개별 선택기를 해당 줄에 배치하세요.

• 코드 가독성을 위해 각 선언 블록의 여는 중괄호 앞에 공백을 추가하세요.

• 선언 블록의 닫는 중괄호는 별도의 줄에 있어야 합니다.

• 각 선언문 : 뒤에 공백을 삽입해야 합니다. : 后应该插入一个空格。

• 为了获得更准确的错误报告，每条声明都应该独占一行。

• 所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的，但是，如果省略这个分号，你的代码可能更易出错。

• 对于以逗号分隔的属性值，每个逗号后面都应该插入一个空格（例如，box-shadow）。

• 不要在 rgb()、rgba()、hsl()、hsla() 或 rect() 值的内部的逗号后面插入空格。这样利于从多个属性值（既加逗号也加空格）中区分多个颜色值（只加逗号，不加空格）。

• 对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如，.5 代替 0.5；-.5px 代替 -0.5px）。

• 十六进制值应该全部小写，例如，#fff。在扫描文档时，小写字符易于分辨，因为他们的形式更易于区分。

• 尽量使用简写形式的十六进制值，例如，用 #fff 代替 #ffffff。

• 为选择器中的属性添加双引号，例如，input[type="text"]。只有在某些情况下是可选的，但是，为了代码的一致性，建议都加上双引号。

• 避免为 0 值指定单位，例如，用 margin: 0; 代替 margin: 0px;

더 정확한 오류 보고를 위해 각 문은 한 줄에 있어야 합니다.

🎜🎜 축약된 16진수 값을 사용해 보세요. 예를 들어 #ffffff 대신 #fff를 사용하세요. 🎜🎜🎜🎜선택기의 속성에 큰따옴표를 추가하세요(예: input[type="text"]). 일부 경우에만 선택 사항이지만 코드 일관성을 위해 큰따옴표를 사용하는 것이 좋습니다. 🎜🎜🎜🎜0 값에 단위를 지정하지 마세요. 예를 들어 margin: 0px; 대신 margin: 0;을 사용하세요. 🎜🎜🎜🎜여기에 사용된 용어에 대해 질문이 있나요? Wikipedia의 Cascading Style Sheets - Syntax를 참조하세요. 🎜🎜🎜/* 잘못된 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🎜}🎜🎜/* 좋은 CSS */🎜.selector,🎜.selector-secondary,🎜.selector[type="text" ] {🎜 패딩: 15px;🎜 여백 하단: 15px;🎜 배경색: rgba(0,0,0,.5);🎜 상자 그림자: 0 1px 2px #ccc, 삽입 0 1px 0 #fff;🎜 }🎜🎜

선언 순서

관련 속성 선언은 함께 그룹화하고 다음 순서로 정렬해야 합니다.

포지셔닝으로 인해( 포지셔닝) 일반 문서 흐름에서 요소를 제거하고 상자 모델 관련 스타일을 재정의할 수 있으므로 먼저 표시됩니다. 상자 모델은 구성 요소의 크기와 배치를 결정하므로 두 번째입니다.

1. 다른 속성은

   구성 요소 내부

   에만 영향을 미치거나 속성의 처음 두 그룹에는 영향을 주지 않으므로 순위가 뒤쳐집니다.
2. 전체 속성 목록과 해당 순서를 보려면 쉬는 시간을 참조하세요.

.declaration-order {
3. /* 위치 지정 */

   위치: 절대;

   위쪽: 0;
오른쪽: 0;
4. 아래쪽: 0;

   왼쪽: 0;

   z-index: 100;

/* 박스 모델 */

디스플레이: 블록;

부동: 오른쪽;

너비: 100px; 높이: 100px;

/* 타이포그래피 */

글꼴: 일반 13px "Helvetica Neue", sans-serif;

line-height : 1.5;

@import

与 <link> 标签相比，@import 指令要慢很多，不光增加了额外的请求次数，还会导致不可预料的问题。替代办法有以下几种：

• 使用多个 <link><!-- 링크 요소 사용 -->

  <link rel="stylesheet" href="core.css">
• <!-- @imports 방지 -->

  < 스타일>

  @import url("../style/css/more.css");
</style>

• 미디어 쿼리의 위치

  미디어 쿼리를 관련 규칙에 최대한 가깝게 배치하세요. 단일 스타일 파일로 패키지하거나 문서 하단에 배치하지 마세요. 분리하면 앞으로 모두에게 잊혀질 뿐입니다. 전형적인 예가 아래에 나와 있습니다.

  .element { ... }
  .element-avatar { ... }
  .element-selected { ... }
  
  @media (최소 너비: 480px) {
  .element { ...}
  .element-avatar { ... }
  .element-selected { ... }
  }

  Prefixed 속성

  특정 공급업체의 접두사가 붙은 속성을 사용할 때 들여쓰기를 사용하세요. 각 속성의 값은 수직으로 정렬됩니다. 여러 줄 편집을 용이하게 합니다.

  Textmate에서 텍스트 → 선택 항목의 각 줄 편집(⌃⌘A)을 사용하세요. Sublime Text 2에서는 선택 → 이전 줄 추가(⌃⇧↑) 및 선택 → 다음 줄 추가(⌃⇧↓)를 사용합니다.

  /* 접두사 속성 */
  .selector {
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
  box-shadow: 0 1px 2px rgba(0,0, 0,.15);
  }

  한 줄 규칙 선언

  선언이 하나만 포함된 스타일의 경우 가독성과 빠른 편집을 위해 문을 같은 줄에 배치하는 것이 좋습니다. 여러 선언이 포함된 스타일의 경우 선언은 여러 줄로 나누어져야 합니다.

  이 작업의 핵심 요소는 오류 감지를 위한 것입니다. 예를 들어 CSS 유효성 검사기는 183행에 구문 오류가 있음을 나타냅니다. 한 줄에 하나의 명령문이라면 오류를 무시하지 않을 것이며, 한 줄에 여러 명령문이라면 오류를 놓치지 않도록 주의 깊게 분석해야 합니다.

  /* 한 줄에 단일 선언 */
  .span1 { width: 140px; }
  .span3 { width: 220px }
  
  /* 여러 선언 , 한 줄에 하나씩 * /
  .sprite {
  디스플레이: 인라인 블록;
  너비: 16px;
  높이: 15px;
  배경 이미지: url(../style/images/sprite.png);
  }
  .icon { 배경 위치 : 0 0; }
  .icon-home { 배경 위치: 0 -20px }
  .icon-account { 배경 위치: 0 -40px }
  

  축약된 속성 선언

  모든 값을 명시적으로 설정해야 하는 경우에는 축약된 속성 선언의 사용을 최대한 제한해야 합니다. 축약된 속성 선언의 일반적인 남용은 다음과 같습니다.

  • paddingpadding

  • margin

  • font

  • background

  • border

  • border-radius

  margin

  font

  
  
  배경



border



border-radius
  
  
  
  대부분의 경우 속성 선언을 축약할 필요가 없습니다. 모든 값을 지정합니다. 예를 들어 HTML 제목 요소는 위쪽 및 아래쪽 여백 값만 설정하면 되므로 필요한 경우에만 이 두 값을 재정의하면 됩니다. 단축 속성 선언을 과도하게 사용하면 코드가 복잡해질 수 있으며 속성 값이 불필요하게 재정의되어 의도하지 않은 부작용이 발생할 수 있습니다.
  

  MDN(Mozilla 개발자 네트워크)에는 속기 속성에 대한 매우 유용한 기사가 있는데, 이는 속기 속성 선언과 그 동작에 익숙하지 않은 사용자에게 매우 유용합니다.

  /* 나쁜 예 */

  .element {

  margin: 0 0 10px;

  background: red;

  background: url("../style/images/image.jpg");
  border-radius: 3px 3px 0 0;
  }
  
  /* 좋은 예 */
  .element {
  margin-bottom: 10px;
  background-color: red;
  background-image: url("../style/images/image.jpg ");

  border-top-left-radius: 3px;

  border-top-right-radius: 3px;🎜}🎜🎜🎜Sass에서 덜 중첩되고🎜🎜불필요한 중첩을 피하세요. 중첩을 사용할 수는 있지만 반드시 사용해야 한다는 의미는 아니기 때문입니다. 스타일을 상위 요소(예: 하위 선택기)로 제한해야 하고 중첩해야 하는 요소가 여러 개 있는 경우에만 중첩을 사용하세요. 🎜🎜🎜//중첩 없음🎜.table > tr > th { … }🎜.table > tr > td { … }🎜🎜// 중첩🎜.table > ; tr {🎜  > 일 { … }🎜 > td { … }🎜}🎜🎜

  COMMENTS

  코드는 사람이 작성하고 유지 관리합니다. 코드가 자기 설명적이고, 주석이 잘 되어 있고, 다른 사람이 쉽게 이해할 수 있도록 하세요. 좋은 코드 주석은 코드의 맥락과 목적을 전달합니다. 단순히 구성요소나 클래스 이름을 다시 언급하지 마십시오.

  긴 댓글의 경우 완전한 문장을 작성하세요. 일반적인 댓글의 경우 간결한 문구를 작성할 수 있습니다.

  /* 나쁜 예 */
  /* 모달 헤더 */
  .modal-header {
  ...
  }
  
  /* 좋은 예 */
  /* .modal-title 및 .modal-에 대한 래핑 요소 close */
  .modal-header {
  ...
  }

  class naming

  • class 이름에는 소문자 및 대시(대시)만 사용할 수 있습니다(밑줄이나 낙타 문자는 사용할 수 없음). 대시는 관련 클래스의 이름을 지정하는 데 사용되어야 합니다(네임스페이스와 유사)(예: .btn 및 .btn-danger). .btn 和 .btn-danger）。

  • 避免过度任意的简写。.btn 代表 button，但是 .s 不能表达任何意思。

  • class 名称应当尽可能短，并且意义明确。

  • 使用有意义的名称。使用有组织的或目的明确的名称，不要使用表现形式（presentational）的名称。

  • 基于最近的父 class 或基本（base） class 作为新 class 的前缀。

  • 使用 .js-*

  지나치게 임의적인 약어를 사용하지 마세요. .btn은 버튼을 나타내지만 .s는 어떤 의미도 표현할 수 없습니다.

  클래스 이름은 최대한 짧아야 하며 의미가 명확해야 합니다.
  
  
  
  의미 있는 이름을 사용하세요. 표현적인 이름보다는 체계적이거나 목적이 있는 이름을 사용하십시오.
  
  
  
  가장 가까운 상위 클래스 또는 기본 클래스를 기반으로 새 클래스의 접두사를 붙입니다.

  🎜🎜.js-* 클래스를 사용하여 동작(스타일과 반대)을 식별하고 이러한 클래스를 CSS 파일에 포함하지 마세요. 🎜🎜🎜🎜Sass 및 Less 변수 이름 지정 시 위에 나열된 사양을 참고할 수도 있습니다. 🎜🎜🎜/* 나쁜 예 */🎜.t { ... }🎜.red { ... }🎜.header { ... }🎜🎜/* 좋은 예 */🎜.tweet { ... }🎜 .important { ... }🎜.tweet-header { ... }🎜🎜

  Selector

  • 공통 요소에 클래스를 사용하면 렌더링 성능을 최적화하는 데 도움이 됩니다.

  • 자주 발생하는 구성요소의 경우 속성 선택기(예: [class^="..."])를 사용하지 마세요. 브라우저 성능은 이러한 요소의 영향을 받을 수 있습니다. [class^="..."]）。浏览器的性能会受到这些因素的影响。

  • 选择器要尽可能短，并且尽量限制组成选择器的元素个数，建议不要超过 3 。

  • 只有在必要的时候才将 class 限制在最近的父元素内（也就是后代选择器）（例如，不使用带前缀的 class 时 -- 前缀类似于命名空间）。

  扩展阅读：

  • Scope CSS classes with prefixes

  • Stop the cascade

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

  编辑器配置

  将你的编辑器按照下面的配置进行设置，以避免常见的代码不一致和差异：

  • 用两个空格代替制表符（soft-tab 即用空格代表 tab 符）。

  • 保存文件时，删除尾部的空白符。

  • 设置文件编码为 UTF-8。

  • 在文件结尾添加一个空白行。

  参照文档并将这些配置信息添加到项目的 .editorconfig

  
  선택자는 최대한 짧아야 하며, 선택자를 구성하는 요소 수는 3개를 초과하지 않는 것이 좋습니다.

  🎜🎜🎜만 필요한 경우 클래스를 가장 가까운 상위 요소(즉, 하위 선택기)로 제한합니다(예: 접두사가 붙은 클래스를 사용하지 않는 경우 - 접두사는 네임스페이스와 유사합니다) ). 🎜🎜

🎜더 읽어보기: 🎜🎜🎜🎜접두사가 있는 CSS 클래스 범위 지정🎜🎜🎜🎜계단식 중단🎜🎜

/* 나쁜 예 */ 🎜span { ... }🎜.page-container #stream .stream-item .tweet .tweet-header .username { ... }🎜.avatar { ... }🎜🎜/* 좋은 예 */🎜.avatar { ... }🎜.tweet-header .username { ... }🎜.tweet .avatar { ... }

🎜코드 구성🎜🎜🎜🎜코드 세그먼트를 구성 요소 단위로 구성합니다. 🎜🎜🎜🎜일관적인 주석 사양을 개발하세요. 🎜🎜🎜🎜 일관된 공백을 사용하여 코드를 덩어리로 분리하면 더 큰 문서를 더 쉽게 스캔할 수 있습니다. 🎜🎜🎜🎜여러 CSS 파일을 사용하는 경우 페이지가 재구성되고 구성 요소는 이동만 되므로 페이지가 아닌 구성 요소로 분할하세요. 🎜🎜

/*🎜 * 컴포넌트 섹션 제목🎜 */🎜🎜.element { ... }🎜🎜🎜/*🎜 * 컴포넌트 섹션 제목🎜 *🎜 * 때로는 전체 구성 요소에 대한 선택적 컨텍스트를 포함해야 합니다. 충분히 중요하다면 여기에서 수행하세요.🎜 */🎜🎜.element { ... }🎜🎜/* 컨텍스트 하위 구성 요소 또는 수정자 */🎜.element- 제목 { ... }

🎜Editor Configuration🎜🎜일반적인 코드 불일치 및 차이점을 방지하려면 다음과 같이 편집기를 설정하십시오.🎜🎜🎜🎜공백 두 개로 바꾸기 탭 문자(소프트 탭은 공백 사용을 의미) 탭 문자를 나타냅니다). 🎜🎜🎜🎜파일 저장 시 뒤에 나오는 공백 문자를 삭제하세요. 🎜🎜🎜🎜파일 인코딩을 UTF-8로 설정하세요. 🎜🎜🎜🎜파일 끝에 빈 줄을 추가하세요. 🎜🎜🎜문서를 참조하여 이러한 구성 정보를 프로젝트의 .editorconfig 파일에 추가하세요. 예: Bootstrap의 .editorconfig 인스턴스. 자세한 내용은 EditorConfig를 참조하세요. 🎜🎜🎜🎜