CSS 덮어쓰기 잘하는 법 & 좋은 CSS 코드??

조 은길·2022년 4월 14일

CSS TIL

Html & CSS

목록 보기

40/66

보통 취업하면, 새로운 페이지를 만들기보다는 기존의 CSS 코드를 수정하는 일이 더 많이 하게 된다고 한다.

=> 수정 및 유지보수 일을 더 많이 하게 됨

그런데, 가끔 CSS 원본파일을 건들면 안되는 경우가 있다.
이유는 다양하지만, 일단 이런 경우가 있다.

이런 경우에는 새로운 CSS 파일을 덮어쓰기해야 한다.

CSS 덮어쓰기 하는 법

1. 같은 클래스명이나 스타일을 하단에 작성

하나의 CSS 파일일 경우,
.box {
  background : red;
} 
.box {
  background : blue;
}
같은 class 명이라도 하단에 정의한 클래스 명과 스타일을 우선적으로 적용합니다.

CSS파일이 여러개 첨부되어있을 때도 유효합니다.
<link href="main.css" rel="stylesheet">
<link href="main2.css" rel="stylesheet">
<link>를 하단에 사용할수록 하단에 작성한 것과 똑같은 효과이기 때문에 main.css와 main2.css에 같은 class 명이 있더라도 main2.css에 있는 클래스 명을 우선적으로 적용합니다.

2. id, style 등 우선순위를 높여 작성합니다.(비추)

tag < class < id < HTML에 style="" 순으로 우선순위가 높습니다.

점수로 따지자면 각각 1점 10점 100점 1000점이기 때문입니다.

그래서 class 스타일을 덮어쓰려면

id 써보고 안되면 style속성 열어보고 이렇게 수정하시면 되긴 합니다.

속성 뒤에 !important라는걸 부여하면

모든 우선순위를 씹어먹고 최우선적으로 이 속성을 적용하게됩니다.

점수로 따지자면 !important는 10000점입니다.

.box {
  background : red !important;
}

.box {
  background : blue;
}

이렇게 사용하면 !important가 붙은 스타일은 최우선으로 적용됩니다.

하지만 큰 힘으로 다른 힘을 억누르게 되면

그걸 또 나중에 수정하려면 더 큰 힘으로 억눌러야하기 때문에

근본적인 해결방안이 아닙니다. 되도록이면 쓰지않는걸 추천합니다.

특히 id 이런건 스타일링할 때 쓰지 맙시다.

프론트엔드 백엔드 기능개발하는 사람들도 id를 자주 사용하는데 그것과 겹치면 귀찮아집니다.

3. Specificity (구체성 점수) 높여서 작성하기

셀렉터를 여러개 나열하면 점수도 높아집니다.

예를 들면

div.container .box {
  color : red;
}

=> 얘는 21점입니다.

왜냐면 10점짜리인 .class를 2개나 썼고

1점짜리인 div 태그셀렉터를 1개 썼기 때문입니다.

저렇게 더 구체적으로 셀렉터를 작성할 수록 점수가 높아져서 저렇게 점수를 높여도 덮어쓰기가 가능합니다.

div.container div.box {
  color : red;
}

div.container .box {
  color : blue;
}

위 예제에선 둘 다 똑같이 .box를 스타일링하고 있는데

color : red가 더 위에 있음에도 불구하고 적용됩니다. 왜냐면

div.container div.box 이건 22점이고

div.container .box 얘는 21점이기 때문입니다.

아무튼 Specificity를 동일하게 작성해서 하단에 적거나

아니면 더 점수를 높여주면 덮어쓰기가 가능합니다.

(교훈)
그래서 CSS 파일 사용할 때
div.container div.box 이런 식으로 길게 복잡하게 쓰면 나중에 덮어쓰기가 힘들겠죠?

=> 나중에 덮어쓰기할 상황을 생각하면 class 이름은 하나만 써서 작성하는게 좋은 방법입니다. ex) .container