CSS 파일 수정하기

기존의 레거시 코드를 수정할 때 원본파일을 건들면 안되는 경우라면

 

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

2. 우선순위 높이기

3. specificity 높이기

 

셋 중 한가지 방법을 택한다.

 

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

.box {
  background : red;
}

.box {
  background : blue;
}

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

하단에 같은 클래스명으로 css를 수정한다.

 

<link href="orignal.css" rel="stylesheet">
<link href="mycode.css" rel="stylesheet">

<link>를 하단에 사용할 수록 같은 클래스를 하단에 작성한 것과 똑같은 효과이기 때문에

내가 수정한 css 를 아래쪽에 첨부한다.

 

 

2. 우선순위 높이기

tag <class < id < inline style 순으로 우선순위가 높다. ( 1점 <  10점  <  100점 < 1000점 )

그러나 id는 프론트,백 개발할때 사용하므로 지양하는 것이 좋다.

!important는 우선순위를 최우선으로 부여하는 것인데 안 쓰는것이 좋다.

 

 

3. specificity 높이기

div.background .custom {
  color: blue;
}

.background .custom {
  color: green;
}

.background .custom 은 클래스 2개이므로 20점인데

div.background .custom 은 클래스2개 + 태그 1개이므로 21점이다.

따라서 div.background .custom 로 설정한 css가 더 위에 있음에도 우선순위가 높아 마지막으로 적용된다.

 

 

css를 나중에 수정할 경우를 생각해서 selector를 여러개 쓰지 않아야 한다.

덮어쓰기 할때 우선순위를 높이는 것까지 생각해야하기 때문..

따라서 클래스명을 하나만 써서 스타일링하는 것이 좋다.

 

+) 수정이 좋고, 확장성이 좋은(재활용이 가능한) 코드가 좋은 코드다. 

 

+) 부트스트랩은 덮어쓰기 하지않고, 클래스명을 추가해서 스타일을 수정한다. 

 

 

출처 - 애플코딩 HTML/CSS 강의