CSS 덮어쓰기가 매우 중요하다.
왜냐면 업무의 절반 이상은 이미 작성된 CSS 수정이기에 내가 직접 원본 CSS 파일을 건들이지 못 하는 경우 새로운 CSS로 덮어야 하는데 이 방법에 관해 알아보자.
1. 같은 클래스 명이나 스타일을 하단에 작성
.box {
background : red;
}
.box {
background : blue;
}같은 class 명이여도 하단에 정의한 클래스 명과 스타일을 우선적으로 적용한다.
<link href="main.css" rel="stylesheet">
<link href="main2.css" rel="stylesheet">CSS 파일도 마찬가지로 같은 class 명이여도 하단에 있는 CSS 파일을 우선적으로 적용한다.
2. id, style 등과 같이 우선순위를 높여 작성한다.
tag < class < id < style="" 순으로 우선순위가 높다. 점수로 따지면 1점, 10점, 100점, 1000점으로 비교를 할 수 있는데 class를 적용해보고 안 된다면, id를 적용해보고 또 안 된다면, style 속성을 적용해보자.
속성 뒤에 !important를 부여하면 모든 우선순위를 무시하고 가장 우선적으로 적용한다. 점수로 따지면 10000점.
.box {
background : red !important;
}
.box {
background : blue;
}이렇게 사용하면 !important가 부여된 스타일을 최우선으로 적용한다. 다만, 이러면 또 수정을 하기 어렵기 때문에 근본적인 해결방법은 아니다. 가급적으로 사용하지 말자.
특히, id는 스타일링을 하기 위해 쓰지 말자. 기능개발을 하는 사람들도 id를 자주 사용하기에 겹치면 무척 곤란하다.
3. Specificity (구체정 점수) 높여서 작성하기
셀렉터를 여러개 작성하면 점수도 높아진다.
div.container .box {
color : red;
}위에 설명했던 것들로 에시를 들면 이 셀렉터는 21점을 가질 수 있다. class를 두개를 쓰고 tag 셀렉터도 적용하였다. 이처럼 더 구체적으로 작성할 수록 점수가 높아져서 덮어쓰기가 가능하다.
(교훈) 그래서 CSS 파일을 사용할 때 div.container div.box와 마찬가지로 길고 복잡하게 작성하면 추후에 덮어쓰기가 어렵기 때문에 class 이름은 하나만 써서 작성하는 것이 좋은 방법이다.
내가 짠 코드가 동작은 하는데 좋은 코드가 맞을까?
초보들은 이런 판단이 어려워서 매번 스승님을 찾아 코드 검사를 받으러 가는데 솔직히 혼자서도 자가 판단 할 수 있다. 두가지 원칙만 기억하자.
1. 내가 짠 코드가 나중에 수정도 쉽고 관리가 쉬워지면 좋은 코드다.
2. 확장성이 좋으면 좋은 코드다.
3. 양이 적으면 좋은 코드다. (선택사항)
확장성에 관해 이야기를 하면
**- 지금 만든 class를 다른 페이지에도 유용하게 사용할 수 있는지
- 지금 만든 class를 살짝 수정해서 더 유용한 class를 만들기 쉬울지**
코드를 짤 때 2개에 해당하는지 잘 생각해보면 좋은 코드를 작성 할 수 있다.
