나의 베스트 프랙티스 – CSS

1. 머리말

요즘 CSS는 제대로 활용되지 못하고 있습니다. Angular/React/Vue/… 개발자와 UI 디자이너 사이에는 깊은 골이 있습니다.

UI 디자이너는 <div>를 서른 개씩 중첩하고 CSS 클래스를 마흔 개씩 붙입니다. 한편 Angular 개발자는 2주마다 최신 라이브러리에 열광하는데, 그의 의존성 지옥은 피어 의존성끼리 충돌하는 바람에 이미 오래전부터 npm i --force 없이는 빌드되지 않습니다. TypeScript 광신자에게 CSS와 HTML은 별 관심사가 아닙니다. 아주 단순한 입력 필드에도 Material을 써야 합니다. 그러지 않으면 검증을 제대로 못 만들까 봐 겁이 나니까요. 바퀴를 다시 발명하느라 시간을 잃는 건 더더욱 싫습니다. 그런데 라이브러리가 지원하지 않는 첫 번째 요구 사항이 나오는 순간 아낀 시간을 몽땅 다시 잃고, 정신을 차려 보면 그 라이브러리의 GitHub 이슈를 읽고 있다는 사실을 그는 모릅니다.

풀스택 프로젝트의 개발자에게는 프런트엔드 디자이너로서 실력을 마음껏 발휘할 기회가 좀처럼 없습니다. Figma로 화면 목업을 받으면 그대로 구현해야 합니다. 이런 프런트엔드 개발자 대부분은 CSS 한 줄만으로도 반응형 레이아웃을 만들 수 있다는 사실조차 모릅니다. CSS는 그 어느 때보다 강력합니다. JS로 스타일을 땜질하고, 미디어 쿼리를 잔뜩 쓰고, IE 8 대응 꼼수를 쓰던 시절은 끝났습니다. 만세!

2. 완벽한 가운데 정렬

면접에서 늘 반응이 좋았던 건 아니지만, 저는 이 답이 정말 마음에 들었습니다. 프런트엔드를 잘하느냐는 질문을 받으면 즐겨 이렇게 대답했거든요. “그럼요. <div>를 세로 가운데 정렬할 수 있거든요.”

div를 가운데 정렬하기란 악명 높을 만큼 어렵다.

이제는 아닙니다:

.parent {
    display: grid;
    place-items: center
}

3. 반응형 Grid

.parent {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

4. 반응형 Flex

.parent {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.box {
    flex: 1 1 150px; /*  Stretching: */
    flex: 0 1 150px; /*  No stretching: */
    margin: 5px;
}

5. 페이지 레이아웃

.parent {
    display: grid;
    grid-template-rows: auto 1fr auto;
}

6. 사이드바

.parent {
    display: grid;
    grid-template-columns: minmax(150px, 25%) 1fr;
}

7. 출처

1-Line Layouts