총회


일반 규칙

코드 구성

  • 구성 요소 단위로 코드 세그먼트 구성
  • 일관적인 주석 사양 개발
  • 구성 요소 블록 및 하위 구성 요소 블록 및 선언 블록< /code> 코드>는 빈 줄 1개로 구분되고, 하위 구성 요소 블록은 빈 줄 3개로 구분됩니다. 组件块和子组件块以及声明块之间使用一空行分隔，子组件块之间三空行分隔；
  • 如果使用了多个 CSS 文件，将其按照组件而非页面的形式分拆，因为页面会被重组，而组件只会被移动；

良好的注释是非常重要的。请留出时间来描述组件（component）的工作方式、局限性和构建它们的方法。不要让你的团队其它成员 来猜测一段不通用或不明显的代码的目的。

提示：通过配置编辑器，可以提供快捷键来输出一致认可的注释模式。

/* ==========================================================================
   组件块
 ============================================================================ */

/* 子组件块
 ============================================================================ */
.selector {
  padding: 15px;
  margin-bottom: 15px;
}

/* 子组件块
 ============================================================================ */
.selector-secondary {
  display: block; /* 注释*/
}

.selector-three {
  display: span;
}

Class 和 ID

  • 使用语义化、通用的命名方式；
  • 使用连字符 - 作为 ID、Class 名称界定符，不要驼峰命名法和下划线；
  • 避免选择器嵌套层级过多，尽量少于 3 级；
  • 避免选择器和 Class、ID 叠加使用；

出于性能考量，在没有必要的情况下避免元素选择器叠加 Class、ID 使用。

元素选择器和 ID、Class 混合使用也违反关注分离原则。如果HTML标签修改了，就要再去修改 CSS 代码，不利于后期维护。

/* Not recommended */
.red {}
.box_green {}
.page .header .login #username input {}
ul#example {}

/* Recommended */
#nav {}
.box-video {}
#username input {}
#example {}

声明块格式

  • 选择器分组时，保持独立的选择器占用一行；
  • 声明块的左括号 { 前添加一个空格；
  • 声明块的右括号 } 应单独成行；
  • 声明语句中的 : 后应添加一个空格；
  • 声明语句应以分号 ; 结尾；
  • 一般以逗号分隔的属性值，每个逗号后应添加一个空格；
  • rgb()、rgba()、hsl()、hsla() 或 rect() 括号内的值，逗号分隔，但逗号后不添加一个空格；
  • 对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如，.5 代替 0.5；-.5px 代替-0.5px）；
  • 十六进制值应该全部小写和尽量简写，例如，#fff 代替 #ffffff；
  • 避免为 0 值指定单位，例如，用 margin: 0; 代替 margin: 0px;
    • 여러 CSS 파일이 사용하면 페이지가 아닌 구성요소로 분할됩니다. 페이지가 재구성되고 구성요소만 이동되기 때문입니다.

좋은 댓글은 매우 중요합니다. 구성 요소의 작동 방식, 제한 사항 및 구성 방법을 설명하는 시간을 가지십시오. 일반적이거나 명확하지 않은 코드 조각의 목적을 추측하는 것을 팀의 다른 구성원에게 맡기지 마십시오.

팁: 편집기를 구성하면 합의된 댓글 패턴을 출력하기 위한 단축키를 제공할 수 있습니다. 

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

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

클래스 및 ID

의미 있고 보편적인 이름 지정을 사용하세요.

하이픈을 사용하세요. ID 및 클래스 이름 구분 기호로 낙타 대문자 이름 지정과 밑줄을 사용하지 마세요.

🎜선택자의 중첩 수준을 낮추세요. 🎜🎜클래스 및 ID와 선택기를 중복 사용하지 마세요. 🎜🎜🎜성능 고려 사항, 불필요한 경우 클래스 및 ID에 겹쳐진 요소 선택기를 사용하지 마세요. 🎜🎜요소 선택자, ID, 클래스를 혼합하여 사용하는 것도 관심사 분리 원칙에 위배됩니다. HTML 태그를 수정하면 CSS 코드를 다시 수정해야 하므로 나중에 유지 관리하는 데 도움이 되지 않습니다. 🎜
.declaration-order {
  /* Positioning */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;

  /* Box model */
  display: block;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
  margin: 10px;
  float: right;
  overflow: hidden;

  /* Typographic */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  text-align: center;

  /* Visual */
  background-color: #f5f5f5;
  color: #fff;
  opacity: .8;

  /* Other */
  cursor: pointer;
}
🎜선언 블록 형식🎜🎜🎜선택자를 그룹화할 때 독립 선택자가 한 줄을 차지하도록 유지하세요. 🎜🎜선언 블록 { 앞에 공백을 추가하세요. 🎜🎜선언의 오른쪽 괄호; 블록 < code>}는 별도의 줄에 있어야 합니다. 🎜🎜선언문에서 : 뒤에 공백을 추가해야 합니다. 🎜🎜선언문은 세미콜론 으로 끝나야 합니다. ;; 🎜 🎜일반적으로 쉼표로 구분된 속성 값의 경우 각 쉼표 뒤에 공백을 추가해야 합니다. 🎜🎜rgb(), rgba(), hsl(), hsla() 또는 direct() 괄호 안의 값, 쉼표로 구분, 공백을 추가하지 않음 🎜🎜속성 값 또는 색상 매개변수의 경우 1보다 작은 소수점 앞의 0을 생략합니다(예: 0.5 대신 .5; -0.5px 대신 -.5px ) 🎜🎜Hex 값은 모두 소문자여야 하며 최대한 축약되어야 합니다(예: #fff). #ffffff; 대신 🎜🎜0 값에 단위를 지정하지 마세요. 예를 들어 margin: 0px; 대신 margin: 0;을 사용하세요. 🎜🎜
/* Not recommended */
@import url(//www.google.com/css/maia.css);

html {
  font-family: 'open sans', arial, sans-serif;
}

/* Recommended */
@import url("//www.google.com/css/maia.css");

html {
  font-family: "open sans", arial, sans-serif;
}

.selector[type="text"] {

}
🎜선언 순서🎜🎜관련 속성은 그룹이어야 하며 권장 스타일 작성 순서🎜🎜1.Positioning🎜 🎜2.Box model🎜🎜3.Typographic🎜🎜4.Visual🎜

위치 지정이 일반 문서 흐름에서 요소를 제거하고 상자 모델 관련 스타일을 재정의할 수도 있기 때문에 이것이 첫 번째 순위입니다. 박스 모델은 구성 요소의 크기와 위치를 결정하므로 두 번째입니다.

다른 속성은 구성 요소 내부에만 영향을 미치거나 속성의 처음 두 그룹에는 영향을 주지 않으므로 순위가 뒤쳐집니다. 

.element { ... }
.element-avatar { ... }
.element-selected { ... }
@media (max-width: 768px) {
  .element { ...}
  .element-avatar { ... }
  .element-selected { ... }
}

따옴표, 속성 선택자, 큰따옴표를 사용하는 속성 값에는

url()을 사용하세요. url() 값을 인용하는 것이 정말 필요합니까? ?url() 、属性选择符、属性值使用双引号。 参考 Is quoting the value of url() really necessary?

rrreee

媒体查询（Media query）的位置

将媒体查询放在尽可能相关规则的附近。不要将他们打包放在一个单一样式文件中或者放在文档底部。如果你把他们分开了，将来只会被大家遗忘。

rrreee

不要使用 @import

与 <link> 相比，@import 要慢很多，不光增加额外的请求数，还会导致不可预料的问题。

替代办法：

  • 使用多个 元素；
  • 通过 Sass 或 Less 类似的 CSS 预处理器将多个 CSS 文件编译为一个文件；
  • 其他 CSS 文件合并工具；

参考 don’t use @import；

链接的样式顺序：

a:link -> a:visited -> a:hover -> a:active（LoVeHAte）

rrreee

미디어 쿼리의 위치

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

rrreee

@import를 사용하지 마세요

<link>와 비교, @import 속도가 훨씬 느려지고 추가 요청이 늘어날 뿐만 아니라 예측할 수 없는 문제도 발생합니다.

대안:
  • 여러 요소 사용
  • Sass 또는 Less와 같은 CSS 전처리기를 통해 여러 CSS 파일을 하나의 파일로 컴파일합니다.
  • 기타 CSS 파일 병합 도구 ;
참조에서는 @import를 사용하지 마세요.


스타일 링크 순서:

🎜a:link -> a:visited -> active (LoVeHAte)🎜🎜브라우저 공급업체 접두사를 추가할 필요가 없습니다🎜🎜🎜Autoprefixer🎜를 사용하여 브라우저 공급업체 접두사를 자동으로 추가하세요. CSS를 작성할 때 브라우저 접두사를 추가할 필요가 없으며 표준 CSS를 직접 사용하세요. 🎜🎜Autoprefixer는 🎜Can I use🎜를 통해 호환성 요구 사항에 따라 해당 CSS 코드에 브라우저 공급업체 접두사를 추가합니다. 🎜🎜🎜🎜🎜🎜
→