웹 개발에서 CSS 선택자는 요소에 스타일을 적용하는 강력한 수단입니다. 선택자를 재활용함으로써 코드의 효율성을 높일 수 있습니다.

기존 선택자 재활용하기

기존에 작성한 선택자를 다른 요소에서도 사용할 수 있습니다. 이를 통해 중복을 줄이고 코드의 가독성을 높일 수 있습니다. 예를 들어,

.btn {
  padding: 10px 20px;
  border: 1px solid #000;
  border-radius: 5px;
}

위와 같이 .btn 선택자를 만들어 버튼 요소에 스타일을 적용할 수 있습니다.

클래스 상속

CSS Preprocessor 중 하나인 Sass나 Less를 사용하면 선택자를 상속하여 재활용할 수 있습니다. 이를 통해 효율적으로 스타일을 관리할 수 있습니다.

.primary-btn {
  @extend .btn;
  background-color: #007bff;
  color: #fff;
}

위와 같이 .primary-btn 클래스에 .btn 선택자를 상속하여 추가적인 스타일을 적용할 수 있습니다.

선택자 그룹화

여러 선택자에 동일한 스타일을 적용해야 할 때 선택자를 그룹화하여 코드의 중복을 줄일 수 있습니다.

.btn, .link, button {
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
}

위와 같이 .btn, .link, button 요소들에 동일한 스타일을 적용할 경우 선택자를 그룹화하여 중복을 제거할 수 있습니다.

CSS 선택자의 재활용을 통해 코드의 효율성을 높이고 유지보수를 용이하게 할 수 있습니다.