HTML/CSS (중급)-CSS 덮어쓰기 & 어떤 코드가 좋은 코드인지

CSS 덮어쓰기 하려면

1. 같은 클래스명 하단에 쓰기

하나의 CSS 파일일 경우,

.box {
  background : red;
}

.box {
  background : blue;
}

CSS파일이 여러개 첨부되어있을 경우

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

💡 @media 문법도 하단에 작성해야하는 이유!

2. 우선순위 높이기

tag<class<id<style="" 순으로 우선순위가 높다
1점 10점 100점 1000점

속성 뒤에 !important를 부여하면 최우선적으로 이 속성을 적용하게 된다!!!! 완전 10000점

코드를 입력하세요

  background : red !important;
}

.box {
  background : blue;
}

이렇게 사용하면 background: red 가 우선순위 적용
but❗ 나중에 수정하려면 더 큰 힘으로 눌러야하기 때문에 추천XX

3. specificity 높이기

div.container .box {
  color : red;
}

이 친구는 21점 ( 10점짜리 .clss 2개에 1점짜리 div 태그셀렉터를 사용했기 때문)

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

div.container .box {
  color : blue;
}

color: red 가 더 위에 있음에도 적용된다
왜냐하면!!
div.container div.box < 22점
div.container .box < 21점

💡교훈

셀렉터를 div.container div.box 이렇게 길게 적으면 너무 복잡해서 미래에 덮어쓰기가 힘들어진다 ㅠㅠ

내가 짠 코드가 좋은 코드인지 확인하는 방법

1. 내가 짠 코드가 나중에 수정이 쉽고 관리하기 쉬운가?
2. 확장성이 좋은가?
3. 양이 적은가?
   
   

확장성이란
-지금 만든 class를 다른 페이지에서도 쉽게 활용할 수 있는지
-지금 만든 class를 복사해서 더 유용한 class 를 만들기 쉬울지