선택자 우선순위, CSS 관련 팁

1. 마지막 코드를 우선한다.

가장 최근에 쓰여진, 위치로 보면 아래에 해당하는 코드가 우선 적용된다.

컴퓨터는 위에서 아래로 코드를 읽어나가기 때문에 마지막 코드를 우선한다.

 

 

2. 구체적인 것을 우선한다. 

HTML  기본요소< 클래스 < id가 더 구체적이다. 

* HTML  기본요소< 클래스

* 클래스 < id

외부의 CSS파일보다, HTML에 inline되어진 내부 CSS 스타일을 우선한다.

*외부 CSS < 내부 CSS

CSS는 이처럼 구체적인 것을 우선하여 적용한다. 

 

 

3. CSS를 잘 쓰는 방법

충돌을 피하고, 나중에 디버깅하기에 용이하며, 우선순위에 따라 CSS를 잘 적용하기 위해서 아래의 3가지를 제안한다.

1) id는 특별한 경우에만 드물게 쓴다.

선택자를 지정할 때 웬만하면 class를 이용해 구체적으로 표현하고, 

도저히 안되는 경우 id를 쓴다.

 

2) HTML에서, 요소에 클래스를 적용할 때 하나의 클래스만 사용한다.

부트스트랩은 다중클래스를 많이 사용하고 있는 것은 사실이다. 

하지만 클래스를 적용할 때 단일 클래스만 사용하자.

그래야 코드의 가독성이 높다.

 

3) 인라인 스타일은 피하자

외부 스타일 시트를 이용하면 모든 CSS를 적용할 수 있다.

인라인 스타일을 하면 코드의 가독성이 낮아지고 디버깅할 때 문제를 찾기가 어려워지기 때문이다.