css 덮어쓰기, 수정 등등

CSS 덮어쓰기가 매우 중요합니다. 

 

왜냐면 여러분 업무의 절반 이상은 이미 작성된 CSS 수정이니까요. 

내가 직접 원본 CSS파일을 건드리지 못하는 경우 새로운 CSS로 덮어써야하는데 이 방법을 배워보도록 합시다. 

 

 

 

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

 

하나의 CSS 파일일 경우,

 

설명하다

 

.box {
  background : red;
}

.box {
  background : blue;
}

같은 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를 동일하게 작성해서 하단에 적거나

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

 

 

(교훈) 그래서 CSS 파일 사용할 때

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

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

 

 

 

 

 

 

 

초보들의 흔한 질문 : 내가 짠 코드가 잘 동작하긴 하는데 좋은 코드가 맞나요?

 

초보들은 이런거 판단이 어려워서 맨날 스승님을 찾아서 코드 검사받으러 다니는데 

실은 스승님 없어도 알아서 혼자 판단할 수 있습니다.

좋은 코드의 원칙 2개만 기억하시면 되는데 

 

1. 내가 짠 코드가 나중에 수정이 쉽고 관리가 쉬워지면 좋은 코드입니다.

2. 확장성이 좋으면 좋은 코드입니다.

3. 양이 적으면 좋습니다 (선택사항)

 

확장성은 그냥

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

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

이런거 생각해보면 됩니다.