CSS 좋아 하세요?

이번에 샤부샤부스터디 주제로 “내가 선호하는 CSS 전략과 클래스 네이밍 방식” 가 선정 되었다! 그래서 내가 쓰는 css를 간략하게 소개해보려고 한다.
친절하게 이번주 스터디 대장님이 아래와 같은 틀도 만들어 주셨다.

📌 내가 선호하는 CSS 방식은?

제 최애는 Tailwind CSS입니다!
CSS, styled-components, CSS Modules, Vanila-extract를 사용해 봤는데 Tailwind CSS가 가장 직관적이었다.
특히 스타일을 적용하기 위해 다른 파일을 찾지 않아도 돼서 나한테 딱 맞았다.

📌 선호하는 이유 (장점과 단점)

✅ 장점

1. 클래스로 직관적인 스타일링 가능하다.
2. 스타일을 확인하기 위해 파일을 이동하거나, 파일내부에서 위 아래로 가지 않아도 된다.
3. 별도의 css파일을 만들거나 변수를 할당해서 사용하지 않아도 된다.
4. config에서 편하게 theme를 만들어 관리할 수 있다.
5. 빌드시 사용하지 않는 스타일은 제거되어 파일 크기를 줄일 수 있다.

❌ 단점

1. html태그 쪽이 클래스가 길어질수록 지저분할 수 있다.
2. 초반 학습곡선이 높다.
3. 디자인 시스템을 최소한으로라도 맞추지 않으면 중복 작업이 많을 수 있다.

📌 내가 사용하는 클래스 네이밍 전략은?

따로 사용하는 클래스 네이밍 전략은 없고 Tailwind CSS에서 사용하는 방식을 사용한다.

📌 이 네이밍 전략을 선호하는 이유는?

네이밍 전략은 따로 없기에, Tailwind CSS를 사용경험은 나에게는 너무 좋았다.
이미 CSS를 어느정도 할 수 있었기 때문에, 학습곡선도 낮았고 스타일링이 바로바로 된다는 점이 너무 매력적이었다.

그리고 디자인 시스템을 만들때도 config에서 작업하면 되니 나에게는 최고의 선택이었다.
물론 맞지 않는 사람들에게는 className이 지저분해지는 그런 방식일 뿐인게 아쉬웠다.
그 사람들을 설득 하지 못했던 것도 어쩔 수 없다고 생각한다.

그런데, 용납할 수 없었던 부분은 className 지저분 하다면서 inline-style로 직접 스타일을 적는 사람은 아직도 용서할 수 없다.