여러분의 회사에서는 어떤 CSS 라이브러리를 사용하시나요?

이번 새로운 프로젝트에서는 styled component @emotion 을 사용하는 것으로 결정되어 사용중에 있습니다. 기존에는 sass 모듈 방식을 사용하였으나 css in js 방식의 다루기 쉬운 방식과 기존 멤버들의 취향으로 결정이 되었습니다. 저는 둘다 좋다고 생각해서요 ㅎ 최근에는 styled component 에서 중복으로 나오는 css 코드를 변수화해서 관리하려고 계획중입니다. 비슷한 코드를 치는 것 만큼 지루한 일은 없어서 좀 더 추상화 하여 재사용성을 올리는 법도 생각중인데 이런 측면에서는 확실히 styled component 가 좋다고 생각이 드네요

저는 tailwindcss + clsx 혹은 tailwindcss + twin.macro 조합을 선호합니다. 이 방식은 tailwind의 장점과 emotion, styled-components의 장점을 최대한 활용할 수 있는 방법 중 하나라고 생각하고 있습니다.

그냥 프로젝트에 맞게 만들어서 씁니다. react 를 쓴다면 styled js , emotion을 쓰는게 답이라고 생각듭니다.

Q. 회사에서 어떤 CSS 라이브러리를 사용하고 계시며 장점과 단점을 알려주실 수 있나요? tailwindcss를 사용 중입니다 :) #장점 - 클래스명의 네이밍 고민의 시간이 거의 없습니다. - 스타일 관련 파일 관리에 대한 부담이 줄어든다고 느꼈습니다. #단점 - className이 길어지만 가독성에 영향을 미쳤습니다. - className을 props로 받을 때 string 타입으로 정의하면 의도가 명확하지 않아서 버그가 발생하기도 했습니다. Q. 반응형 웹사이트와 유지보수의 관점에서, 어느 css 라이브러리를 선택하는 것이 좋을까요? tailwindcss가 가장 적합하다고 생각합니다 :) 위에서 설명한 단점을 보완하는 방법이나 툴이 있기 때문에 경험적으로 봤을때 가장 좋다고 느꼈습니다.

웹 개발 프로젝트를 선택하는 것은 매우 중요한 결정이며, 프로젝트의 성격, 필요성, 팀원의 경험 등 여러 요인을 고려해야 합니다. 다양한 CSS 라이브러리가 있지만, 주로 사용되는 몇 가지를 소개하겠습니다: 1. Bootstrap: 가장 널리 사용되는 CSS 라이브러리 중 하나로, 반응형 그리드 시스템, 미리 정의된 컴포넌트, jQuery 기반의 자바스크립트 플러그인 등 다양한 기능을 제공합니다. 유지보수가 쉽고 문서화가 잘 되어 있지만, 때때로 부트스트랩의 디폴트 스타일로 인해 사이트가 독특함을 잃는다는 비판도 있습니다. 2. Tailwind CSS: Tailwind는 저수준의 유틸리티 기반 CSS 프레임워크로, 컴포넌트를 빠르게 구축할 수 있도록 도와줍니다. Tailwind를 사용하면 매우 유연하게 스타일링을 할 수 있지만, 처음에는 클래스 이름이 복잡해 보일 수 있습니다. 그러나 이는 시간이 지나면서 익숙해질 수 있으며, 설계 시스템을 구축하거나 맞춤형 디자인을 적용하는 데 매우 유용합니다. 3. Material-UI: Google의 Material Design을 기반으로 하는 React 컴포넌트 라이브러리입니다. 고급스러운 디자인과 다양한 컴포넌트를 제공하며, 커스텀 스타일링도 가능합니다. 그러나 사용자 정의가 필요한 경우 상당히 복잡해질 수 있습니다. 4. Styled-components: CSS-in-JS 라이브러리로, CSS를 자바스크립트 파일 안에 직접 작성할 수 있습니다. 이 라이브러리는 동적 스타일링을 쉽게 할 수 있게 해주며, CSS와 자바스크립트의 경계를 흐리게 합니다. 이 접근법은 일부 개발자들에게는 매력적이지만, 다른 개발자들에게는 부담스러울 수 있습니다. 이렇게 각 라이브러리에는 자신만의 장단점이 있으니, 프로젝트 요구 사항과 팀원들의 기술적 역량 등을 고려하여 최적의 선택을 내리시는 것이 좋습니다.