CSS? "Cascading"

CSS의 가장 중요한 개념 중 하나가 바로 "Cascading"이다. 이게 실제로는 스타일 적용의 우선순위와 관련된 부분인데, 처음 CSS를 접했을 땐 그냥 "스타일을 입히는 방법" 정도로만 생각했다. 그런데 최근 다시 공부해보다보니 아, 이게 꼭 "스타일 배틀" 같은 느낌이라는 걸 깨닫게 되었다.

누가 더 우선권을 가질지, 말 그대로 스타일들끼리 한판 붙는 개념이랄까.
(이거 완전 스타일 대전! 👊)

"Cascading"이라는 단어가 "폭포수처럼"이라는 뜻인데, 마치 물줄기가 여러 단계로 떨어지는 것처럼 스타일도 적용되는 순서가 있다고 할 수 있다. 그런데 그 순서가 꼭 폭포수처럼 매끄럽게 흘러간다고는 장담 못 한다.

굳이 표현하면 가끔은 폭포에서 스타일이 튀어나오는 느낌이랄까? 😂

예를 들어, 같은 요소에 여러 스타일 규칙을 정의했을 때, 어떤 스타일이 최종적으로 이길지를 결정하는 게 바로 이 "Cascade" 원칙이다.

우선순위는 크게 세 가지로 나뉜다.

1. 명시적 우선순위

!important를 쓰면 그 스타일이 무조건 이김. 무조건적으로! 그런데 이걸 남용하면 유지보수가 아주 골치 아파진다고 한다. 그래서 중요한 건 정말 중요한 것에만 쓰는 게 좋다.

(중요한 건 중요할 때만... 철학적이네?)

2. 명시적 선택자 우선순위

ID, 클래스, 요소 선택자의 순서에 따라 우선순위가 달라짐. 'ID'가 제일 강하고, 그 다음 '클래스', 그리고 '요소'. 이게 처음엔 헷갈릴 때가 있었는데, 사용하다보면 어느샌가 익숙해지니까 생각보다 직관적이다.

(뭐, 결국 ID는 신분증처럼 중요한 거니까...)

3. 소스 코드의 순서

같은 선택자끼리 우선 순위를 겨룬다면, 나중에 선언된 게 우선된다. (나는 실제 CSS 작성 시 기존코드를 지우지 않고 아래에 추가해 가며 다양한 모양을 시도 해 보며 유용하게 사용하곤 한다.) 그래서 최종 수정 때 스타일 적용 되는 순서를 잘 신경 써야 한다.

(마지막에 등장하는 게 이긴다는 점에서, 이건 마치 드라마 주인공 공식?)

가끔 내가 작성한 CSS 스타일이 왜 안 먹히나 싶은적이 많았는데, 알고 보니 다 이 Cascading 때문이었다. 이제는 CSS를 작성할 때 Cascading을 염두에 두고 우선순위를 잘 고려하면서 짜보려고 한다. 그러다 보면 코드는 더 깔끔해질 것이고, 유지보수도 더 쉬워지겠지...?