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

soosoorim·2023년 8월 31일

CSS 덮어쓰기 3가지 방법

내가 직접 원본 CSS파일을 건드리지 못하는 경우 새로운 CSS로 덮어써야 한다.(매우 중요)

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

.box {
  background : red;
}

.box {
  background : blue;
}

하나의 CSS 파일일 경우, 같은 class 명이라도 하단에 정의한 클래스 명과 스타일을 우선적으로 적용

<link href="main.css" rel="stylesheet">
<link href="main2.css" rel="stylesheet">

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

2. id, style 등 우선순위를 높여 작성

tag < class < id < 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를 동일하게 작성해서 하단에 적거나 아니면 더 점수를 높여주면 덮어쓰기가 가능하다.

div.container div.box 이런 식으로 길게 복잡하게 쓰면 나중에 덮어쓰기가 힘드니

나중에 덮어쓰기할 상황을 생각하면 class 이름은 하나만 써서 작성하는게 좋은 방법이다!

Q. 작동은 하는데 좋은 코드인지 모르겠다. 좋은 코드란?

확장성은 그냥

지금 만든 class를 다른 페이지에서도 계속 활용할 수 있을 것 같나?

지금 만든 class를 살짝 수정해서 더 유용한 class를 만들기 쉬울까?

이런거 생각해보기

bootstrap 덮어쓰기