🎨 CSS 덮어쓰기, 어떤 것을 사용해야하나?
CSS를 직접 작성하다 보면 덮어써야하는 경우가 발생하곤 한다.
부트스트랩 같은 라이브러리를 사용하더라도 내가 원하는 스타일링을 추가하고 싶을 때
다양한 방법 중 어떠한 방법이 가장 적합할 지 알아보기로 했다.
먼저 작성된 기존 CSS 파일을 덮어쓰는 방식에는 3가지가 존재했다.
- 덮어 쓰고자 하는 것을 기존 클래스명, id명, 태그명, 스타일 등 보다 더 하단에 작성하는 방법이다.
- CSS의 적용 우선순위를 이용한다.
- Specificity 점수를 높인다.
1. 기존 스타일보다 더 하단에 작성하기
해당 방법은 먼저 작성한 것보다 밑에 있을 수록 우선적으로 적용된다는 점을 이용한다는 것이다. css media query가 이런 방식으로 동작한다.
2. css 우선순위를 이용하기
css는 속성별 점수가 부여되어 높은 점수를 가진 스타일이 적용된다.
| 우선순위 | 선언 방식 | 점수 |
|---|---|---|
| 1 | !important | 10,000 |
| 2 | style="" (html 요소에 직접 스타일 넣기) | 1,000 |
| 3 | #id | 100 |
| 4 | .class 또는 pseudo 클래스 (가상 클래스 선택자) | 10 |
| 5 | html 태그명 | 1 |
점수가 부여되는 선언 방식은 위 표와 같다.
그 외에는 전체선택자(*)와 상속이 있으나 점수가 없는 것과 같기 때문에 표에는 넣지 않았다.
!important
/* CSS */
p {
color: aliceblue; !important
}!important가 붙은 스타일은 당장 우선순위로 급하게 적용해야 할 때만 사용하고 가급적 사용하지 않는 것이 좋다. 점수가 너무 높아 최우선적으로 적용되는 속성이기 때문에 웬만하면 피하도록 하자.
본인은 css 접한지 얼마 안되어 잘 모를 때 같은 학부생이 사용하는 것을 보고 '오 뭐야 이런 것도 써도 되는 건가?' 하고 따라 쓰다가 낭패를 본 경험이 있다. 😥😥😥
인라인 스타일
<div style="color: aliceblue">
</div>!important 다음으로 높은 점수를 가졌다. html 요소 자체에 직접 style 속성을 부여하는 것인데 html이 지저분해질 뿐만 아니라 우선순위 또한 높아서 사용하지 않는 편이 좋다.
물론, 귀찮을 때 한번씩 쓴 적이 있긴 하다..
#id
#reason {
color: aliceblue;
}id 선택자를 사용하여 스타일을 주는 방법이다. id의 점수는 100점으로 class를 10개 사용한 것과 동일한 점수이다.
요즘엔 id 속성으로 직접적으로 스타일을 넣지 않는 경우가 많다고 한다. (자바스크립트 등에서 사용하기 때문에)
.class 또는 pseudo클래스
.reason{
color: aliceblue;
}
.reason:hover{
color: blue;
}class에 스타일을 넣는 방법이 가장 많이 사용되는 방법일 것이다. 역시 제일 무난한게 최고!
태그 선택자
p {
}css reset 파일에서 자주 볼 수 있다.
가끔 스타일 지정할 때 class와 혼용하여 사용하기도 한다. 점수가 낮기 때문에 단독으로 사용할 때는 중첩된 스타일이 있는지 확인해야할 수도 있다.
3. Specificity 점수 높이기
우선 순위 점수를 이용한 스타일 덮어쓰는 방법이다.
2번에서 살펴본 우선 순위 점수를 이용해서 css를 덮어쓰기 하는 방법을 말한다. 셀렉터를 여러개 사용할 수록 점수가 높아지는 방식을 이용하는 것이다.
예를 들면 다음과 같다.
.test.reason {
color : red;
/* 20점 */
}
p.reason {
color : blue;
/*이것은 11점*/
}reason이라는 이름을 가진 class는 blue가 아닌 red가 적용된다. css 작성 순서로만 보면 밑에 작성된 것이 더 우선적으로 적용되야 하지만, 우선순위 점수로 인해 class 2개(10+10=20)가 더 높은 토탈 점수로 인해 color : red가 적용된다.
위 방법들을 참고해서 CSS 파일을 덮어쓰면 된다.
단, 몇가지 유의할 사항이 있었다.
1번의 경우 계속 하단에 작성하게 되면 코드의 길이가 길어질 뿐더러 지저분해질 것이다. (계속 하단에 같은 셀렉터를 반복해서 작성해야 하니까)
2번은 사실 정말 특수한 경우 아니면 class나 html 태그명을 통한 스타일 적용을 주로 사용하기 때문에 다른 점수가 높은 선언 방식을 사용할 때만 주의해서 쓰면 될 것 같다.
3번 에서 살펴본 specificity 점수를 높일때 너무 많은 셀렉터를 사용하게 되면 어떤 요소에 스타일을 주는 것인지 알아보기 힘드므로 class, html 태그명을 이용해서 1~3개 정도 사용하는 것이 좋은 것 같다.
재사용성이나 확장성, 유지보수를 고려한 코드를 작성하는 것이 올바른 코드 작성 방법이다.
