CSS_ 우선순위

▶️CSS 덮어쓰기

선요약

1. 나중에 수정이 쉽고 관리가 쉬워지면 좋은 코드
2. 확장성이 좋으면 좋은 코드
3. 양이 적은 코드 (선택사항)

확장성은 그냥

• 지금 만든 class를 다른 페이지에서도 쉽게 활용할 수 있을 것 같나

• 지금 만든 class를 복사해서 더 유용한 class를 만들기 쉬울까

이런 요소들을 생각해보면 된다.

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

  .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속성을 열어보고 수정한다.

  .box {
    background : red !important;
  }

  .box {
    background : blue;
  }

1. 속성 뒤에 !important라는걸 부여하면 모든 우선순위를 씹어먹고 최우선적으로 이 속성을 적용하게된다. 점수로 따지자면 !important는 10000점이다.
2. 하지만 큰 힘으로 다른 힘을 억누르게 되면 그걸 또 나중에 수정하려면 더 큰 힘으로 억눌러야하기 때문에 근본적인 해결방안이 아니다. 되도록이면 쓰지않는걸 추천한다.
3. 특히 id 이런건 스타일링할 때 쓰지 말자. 프론트엔드 백엔드 기능개발하는 사람들도 id를 자주 사용하는데 그것과 겹치면 귀찮아진다.

---

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

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

  div.container .box {
    color : blue;
  }

이경우엔 하단에 있는 blue속성말고 위에있는 red 속성이 먼저 적용되는데, 이는 구체성이 위 코드가 더 높기때문이다.

---