상현

회사마다 스타일이있다

( 업데이트: )

By

내가왜 tailwindcss에 열광하고 미쳤었나?

“내가왜 tailwindcss에 열광하고 미쳤었나?”, “회사마다 스타일이있다” 두개가 무슨상관일까?

저에게 기술 선택에있어서 사용자경험, 개발자 경험은 중요했습니다. 거기서 저는 왜 tailwindcss가 좋은지를 납득되도록 설명하지 못했습니다. 몸으로 알고있지만 설명하는 것은 조금 어려웠습니다. tailwindcss말고도 다른 것으로도 동일하게 구현은 가능했으니까요

저는 예전에 BEM에 의존하면서 BEM을 좀더 손쉽게 작성할수있도록 도와주는 sass, less에 열광했습니다.

그런데 BEM을 왜 사용하는가?

  • BEM은 CSS 코드를 구조화합니다.
  • 전역적으로 적용되는 CSS에서 무엇을 하는지 의미를 알 수 있는 클래스로 적용 범위 누수를 제거합니다.
  • 우연히 다른 클래스와 이름이 같아지는 가능성을 제거하고 중첩을 줄입니다.

BEM으로 구성을 전부 만들어주는 대신 한번에 많은 스타일을 적용합니다.

<!-- Bootstrap, BEM -->
<div class="card">
    <div class="card__header">Header</div>
    <div class="card__body">body</div>
    <div class="card__footer">footer</div>
</div>Code language: HTML, XML (xml)
<!-- tailwindcss -->
<div class="grid">
    <div class="px-4 font-bold text-10">Header</div>
    <div class="px-4 prose max-w-none">body</div>
    <div class="px-4 mt-4">footer</div>
</div>Code language: HTML, XML (xml)

두 코드는 비슷해 보이지만, BEM 방식은 이미 정의된 스타일 때문에 커스텀하기 어렵다는 단점이 있습니다. 그래도 제작자의 의도를 손대지 않고 사용할 수 있다는 점에서 괜찮다고 생각하지 않을까요?

하지만 디자인을 마음대로 손쉽게 커스텀할 수 있는 점에서 차이가 있습니다. 후자가 커스텀하기 쉽습니다.
그게 왜 중요한가요?

  • 원하는 방식으로 디자인 할 수 있어 좋습니다.
  • 개발자로서 시안에 최대한 가깝게 작업을 할 수 있습니다.
  • 복잡하고 어지럽게 css 코드를 작성하지 않아도된다.

tailwindcss를 사용하면 위에 단점들을 해결하고 HTML 마크업과 CSS 사이의 책임을 깨지 않고 BEM에 의존하지 않고 작업할 수 있게됩니다.

이렇게 두가지를 다 경험해 본저는 tailwindcss에 미쳐있었습니다. 생산성이 정말 미쳤었거든요. 그래서 모든것을 tailwindcss로 바꾸려했습니다.

하지만 제게 좋다고해서 모두에게 좋은 것은 아니었습니다. 그것을 이번에 깨닫게되었죠. 아임웹에서 저는 심술난 모난 돌이었던것 같습니다. 이제부터라도 저는 아임웹의 방식에 맞게 새롭게 작업해보려합니다.

커뮤니케이션도 확실하게 하고요!

아임웹에 맞는 작업 방식, 태도를 배우게되었습니다

저는 오랜기간동안 혼자일하면서 배워왔던 환경과 생각이 굳어버린거같습니다. 다시 말랑말랑해질수있는 기회가 되었습니다. 🫠

이전 글
다음 글