뒤로
준프
·
CSS의 적절한 사용이란?
이런저런 아티클을 읽다보면 가끔 좋은 글들을 발견하곤 하는데요, 그런 글이 있다면 공유할 수 있도록 하겠습니다 !
이번에 공유하려고 하는 아티클은 'atomic CSS의 깨어진 약속'이라는 아티클입니다. 주요 내용은 atomic CSS에 대한 비판이지만 사실 조금 더 광범위한 내용이 담겨있습니다. 아래에 요약을 적어둘텐데요, HTML과 CSS를 사용하시는 데 있어서 한 번쯤 고민해보시면 좋겠습니다.
- 페이지를 구성하는 데 HTML과 CSS의 역할 - 의미론적 문서 구조와 표현
- 이러한 분리를 달성하기 위해 CSS는 HTML의 수정하지 않는 요소와 요소의 집합을 설명하는 풍부한 문법을 제공합니다. 이건 HTML 문서를 변경하지 않고 CSS 파일만 바꿈으로써 완전히 다른 모습의 문서를 보여 줄 수 있다는 걸 의미합니다.
- 클래스 기반 CSS는 클래스를 요소 선언의 라벨로 사용합니다. 이건 객체지향의 상속처럼 스타일을 재사용하도록 합니다. (조금 어렵게 다가올 수 있지만, HTML과 CSS의 결합을 의미합니다.) 그리고 이건 많은 문제를 일으킵니다.
- 이 문제들을 해결하기 위해 BEM, atomic CSS 등이 등장합니다. 그리고 컴포넌트 기반 코드에서 CSS 모듈과 CSS-in-JS 등과 같은 scoped CSS가 등장합니다. 모두 클래스 기반 CSS 입니다.
- 클래스 기반 CSS는 HTML과 CSS의 강한 결합을 유도합니다.
아주 간단한 예시도 나오는데, 한 번 살펴보는 것도 정말 좋을거 같습니다 :)
많은 의견 환영입니다 :)
The broken promise of atomic CSS
The (not so) hidden cost of atomic CSS
https://medium.com/@hayavuk/the-broken-promise-of-atomic-css-4d3de5e25886
프론트엔드 개발자들
그룹의 글
0
댓글
로그인 후 댓글을 남길 수 있습니다.
ㅜ_ㅜ. 아마도 우아한 코드를 지향하는 사람이라면, atomicCSS 계통의 문제 해결방식이 맘에 안들 수 있을 것 같습니다. 방금 테일윈드 깃헙에 들어가보니 어느덧 스타가 69.4k에 도달했네요...! 저도 테일윈드가 코드의 결합도를 높이고있다고 생각합니다. atomic계통은 사람마다 다른 개발자경험을 주고 있기에 극명한 호불호를 만들고 있는 것 같습니다. 그럼에도 불구하고, 테일윈드를 시간이 지날수록 더 많은 사람들이 쓰는 이유는 있다고 생각해요. 저는 그중 하나는 인지부하 절감이라고 생각합니다. 결합도를 낮추고 응집도를 올리는 코드는 간결한 만큼 시간이 걸리고 고민하는 만큼 뇌에 스트레스를 줍니다. 이런면에서 테일윈드는 작성에 고민이 덜기도 하는 것 같습니다. 저는 간결하지 않지만 이해하기에 어렵지 않고, 시간이 적게 걸리는 가성비있는 코드를 상업성코드라고 불러요.(저만 그렇게 불러요 ㅋㅋ) 그렇다고 테일윈드가 코드 안정성 면에서 해를 끼치지 않기때문에 kentcdodds같은 유명한 분들도 애용하시는 것 같다는 생각이 듭니다. 저도 극초기 스타트업에 있으면서 css에 대한 고민을 많이 했었는데요. css variable을 잘 사용하는 css코드를 설계하고 싶어서 'vanilla extract'를 초기에 도입했다가 가성비면에서 tailwind를 이기기 어려워서 지금은 tailwindcss를 사용하고 있습니다. 테일윈드를 무자비하게 클래스 드리븐으로 작성하기보다는 classnames 라이브러리를 이용해서 의미있게 작성도 가능하고 css variable을 이용하면 재사용가능한 코드도 작성이 가능합니다! 워낙 커뮤니티도 거대해서 이점을 많이 보고 있습니다. 레퍼런스로 남겨주신 블로그의 개발자분처럼 저도 느낀적이있어서 한번 제 의견을 남겨 보았습니다!
공감합니다 ! 문제가 없는 도구는 없다고 생각해요. tailwind는 몇몇 문제를 갖고 있지만 사실 tailwind 만의 문제는 아니고, 또 사용하기에 편리해서 많은 사람이 사용하는 게 아닐까 합니다 !
준프님 메이커로그가 Must Reads 198에 선정되었어요! https://stib.ee/Jmt7
와 감사합니다 !