css 작성 요령 질문

Question

안녕하세용.리액트 써본지 얼마 안된 뉴비입니다.HTML, css 로 작업할 때는 모든 내용을 css 파일에다가 작성했는데,간단한 것들은 인라인으로 작성한다는 내용을 봤습니다.실제로 그렇게도 많이들 쓰시는 지 궁금하네용.리액트에선 컴포넌트 쓸 때 외부에서 넣어주는 className 적용되게 해줘야하고,css 적용시킬땐 또 style.xxx 이런 식으로 적어줘야 하다보니까 귀찮았는데인라인으로 하면 간편할거 같긴 하지만, 보기는 또 안좋을 거 같아서 고민 중입니다.인라인으로 많이들 쓰시나용?그리고 tailwind 도 많이들 쓰시는 지 궁금합니다.

RWB · Answer

inline style은 정말 답이 없는 경우가 아니면 지양하는 것이 좋습니다.inline style은 유지보수는 물론 확장성 측면에서도 매우 좋지 않습니다. 또한 우선순위가 매우 높기 때문에, inline style 보다 우선하여 스타일을 먹이고 싶은 경우, !important 말곤 답이 없기 때문에, 문제가 생기기도 합니다.만약 inline style에 !important가 박혀있다면 해당 스타일을 바꾸는 건 매우 어렵다고 보시면 됩니다.이건 실제로 CSS를 다루다 보면 와닿게 되실겁니다.근래의 AI 발전과 더불어 TailwindCSS의 특성이 여기에 잘 부합해 근래에 많이 쓰이는 추세입니다.스타일 라이브러리라면 Emotion, styled-components, TailwindCSS 등 여러가지가 있는데 그 중 TailwindCSS는 className에 작성한다는 특징 덕분에 import 구문도 필요 없이 단순한 복붙만으로도 코드를 구현하는데 매우 용이합니다.이러한 특성 때문에 AI에서도 많이 사용하는 편입니다.또한 모던 웹의 주요 요소 중 하나인 SSR, CSR, RSC 등의 개념 모두에 대응 가능한 대표적인 디자인 라이브러리기도 합니다.예전에 많이 쓰던 Emotion, styled-components들은 전적으로 CSR 위주이기 때문에, 제약사항이 매우 크다는 단점도 있구요.

몰랑토끼 · Answer

tailwind도 인라인스타일과 다를바가 없습니다. 다만 살짝 줄여줄뿐이죠. 지금쓰시는 방식은 module.scss로 추적에도 용이하며, classname을 중복되게 써도 중복적용이 되지 않는 장점이 있어서 가장 기본적으로 쓰지만 동적인 대응엔 약한 단점이 있습니다. 그럴때는 tailwind나 styled를 혼합해서 쓰기도 합니다. tailwind만으로 쓰게된다면 inline 처럼 버튼 하나에 몇줄이 들어갈수도 있고, 오히려 반복적이지 않은 렌더링에서는 배로 작성속도가 느려집니다. tailwind의 네이밍은 규칙적이지도 않고, 모든 css를 지원하지도 않아서 + 나 ~는 지원하지도 않고 invalid 는 다르게 써야하는등 장점보단 단점이 많아 앞서 말한것처럼 혼합용도 쓰는게 가장 적절합니다.

ExpoProvider · Answer

'디자인 시스템' 이라는 영역에 들어가서 디자인을 분석하면 많은 게 보이게 될 겁니다.여기 이 동네는 정말 수치도, 부끄러움도 모르는 사람들이 아무 말이나 막 하고 있는데, 진짜 한심하게 보입니다.다크모드/라이트모드 만 해도, 디자인 시스템이 도입되어야만 할 가장 기본적인 이유가 되죠.거기에, 액센트 컬러, 브랜드 컬러를, 라이트모드와 다크모드에 어떻게 적용해줘야 할지 룰셋을 정하기 어렵잖아요?디자인 시스템 이란 '일관성' 이에요. 일관성 없는 친구는 다시 만나고 싶지 않습니다.이를테면, 프로젝트에서 spacing 에서도 일관된 서전정의 변수만을 사용하는 것이죠. 모든 디자인 요소에서 사전 정의된 디자인 상수/변수, 유틸리티 클래스 만을 사용하도록, 프로젝트 규칙을 못박아두는 것입니다. 이렇게 규칙을 유지한다면, 프로젝트의 디자인이 삐꾸나는 일은 없습니다.      <Pressable        className="items-center bg-primary dark:bg-primary-dark py-md rounded-lg"      >모든 디자인 속성이 사전 정의된 config 에 정의되어 있습니다. 디자인 시스템에 의해 제어되고 있습니다.Tailwind 없이는 디자인의 유지 비용이 늘어날 수 밖에 없습니다. '디자인 시스템' 이라는 키워드를 좀 더 dig 해보세요.

css 작성 요령 질문

3개의 답변

Q&A 목록