맨틀 이야기

CSS를 쓸 때 가장 어려운 부분이 명시도(specificity)인 것 같다. BEM을 아무리 잘 따라도 사람이 사람과 코드를 짜는 이상 절대적인 컨벤션에 도달하기 어렵다고 생각한다. 만약 styled-components나 Tailwind 같은 툴을 쓰지 않는다면 CSS 클래스 네이밍에 신경써야 할 텐데, 이때 활용해볼 수 있는게 @scope다. @scope는 CSS 규칙을 적용할 범위를 스코핑해주는 아주 중요한 키워드다. 투명한 선을 그어서 네 구역 내 구역을 나눠주는 셈이다. 클래스끼리 엮는 것보다는 명시도가 가장 낮은 DOM 엘리먼트를 타겟팅해야 하는 상황에서 더 빛을 발하는데, 예시로 아래처럼 사용할 수 있다.@scope (.card) { img { border-color: green; ..

Vue 3 버전 기준, Vue의 컴포넌트는 SFC(Single File Components)라고 부르는 하나의 *.vue 파일에 만들어 활용할 수 있다. SFC 파일에는 자바스크립트의 동적 기능, 페이지에 렌더링할 HTML DOM 태그, 그리고 CSS 스타일링까지 한꺼번에 작성해서 하나의 독자적인 컴포넌트로 사용할 수 있는데, 우연히 이런 SFC 컴포넌트 내에서 CSS 스타일을 적용할 때 유의해야 하는 점을 알게 됐다. SFC 컴포넌트에서 태그를 사용할 때, 특정 클래스명에 스타일을 부여하면 해당 클래스명을 사용하는 외부 모든 컴포넌트들에도 스타일이 적용된다. 각 .vue 파일에 선언할 수 있어서 해당 파일이 렌더링하는 요소들에게만 적용되는 고유한 스타일이라고 생각했는데, 사실은 아니었던 것이다. 태..