토이 프로젝트를 위한 css 방식 결정하기

🧸 🚂 🎈 새로운 토이 프로젝트에서 사용할 css 방식을 결정하기 위해
직접 여러 가지 방식들을 조사하고 장단점을 비교해 봤다! 🙋🏻‍♂️

🎈 고려한 선택지

• css module
• css preprocessor(scss)
• css-in-js(styled-components)

컴포넌트를 직접 제작해보고 싶었기 때문에 Tailwind CSS, Bootstrap, Material UI 등의 CSS Framework는 고려하지 않았다.

❗️ 기존 css가 가지는 문제점

가장 큰 문제점은 바로 중복된 클래스명에 있다.
css는 global scope를 가지기 때문에, 클래스명이 중복될 경우 원치않는 곳에 스타일이 적용되는 문제가 발생할 수 있다. 이를 해결하기 위해서는 결국 클래스명을 점점 더 구체적으로 지을 수 밖에 없다. 클래스명은 점점 더 길어지고, 아무리 겹치지 않게 이름을 붙이려고 한 들 클래스명의 유일성을 보장할 수 없다.

세 가지 선택지 모두, 해당 문제를 해결할 수 있는 방법이라고 할 수 있다.

1️⃣ css module

• 기존 css와 유사하나 파일의 확장자명이 다르다. ( .css가 아닌 .css.module.css)
• css module로 작성할 경우 클래스명이 자동으로 해싱된다! 클래스명이 자동으로 고유한 값을 갖게 되기 때문에, 여러 css 파일에서 동일한 클래스명을 사용하더라도 스타일 중첩현상이 일어나지 않는다.

2️⃣ css pre-processor(sass)

• 기존 css에 새로운 문법이 더해진 언어로서, 실제 동작 시에는 순수 css로 변환된다.
  스타일 중첩현상의 해결 뿐 아니라 반복적인 스타일 작성을 방지할 수 있는 다양한 문법들을 제공한다.
• 기존 css, css module과 마찬가지로 별도의 css 파일에 스타일을 작성한다.
• 가장 많이 사용되는 css pre-processor로는 Sass가 있다.

3️⃣ css-in-js(styled-components)

• 별도의 css 파일이 아닌 JS 파일 내에 스타일을 작성한다는 점이 가장 큰 차이점이다.
• 가장 많이 사용되는 css-in-js로는 styled-components가 있다.
• 다른 두 방식에 비해 속도가 느리다. JS를 해석하는 과정이 필요하기 때문이다.
• (styled-components) 클래스명을 활용하지 않고, 스타일이 입혀진 엘리먼트를 생성하는 방식이다.

기존 css
: 엘리먼트에 클래스명을 활용해 스타일을 적용한다.

function App() {
    return <div className="title">Hello</div>;

// style.css
.title {
    color: blue;
}

styled-components
: 스타일이 입혀진 엘리먼트 자체를 생성해 사용한다.

function App() {
    return <StyledDiv>Hello</StyledDiv>

const StyledDiv = styled.div`
    color: blue;
`

🙋🏻‍♂️ 내 결정

결론적으로 이번 프로젝트에서는 Sass를 사용하기로 결정했다. 이유는 아래와 같다.

• styled-components를 사용했었을 때 느꼈던 불편함
  • 재사용성이 떨어진다.
    스타일이 JS 파일 안에 작성되어 있기 때문에 스타일 코드를 보기 위해서는 JS 파일을 열어봐야만 했다. 스타일 간의 위계를 한 눈에 파악할 수 없어서, 파일이 많아질수록 동일한 스타일이 별도의 JS 파일에 여러 번 작성되는 경우가 많았다.
  • 엘리먼트 이름 짓는 게 생각보다 엄청 귀찮다 😑 그리고 안예쁘다.
• styled-components의 장점을 sass로도 충분히 커버가 가능하다.
  아직 sass를 제대로 사용해보지는 않았지만, styled-components의 가장 큰 장점이라고 할 수 있는 props를 이용한 스타일링을 sass의 mixin으로 충분히 대체할 수 있어 보인다.
• 느린 성능을 커버할 만큼 css-in-js의 장점이 와닿지 않는다. 인턴 때에는 별 조사 없이 “리액트에는 styled-components를 많이 사용한다더라~”라고 해서 styled-components를 사용했었다. 그런데 이번에 찾아보니 전체 웹사이트 중에서 css-in-js를 사용하는 웹사이트의 비율은 3% 밖에 되지 않는다고 한다.
• 비즈니스 로직과 스타일이 한 파일 안에 섞여 있는게 바람직하지 않게 느껴진다.

물론 내가 styled-components의 사용 목적을 온전히 이해하고 잘 활용했다고 생각하진 않는다… 그 인턴생활은 정말 주먹구구의 끝이었기 때문에. 다만 엘리먼트 이름 짓는 건 진짜 귀찮았고 스트레스 받았다. -> 사실 이게 가장 큼😡 통일성 없는 네이밍 진짜 싫은데 짓다보면 계속 길어지고 규칙도 사라진다.

 

---

그냥 다들 써서 쓰는 게 아니라 직접 비교해서 결정하니 재밌다. “라이브러리/프레임워크의 본래 용도와 철학을 과연 얼만큼 이해하고 그에 맞게 사용하고 있는가?” 👉 이게 요즘 내 최대 관심사다. 각 도구의 철학을 이해하고 적재적소에 활용할 수 있는 개발자가 되고 싶다는 생각을 한당.