프론트엔드 가이드 라인 (Frontend-guidelines) - CSS 편

CSS

세미콜론(Semicolons)

세미콜론은 기술적으로 CSS의 구분 기호로 항상 마지막에 처리한다.

/ * bad * /
 div {
   color : red 
} / * good * / div {
   color : red ; 
}

박스모델(Box model)

Box model은 전체 문서에 대해 이상적으로 동일해야합니다. 전역 * { box-sizing: border-box; }은 괜찮지만 특정 요소에 대한 기본 상자 모델을 변경하면 안된다.

/* bad */
div {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}

/* good */
div {
  padding: 10px;
}

흐름(Flow)

element의 기본 동작을 변경하면 X.  

가능한 한 자연스러운 문서 흐름의 요소를 유지. 

img의 기본 표시가 변경되어서는 안됨.

/* bad */
img {
  display: block;
}

/* good */
img {
  vertical-align: middle;
}

마찬가지로 flow(흐름)에서 요소를 제거하면 X. 

/* bad */
div {
  width: 100px;
  position: absolute;
  right: 0;
}

/* good */
div {
  width: 100px;
  margin-left: auto;
}

포지셔닝(Positioning)

CSS에서 요소를 배치하는 방법은 많이 있지만 아래 "속성:값"으로 제한하십시오. 선호도 순서:

display: block;
display: flex;
position: relative;
position: sticky;
position: absolute;
position: fixed;

셀렉터(Selectors)

DOM에 결합 된 셀렉터를 최소화하십시오. 선택기가 3개의  

구조적 클래스, 자손, 형제 결합자를 초과 할 때

 일치시킬 요소에 Class를 추가하는 것을 고려하십시오.

/* bad */
div:first-of-type :last-child > p ~ *

/* good */
div:first-of-type .info

선택기에 과부하가 걸리지 않도록하십시오.

/* bad */
img[src$=svg], ul > li:first-child {
  opacity: 0;
}

/* good */
[src$=svg], ul > :first-child {
  opacity: 0;
}

특성(Specificity)

재정의하기 어려운 값과 선택자를 만들지 마세요.

/* bad */
.bar {
  color: green !important;
}
.foo {
  color: red;
}

/* good */
.foo.bar {
  color: green;
}
.foo {
  color: red;
}

재정의, 오버라이딩(Overriding)

스타일 무시는 선택자는 디버깅을 더욱 어렵게 만듭니다. 

가능하면 안하는 것이 좋다.

/* bad */
li {
  visibility: hidden;
}
li:first-child {
  visibility: visible;
}

/* good */
li + li {
  visibility: hidden;
}

상속(Inheritance)

상속 될 수 있는 스타일은 단일표기 X.

/* bad */
div h1, div p {
  text-shadow: 0 1px 0 #fff;
}

/* good */
div {
  text-shadow: 0 1px 0 #fff;
}

간결(Brevity)

Code를 간결하게.. 약식 속성을 사용하고 불필요한 속성을 사용X.

/* bad */
div {
  transition: all 1s;
  top: 50%;
  margin-top: -10px;
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 20px;
  padding-left: 10px;
}

/* good */
div {
  transition: 1s;
  top: calc(50% - 10px);
  padding: 5px 10px 20px;
}

언어(Language)

/* bad */
:nth-child(2n + 1) {
  transform: rotate(360deg);
}

/* good */
:nth-child(odd) {
  transform: rotate(1turn);
}

벤더 접두어(Vendor prefixes)

사용되지 않는 벤더 접두어를 제거하십시오. 

이를 사용해야 할 경우 표준 특성 앞에 삽입하십시오.

/* bad */
div {
  transform: scale(2);
  -webkit-transform: scale(2);
  -moz-transform: scale(2);
  -ms-transform: scale(2);
  transition: 1s;
  -webkit-transition: 1s;
  -moz-transition: 1s;
  -ms-transition: 1s;
}

/* good */
div {
  -webkit-transform: scale(2);
  transform: scale(2);
  transition: 1s;
}

애니메이션(Animations)

opacity및 이외의 다른 속성에는 애니메이션을 사용하지 마십시오

/* bad */
div:hover {
  animation: move 1s forwards;
}
@keyframes move {
  100% {
    margin-left: 100px;
  }
}

/* good */
div:hover {
  transition: 1s;
  transform: translateX(100px);
}

단위(Units)

가능한 경우 단위가 없는 값을 사용하십시오. 

rem단위를 사용하는 것을 선호합니다. 

/* bad */
div {
  margin: 0px;
  font-size: .9em;
  line-height: 22px;
  transition: 500ms;
}

/* good */
div {
  margin: 0;
  font-size: .9rem;
  line-height: 1.5;
  transition: .5s;
}

색상(Colors) 

투명도 적용 시 rgba 를 사용하거나 16진수 형식을 사용하십시오.

/* bad */
div {
  color: hsl(103, 54%, 43%);
}

/* good */
div {
  color: #5a3;
}

드로윙(Drawing) 

리소스가 CSS로 쉽게 복제 될 수있는 경우 HTTP request을 피하는게 좋음.

/* bad */
div::before {
  content: url(white-circle.svg);
}

/* good */
div::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
}

해킹 (Hacks)

아래의 안좋은 예를 사용하면 안됩니다.

/* bad */
div {
  // position: relative;
  transform: translateZ(0);
}

/* good */
div {
  /* position: relative; */
  will-change: transform;
}