CSS의 캐스캐이딩(Cascading)과 순서

먼저 CSS가 뭘까? 뜻을 알아보자
CSS는 Cascading Style Sheets라는 뜻이다.

그렇다면 Cascading이란 뭘까?
어원인 cascade는 명사로는 작은 폭포, 동사로는 폭포처럼 흐르다는 뜻이다.

그렇다면 cascading은 폭포처럼 흐르는 이라는 뜻인다.
이 뜻은 폭포가 흐르는 것처럼 '연속되는', '계속되는' 이라는 의미도 된다.

여기서 말하는 폭포처럼 흐르는 것, 연속적인 것은 무엇일까?

한 마디로 말하자면 '순서'를 뜻한다.

정확히 말하면 '우선순위'를 뜻한다

스타일을 적용할 때 어떤 것을 먼저 적용할 것인지 그 순서에 대한 이야기다.
예를 들어 어떤 block을 하나 꾸민다고 할 때 여기에는 여러가지 꾸미는 요소가 있을 것이다. 배경색깔이나 폰트 사이즈 등등. 이 중 우선순위가 우위에 있는게 가장 먼저 강력하게 사용된다.

그렇다면 우선순위는 어떻게 되는거야?(웅성웅성)👥👥

우선순위는 어떤게 높고 낮은 거야?

1. 사용자가 브라우저에 설정한 세팅
2. 코더가 작성한 코드
3. 브라우저 기본 세팅

그렇다면 코드에서는 어떤 것이 우선순위가 높을까?

1.!important
2.태그 안에 꾸민 스타일 (inline)
3.id
4.class
5.tag

!important는 생긴 것 부터 똥고집 있게 생겼다. 그래서 그런지 CSS 순서 다 무시하고 자기가 가장 중요하다고 외치는 놈이다. 그래서 그게 적용이 된다.
✨ 이런 특성 때문에 디버깅에서는 유용할지 몰라도 유지보수에 어렵다고한다. 웬만해선 사용하는거 비추천~

2~5번은 캐스캐이딩은 구체적일 수록 우선순위가 높다는 특성 때문에 저런 순서가 생겼다.

✨ 그렇다면 동일한 순위 끼리에서는 뭐가 적용되는걸까?
웹사이트 하나를 만들더라도 id나 class는 정말 많이 사용한다.

만약 동일한 class를 css에서 꾸민다면?
✨ 맨 나중에 작성한 스타일을 적용한다 (폭포는 아래로 흐르잖여)