CSS 지식은 다다익선이다

Table of Contents

• CSS 공부의 어려움
• CSS 지식을 많이 아는건 정말 도움이 되나
• 결론

CSS 공부의 어려움

프론트엔드 개발을 하다보면 CSS를 도대체 어디까지 공부해야 하는건지 도통 모르겠는 순간이 온다.

각잡고 공부한답시고 책을 조금 검색하다보면 1100 페이지에 이르는 무시무시한 책에 압도당해서 공부할 엄두가 안나기도 한다.

그렇다고 구글링을 해서 다양한 article 을 통해 공부해보려고 하면 어떤게 중요한 것이고 나에게 도움이 될 것인지 판단이 잘 되지 않는다.
결국 그때 그때 막히는 부분만 부분적으로 공부를 해나가면서 파편화된 지식을 얻게 된다.

사실 이렇게 공부를 해 나가는것도 나쁘지는 않은 방법이다. 어쩌면 제일 효율적인 방법이기도 하다.
왜냐하면 당장 필요하지 않은 부분까지 공부하느라 시간을 쏟지 않아도 되니까.

하지만 조금 시야를 넓혀서 바라보면 이런 방식으로 CSS 지식을 쌓아나가는 것에는 명확한 한계점이 2가지 존재한다.
내가 생각하는 그러한 한계점은 다음과 같다.

1. 파편화된 지식 습득으로 인해 CSS 기본기를 단단하게 쌓지 못하게 될 위험성이 있다.
2. 늘 사용하던 CSS 속성만 몸에 익어서 새로운 사고를 하기가 귀찮아 진다. 이는 내가 작성하는 CSS 코드의 품질을 낮출 가능성이 있다.

각 항목에 관해 조금 더 상술해보겠다.

우선 1번.

나는 (거의)항상 task 에 치이는 실무자이기에 CSS 관련하여 리서치를 할 때에는 필요한 부분만 cherry-picking 하는 경향이 있다.

그러다보면 MDN에 써 있는 장황한 spec 관련 내용은 자세히 읽어보지 않게 되는 경우도 많다. 이런 방식으로 CSS 지식을 습득해 나가게 되면, 결국 해당 지식을 온전히 내 것으로 만들지 못하게 될 가능성이 높다. 반쪽짜리 지식이 되는 셈이다.

결국 반쪽짜리 CSS 지식들이 체계없이 모여서 품질이 떨어지는 CSS 코드를 양산하게 되는 것이다.

다음 meme 에서처럼 제대로 돌아갈 때 까지 끝없는 CSS 땜질을 하게 되기도하고..

다음으로 2번.

인간은 패턴을 인식하고 형성하는데에 능한 생물이기에 본인에게 익숙한 방식으로 문제를 해결하고자 하는 본능(?)이 있는것 같다.

내가 아는 CSS 속성만 가지고 문제를 해결하려는 편향이 생길 수 있다는 뜻이다. 뭐, 문제 해결 방식이 꼭 다채로워야 하는 것은 아니니 이 부분은 별 문제가 되지 않을 수 있다.

하지만 진짜 문제는, CSS를 잘 모르면 때로는 문제를 해결하는 방식이 생각 외로 복잡해질 수 있다는 점이다.

무슨 이야기일까?

CSS 지식을 많이 아는건 정말 도움이 되나

다음과 같은 문제가 있다고 가정해보자.

div.content 의 자식 요소가 있으면 특정 background-color 를 적용하고,
div.content 의 자식 요소가 하나도 없으면 div.wrapper 요소를 숨김처리하라.

어떤 방식으로 이 문제에 접근할 것인가?

잠시 생각을 해보자.

…
…
…
…
…
…
…
…
…
…
…
…
…
…
…

JS 코드를 짜면 문제를 해결할 수 있을 것 같다.

class 가 content 인 div element 를 얻어서, child node 가 있는지 없는지 체크한 후 요구사항에 맞게 inline style 을 적용하든 해서 구현해주면 될 것 같다!

코드로 표현하면 아마 다음과 같은 모양새가 될 것이다.

/** JS solution */
const wrapperDiv = document.querySelector('.wrapper')
const contentDiv = wrapperDiv.querySelector('.content')

if (contentDiv.childNodes.length > 0) {
	// text node, element 모두 포함하여 자식이 한 개 이상일 때,
	wrapperDiv.style.backgroundColor = 'tomato'
} else {
	// 자식이 하나도 없을 때
	wrapperDiv.style.display = 'none'
}

코드도 깔끔한 것 같고 이 정도면 잘 짠듯 싶다!

하지만, 더 쉬운 방법은 없을까? JS를 아예 안쓰고 풀 수 있는 방법은 없을까?

있다.

다음 CSS 코드로 해결이 가능하다.

/* :has(), :not(), :empty 의 조합으로 해결 */
.wrapper:has(.content:not(:empty)) {
	background-color: tomato;
}

.wrapper:has(.content:empty) {
	display: none;
}

뭔가 JS로 inline style 을 제어하는 코드보다 한결 나아진 것 같은 느낌이 든다!

예시로 든 문제(사실 문제를 위한 문제이긴 하지만)처럼 단순한 상황은 실무에서 자주 나오지는 않지만, 이야기하고자 하는 바는 명확히 전달이 되었을거라 믿는다.

“아는 만큼 코드 품질이 높아질 수 있다.”

결론

CSS가 가지고 있는 모든 속성, 모든 spec 을 전부 알고 있는 것은 불가능에 가깝다. 그래야 할 필요가 있는지도 잘 모르겠다.

하지만 하나 확실한 것은 CSS 속성을 많이 알고 있는 것이 실무에 도움이 될 때가 더러 있다는 것이다. 모르고 있을 때와 알고 있을 때의 코드 퀄리티가 꽤나 차이가 날 수 있다는 말이다. 특히나 시각적으로 빡센 화면(transition, animation 등의 각종 visual effect 가 많이 들어간 화면) 작업을 할 때에 그렇다.

그리고 CSS 개념 하나를 공부하더라도 제대로 공부하는 것이 중요하며, 해당 개념을 실무에서 어떻게 써먹을 수 있을지 자꾸 머릿속으로 그려보며 학습을 하는 것이 효율적이다.

그렇다면 마지막 질문 하나가 남는다.

“CSS에 얼마나 시간 투여를 할 것인가?”

이건 사람마다 기준이 다를 수 있는 문제지만, CSS를 hard하게 쓰지 않는 문제들을 푸는 사람이라면 전체 공부 시간 중 10~20% 정도면 충분할 듯 싶고 CSS를 hard하게 쓰는 문제들을 푸는 사람이라면 그 비율을 50% 이상으로 올려야 하지 않을까 한다. 더 높아야 할 수도 있고?