[CSS] 효율적인 CSS코드 양 줄이기

CSS가 많아지면 코드가 길게 이어지기 마련

그럴 때 좀 효과적으로 코드량을 줄일 수 있다

 

빠르고 쉽게

 

CSS

.btn-green {
  color: green;
  width: 100px;
  height: 100px;
  padding: 20px;
}

.btn-red {
  color: red;
  width: 100px;
  height: 100px;
  padding: 20px;
}

.btn-blue {
  color: blue;
  width: 100px;
  height: 100px;
  padding: 20px;
}

이런 박스를 만든  css 코드가 있다 중복되는 width, height, padding 이런 거를

.btn-blue, .btn-red, .btn-green {
  width: 100px;
  height: 100px;
  padding: 20px;
}

.btn-green {
  color: green;
}

.btn-red {
  color: red;
}

.btn-blue {
  color: blue;
}

이런 식으로 해도 되고

 

.btn-box {
  width: 100px;
  height: 100px;
  padding: 20px;
}

.btn-green {
  color: green;
}

.btn-red {
  color: red;
}

.btn-blue {
  color: blue;
}

따로 클래스를 만들어서 자주 사용하는 걸 정해놓고 

HTML에 클래스를 추가하면 됩니다

 

끝