CSS 덮어쓰기는 무척 중요하다. 우리의 업무의 절반 이상은 이미 작성된 CSS를 수정하기 때문이다. 내가 직접적으로 원본 CSS 파일을 건드리지 못 하는 경우에 어떻게 해야할까?
1. 같은 클래스 명이나 스타일을 하단에 작성
.box {
background : red;
}
.box {
background : blue;
}같은 class 명이여도 하단에 정의한 클래스 명과 스타일을 우선적으로 적용한다.
<link href="main.css" rel="stylesheet">
<link href="main2.css" rel="stylesheet">이와 마찬가지로 CSS 파일을 여러개 첨부 했을 경우도 하단의 것을 먼저 적용한다. 따라서, main.css보다 main2.css를 우선적으로 적용한다.
2. id, style 등 우선순위를 높인다.
tag < class < id < style="" 순으로 우선순위가 높다. 예를 들어 점수를 따진다면 1점, 10점, 100점, 1000점 이라고 볼 수도 있다. 그래서 class 스타일을 덮으려면 id를 적용해보고, 그래도 되지 않는다면 style="" 를 써보자.
여기에 추가적으로 속성에 !important를 붙일 시에 가장 우선적으로 적용 된다. 점수로 따지면 10000점은 되지 않을까.
.box {
background : red !important;
}
.box {
background : blue;
}하지만 억지로 우선순위를 두게 된다면 추후에 더 큰 것으로 수정해야하기 때문에 되도록이면 사용하지 않는 것이 좋다. 특히, id 같은 건 스타일링에 사용하지 말자.
3. Specificity (구체성 점수) 높여서 작성하기
셀렉터를 여러개 나열하면 점수가 오른다.
.contaienr .box {
color: red;
}
div.container .box {
color : red;
}좀 더 구체적으로 셀렉터를 작성할 수록 점수가 높아져 덮어쓰기가 가능하다.
따라서, CSS 파일을 사용할 때 div.container, div.box 처럼 길고 복잡하게 사용하면 나중에 덮어쓰기가 어렵기 때문에 덮어쓰기 할 상황을 생각하면 class 이름은 하나만 작성하는 것이 가장 좋다.
초보들의 흔한 질문 : 내가 작성한 코드가 동작은 잘 하는데 좋은 코드가 맞을까?
초보들은 그런 것에 판단하기 어려워 코드 검사를 받거나 하는데 실은 검사 받지 않아도 혼자서도 판단이 가능하다. 좋은 코드의 원칙은 2개만 기억해보자.
1. 내가 짠 코드가 나중에 수정이 쉽고 관리가 쉬워지면 좋은 코드다.
2. 확장성이 좋으면 좋은 코드다.
3. 양이 적으면 좋다 (선택사항)
확장성은 class를 다른 페이지에도 사용할 수 있는지, 살짝 수정해서 더 유용한 class를 만들기 쉬울까, 같은 것들을 고민해보자.
이 2가지만 염려해도 좋은 코드를 잘 짤 수 있다.
참고로, CSS 작성할 때는 2번은 스킵하고 1번만 생각해도 좋은 코드다.
