[CSS] 2021년 최고의 CSS 프레임워크 9가지

 

웹은 끊임없이 진화하고 있으며 프론트엔드 개발을 보다 생산적이고 즐겁게 만드는 CSS 프레임워크도 마찬가지입니다.

그들을 사랑하든 싫어하든 CSS 프레임워크는 여기에 있습니다. 프론트엔드 경험이 없는 개발자는 이러한 프레임워크 중 일부를 사용하여 사용자 친화적인 UI를 쉽게 구현할 수 있습니다. 다른 프레임워크는 더 복잡하고 고급 사용자를 대상으로 합니다.

경험 수준에 관계없이 이러한 프레임워크를 사용하면 아름다운 레이아웃을 더 빨리 만들 수 있습니다. 이 컬렉션에서는 시장에서 가장 우수한 CSS 프레임워크를 살펴보고 필요에 따라 올바른 프레임워크를 선택할 수 있습니다.

CSS 프레임워크를 사용해야 하는 이유는 무엇입니까?

목록에 들어가기 전에 CSS 프레임워크가 현대 프론트엔드 개발의 필수적인 부분인 방법과 이유를 이해하는 것이 중요합니다.

CSS 스타일시트는 구성, 유지 및 재사용이 어렵습니다. 사소한 스타일 변경에도 새로운 CSS 규칙을 작성해야 하므로 어느 시점에서 코드가 복잡해질 수 있습니다.

즉시 사용 가능한 클래스는 모든 CSS 프레임워크의 주요 빌딩 블록입니다. 여백, 배경색 등과 같은 HTML 요소에 미리 정의된 스타일 규칙을 적용할 수 있습니다.

일부 프레임워크에는 메뉴, 카드 또는 테이블과 같은 미리 빌드된 구성 요소가 포함되어 있습니다. 이러한 구성 요소를 사용하면 많은 작업 없이 사용자 친화적인 인터페이스를 만들 수 있습니다.

CSS 프레임워크를 사용하면 스타일링 워크플로를 생산적이고 깨끗하며 유지 관리할 수 있습니다. 다음 프레임워크 중 하나를 사용하면 시간을 절약하고 CSS 코딩과 관련된 많은 골칫거리를 피할 수 있습니다.

1. 부트스트랩

Bootstrap을 포함하지 않는 CSS 프레임워크에 대한 대화는 생각할 수 없습니다 . Twitter는 2011년에 개발자가 반응형 웹 디자인에 쉽게 액세스할 수 있도록 프레임워크를 도입했습니다.

그 이후로 이 프로젝트는 최신 CSS를 지원하도록 발전했으며 프론트엔드 생산성을 향상시키는 수많은 기능을 제공합니다. 많은 인기 있는 것들과 마찬가지로 부트스트랩은 약간의 비판을 받습니다.

비판에도 불구하고 프로젝트에서 사용을 고려해야 하는 몇 가지 이유가 있습니다.

부트스트랩을 사용하는 이유

• 가장 인기 있는 프론트엔드 프레임워크: 부트스트랩은 현존하는 가장 인기 있는 오픈 소스 프로젝트 중 하나입니다. 직면한 문제에 대한 솔루션을 항상 찾을 수 있고 거의 모든 종류의 프로젝트에 대한 많은 무료 및 프리미엄 템플릿을 발견할 수 있습니다.
• 완전한 기능: 개발 프레임워크일 뿐만 아니라 바로 사용할 수 있는 수많은 구성 요소가 포함된 사전 구축된 동적 템플릿입니다. 경고에서 모달, 탐색 모음에 이르기까지 거의 모든 것이 기본적으로 지원됩니다. 이를 통해 사전 프론트엔드 경험이 없더라도 모든 개발자가 잘 구성된 페이지를 쉽게 개발할 수 있습니다.
• 사용자 정의 가능: 부트스트랩은 SASS를 사용하여 쉽게 사용자 정의할 수 있습니다. npm으로 프로젝트를 설치하고, 필요한 부분을 가져오고, SASS 변수를 사용하여 거의 모든 것을 사용자 지정할 수 있습니다. SASS를 사용하여 Bootstrap 웹 사이트를 사용자 정의하는 방법을 배우면 개발 시간을 크게 줄일 수 있습니다.
• 성숙하고 지원됨: 많은 소규모 오픈 소스 프로젝트는 작성자가 그만두기로 결정하면 죽습니다. Bootstrap은 원래 Twitter에서 도입했으며 현재 수백 명의 개발자 커뮤니티에서 유지 관리하여 안정적인 릴리스와 장기적인 지원을 보장합니다.

단점

• 재정의하기 어려움 : Bootstrap은 매우 구체적인 디자인과 모양을 제공하므로 다른 스타일을 선택하려는 경우 재정의하기 어렵습니다. !importantCSS 규칙을 광범위하게 사용하기 때문에 기본값을 재정의하는 것이 까다로울 수 있습니다.
• 남용: 사람들이 Bootstrap을 싫어하는 주된 이유는 널리 사용되기 때문입니다. 개발자가 "모든 부트스트랩 웹 사이트는 동일하게 보입니다"라는 문구를 만들 정도로 과도하게 사용되는 독특한 모양을 제공합니다.
• jQuery에 의존: CSS 전용 프레임워크와 달리 Bootstrap 4는 많은 대화형 기능을 위해 jQuery에 의존합니다. 이로 인해 React 또는 Vue와 같은 JavaScript 프레임워크와 함께 사용하는 것이 더 어렵지만 불가능하지는 않습니다. 다행히 곧 출시될 Boostrap 5는 jQuery 종속성을 제거합니다.
• 포함하기 무거움: Bootstrap의 모든 기능에는 대가가 따릅니다. 프로젝트에 포함하기에는 상당히 무겁습니다. 프로젝트의 일부를 가져올 수 있지만 여기에 나열된 다른 프레임워크만큼 가벼우거나 모듈화되지는 않습니다.

추가 정보 / 다운로드 깃허브

2. 재단

Foundation 은 자유를 즐기지만 완전한 기능을 갖춘 프레임워크의 힘을 원하는 숙련된 개발자에게 완벽한 선택입니다.

실제로 Foundation은 CSS 프레임워크가 아니라 프론트엔드 개발 도구 제품군입니다. 이러한 도구는 함께 또는 완전히 독립적으로 사용할 수 있습니다.

Foundation for Sites 는 웹 페이지 생성을 위한 핵심 프레임워크이며 Foundation for Emails 는 모든 장치에서 읽을 수 있는 매력적인 이메일을 만들 수 있습니다. 모션 UI 는 퍼즐의 마지막 조각으로 고급 CSS 애니메이션을 만들 수 있습니다.

Foundation은 많은 오픈 소스 Javascript 및 CSS 프로젝트를 지원하는 회사인 ZURB에서 만들고 유지 관리합니다. 이 프레임워크를 설계하는 데 많은 생각이 들었고 ZURB는 자체 프로젝트에서 이를 광범위하게 사용합니다.

파운데이션을 사용하는 이유

• 일반 스타일: Bootstrap과 달리 Foundation은 구성 요소에 고유한 스타일을 사용하지 않습니다. 다양한 모듈식 및 유연한 구성 요소는 최소한의 스타일을 특징으로 하며 쉽게 사용자 정의할 수 있습니다.
• 완전한 기능: Foundation은 거의 모든 것을 위한 내장 구성 요소와 함께 제공됩니다. 탐색 모음, 여러 컨테이너 유형 및 개발자 친화적인 그리드 시스템이 모두 포함되어 있습니다. Foundation은 또한 개발 팀이나 커뮤니티에서 생성한 미리 만들어진 HTML 템플릿에 대한 액세스를 제공 하여 정확한 필요에 따라 프로젝트를 시작하는 데 사용할 수 있습니다.
• 이메일 디자인: 미학적인 이메일 템플릿은 구축하기가 어렵기로 악명이 높습니다. 이전 이메일 클라이언트를 지원하기 위해 개발자는 1990년대 시대의 HTML 코드를 작성해야 합니다. 이로 인해 반응형 디자인과 같은 최신 기능을 제공하기가 어렵습니다. Foundation for Emails는 이전 버전의 Microsoft Outlook을 포함하여 모든 클라이언트에 대한 반응형 이메일 템플릿을 만드는 데 도움이 될 수 있습니다.
• 애니메이션: Foundation은 내장 효과를 사용하여 전환 및 애니메이션을 만들 수 있는 ZURB의 모션 UI 라이브러리와 쉽게 통합할 수 있습니다. Foundation과 함께 Motion UI를 사용하면 디자인에 생명을 불어넣을 수 있습니다!

단점

• 배우기 어려움: Foundation에는 거의 너무 많은 옵션이 있습니다. 수많은 기능을 가지고 있으며 다른 프레임워크보다 훨씬 더 복잡합니다. 프론트엔드 레이아웃을 개발할 때 많은 자유를 주지만 먼저 모든 것이 어떻게 작동하는지 완전히 이해해야 합니다.
• Javascript에 의존: Foundation의 많은 기능은 jQuery 또는 Zepto를 사용하여 Javascript에 의존합니다. Zepto는 jQuery와 동일한 구문으로 작동하지만 설치 공간이 더 작은 라이브러리입니다. 이로 인해 Foundation은 React 또는 Angular 프로젝트에 적합하지 않습니다. Zepto는 또한 많은 개발자에게 익숙하지 않은 덜 알려진 라이브러리입니다.

추가 정보 / 다운로드 깃허브

3. 부르마

Bulma 는 최신 코드와 독특한 미학을 특징으로 하는 Bootstrap의 훌륭한 대안입니다. 사용하기 쉽고 프로젝트로 가져올 수 있으며 다양한 사전 제작 구성 요소가 함께 제공됩니다.

단순한 구문과 미니멀하지만 미학적인 디자인으로 높은 평가를 받고 있습니다. 칙칙한 웹페이지를 밝고 매력적으로 보이게 하는 프레임워크입니다.

GitHub에 40,000개 이상의 별이 있는 이 도구는 더 이상 틈새 프레임워크가 아니라 고려할 수 있는 힘입니다.

Bulma를 사용하는 이유

• 미적 디자인: 제 개인적인 의견으로는 Bulma가 이 목록에서 가장 보기 좋은 CSS 프레임워크입니다. 깨끗하고 현대적인 디자인으로 제공됩니다. 기본값을 변경하지 않더라도 멋진 웹페이지가 완성됩니다.
• 현대: 기술은 왔다가 사라지며 한때 복잡했던 것이 이제는 단순해질 수 있습니다. CSS의 flexbox 레이아웃 모듈을 사용하면 반응형 레이아웃을 더 쉽게 만들 수 있으며 Bulma는 새로운 원칙을 구현한 최초의 flexbox 기반 프레임워크 중 하나였습니다.
• 개발자 친화적: 프론트엔드 개발자의 목표는 최종 사용자에게 훌륭한 경험을 제공하는 것이지만 Bulma의 제작자는 개발자에게 훌륭한 경험을 제공하는 것을 목표로 합니다. 이를 염두에 두고 Bulma에는 사용하기 쉽고 기억하기 쉬운 명명 규칙이 있습니다.
• 손쉬운 사용자 정의: Bulma의 색상, 패딩 및 많은 기본 속성은 SASS를 사용하여 사용자 정의할 수 있습니다. 이렇게 하면 몇 분 만에 프로젝트의 기본값을 설정할 수 있습니다.
• Javascript 없음: Bulma에는 JavaScript 기능이 포함되어 있지 않습니다. CSS 전용이므로 Vue 또는 React와 같은 Javascript 프레임워크와 쉽게 통합할 수 있습니다.

단점

• 독특한 스타일: Bulma의 독특한 스타일은 양날의 검이 될 수 있습니다. 매우 뚜렷하기 때문에 과도하게 사용하면 Bootstrap의 경우와 같이 매우 유사한 웹 사이트가 될 수 있습니다.
• 덜 완벽함: Bulma는 많은 경우에 Boostrap과 경쟁하지만 접근성 및 기타 엔터프라이즈급 기능에 관해서는 완전하지 않습니다.

추가 정보 / 다운로드 깃허브

4. 테일윈드 CSS

"대부분의 CSS 프레임워크는 너무 많은 작업을 수행합니다." — Tailwind 의 모토는 개발자에게 자유를 제공하는 경량 프레임워크인 이유를 명확하게 설명합니다. 특정 디자인으로 제공되는 것이 아니라 자신의 고유한 스타일을 더 빠르게 구현할 수 있습니다.

CSS 코딩을 거의 불필요하게 만드는 유틸리티 클래스를 제공함으로써 이를 달성합니다. 숙련된 프론트엔드 개발자는 강력한 기능에 반해 프로젝트 전반에 걸쳐 이를 사용합니다.

Tailwind를 사용하는 이유

• Atomic CSS: 요소를 중앙에 배치하거나, ​​유연한 레이아웃을 생성하거나, 특정 텍스트 색상을 사용하는 것은 CSS에서 일반적으로 코딩하는 모든 것입니다. Tailwind는 강력한 유틸리티 클래스를 제공하여 이러한 모든 공통 스타일을 쉽게 구현할 수 있도록 합니다. 이 방법론은 HTML 요소의 클래스가 어떻게 생겼는지 명확하게 설명하는 Atomic CSS라고도 합니다.
  • 예를 들어, <div class="m-1 text-center bg-black">...</div>여백이 1인 요소(예: 작은 여백), 가운데에 텍스트 및 검정색 배경이 있는 요소를 표시합니다.
• 디자인 없음: Tailwind에는 미리 만들어진 구성 요소나 특정 디자인 언어가 포함되어 있지 않습니다. 즉, 기존 스타일을 재정의할 필요가 없으며 맞춤형 디자인을 구현할 때 생산성을 높일 수 있습니다.
• 재사용 가능한 구성 요소: Tailwind에는 사전 설계된 구성 요소가 포함되어 있지 않지만 프로젝트 전체에서 재사용할 수 있는 고유한 사용자 지정 구성 요소를 만들 수 있습니다. 공식 웹사이트에서 시작점으로 사용할 수 있는 몇 가지 구성 요소 예제 를 찾을 수도 있습니다.
• 강력한 PostCSS/SASS 통합: Tailwind를 최대한 활용하려면 이를 설치하고 SASS 또는 PostCSS 프로젝트로 가져와야 합니다. 이를 통해 Tailwind의 모든 기능을 활용하여 보다 효과적인 CSS를 작성할 수 있습니다. @apply당신의 SASS 또는 CSS 코드로 뒷바람에서 구문 "사본"규칙은 여전히 CSS를 작성하지만, 강대국이 시간, 그래서!

단점

• 가파른 학습 곡선: Tailwind는 경험이 부족한 개발자에게 최선의 선택이 아닙니다. 미리 만들어진 구성 요소를 제공하지 않으므로 프론트엔드 기술이 작동하는 방식을 완전히 이해해야 합니다. Tailwind의 학습 곡선은 프레임워크에서 생산적인 구문을 배워야 하기 때문에 다소 가파릅니다.
• 직접 사용 불가: Tailwind는 다른 프레임워크와 마찬가지로 번들 CSS 파일로 프로젝트에 추가할 수 있습니다. 그러나 공식 설치 가이드 에서는 이와 같이 프레임워크를 추가하면 많은 기능을 사용할 수 없고 압축된 버전(27KB 압축 대 348KB 원시)에 액세스할 수 없다고 설명합니다. Tailwind를 최대한 활용하려면 Webpack, Gulp 또는 기타 프론트엔드 빌드 도구를 사용하는 방법을 알아야 합니다.

추가 정보 / 다운로드 깃허브

5. UI킷

UIKit 은 필요한 기능만 가져올 수 있는 모듈식 프론트엔드 프레임워크입니다.

GitHub에 16,000개 이상의 별이 있으며, 쉬운 API와 깔끔한 디자인으로 개발자들이 선택했습니다.

또한 UIKit에는 사용하기 쉬운 페이지 빌더와 함께 WordPress 및 Joomla용 테마 페이지를 제공하는 프로 버전이 있습니다.

UIKit을 사용하는 이유

• 수십 개의 구성 요소: UIKit에는 수십 개의 구성 요소가 포함되어 있어 복잡한 프론트엔드 레이아웃을 구현할 수 있습니다. 여기에는 모든 일반적인 유틸리티 및 구성 요소가 포함되지만 탐색 모음, 캔버스 외부 사이드바 및 시차 디자인과 같은 고급 요소에 대한 액세스를 제공함으로써 더 나아가게 됩니다.
• 확장 가능: UIKit은 LESS 또는 SASS 전처리기를 사용하여 쉽게 사용자 정의하고 확장할 수 있습니다.
• UI 기반 사용자 정의: UIKit은 실시간으로 디자인을 사용자 정의한 다음 SASS 또는 LESS 변수를 프로젝트에 복사할 수 있는 웹 기반 사용자 정의 도구 를 제공합니다 . UIKit의 이 부분은 정말 마술처럼 느껴지고 새로운 프로젝트를 즉시 시작할 수 있도록 도와줍니다.

단점

• 소규모 프로젝트 의 복잡성 : UIKit은 프론트엔드 개발을 깊이 이해해야 하는 복잡한 프레임워크이므로 경험이 부족한 개발자에게는 권장되지 않습니다. 고급 응용 프로그램에는 적합하지만 소규모 프로젝트에는 너무 많을 수 있습니다.
• 소규모 커뮤니티: npm 패키지가 일주일에 27,000번 다운로드되지만 다른 프레임워크만큼 인기가 많지는 않습니다. 답변을 찾거나 UIKit 경험이 있는 사람을 고용하는 것은 Bootstrap이나 Foundation만큼 쉽지 않을 것입니다.

추가 정보 / 다운로드 깃허브

6. 밀리그램

Milligram 은 주변에 긴밀한 개발자 커뮤니티가 있는 미니멀리스트 CSS 프레임워크입니다.

Milligram이 멋진 주된 이유는 인터페이스를 만들 때 깨끗한 상태로 시작할 수 있고 성능과 생산성을 높이도록 설계되었기 때문입니다.

밀리그램을 사용하는 이유

• 미니멀리스트 CSS 프레임워크: Milligram은 설정과 시작이 쉽습니다. 생산성을 높이는 강력한 기능을 제공하지만 압축 시 2KB의 매우 가벼운 무게가 제공됩니다.
• 독단적이지 않음: 다른 프레임워크와 달리 Milligram에는 기본 스타일이 제공되지 않습니다. 사용자 정의 스타일을 구현할 때 목표에 맞지 않는 속성을 재설정하거나 재정의할 필요가 없습니다.
• 배우기 쉬움: 밀리그램은 너무 간단해서 하루 만에 배울 수 있습니다. 공식 문서를 읽는 것만으로도 시작하기에 충분합니다.

단점

• 템플릿 없음: 미리 만들어졌거나 템플릿과 유사한 것을 찾고 있다면 Milligram이 적합하지 않습니다. 그러나 특정 설계를 구현하려는 경우 생산성을 크게 향상시킬 수 있습니다.
• 소규모 커뮤니티: Milligram에는 작지만 긴밀한 커뮤니티가 있습니다. 커뮤니티 지원을 찾는 것은 인기 있는 CSS 프레임워크만큼 쉽지는 않겠지만 Milligram의 단순함은 어쨌든 많은 도움이 필요하지 않을 것임을 의미합니다.

추가 정보 / 다운로드 깃허브

7. 순수

순수 CSS 프레임 워크는 오픈 소스 세계에서 예상치 못한 경쟁자에서 온다 - 야후.

이 마이크로 프레임워크는 모든 모듈이 사용될 때 3.7KB(압축)만 차지하기 때문에 엄청나게 작습니다. 모든 웹 프로젝트에 추가할 수 있는 재사용 가능하고 반응이 빠른 CSS 모듈을 제공합니다.

퓨어스토리지를 사용하는 이유

• Tiny: CSS의 모든 라인은 프레임워크를 가볍고 성능 좋게 만들기 위해 신중하게 고려되고 작성되었습니다.
• 사용자 정의 가능: 모듈 방식으로 Pure를 가져와 필요한 것만 구현할 수 있습니다.
• 잘 지원됨: 커뮤니티 프로젝트와 달리 Pure는 Yahoo에서 지원하므로 프로젝트를 장기간 사용하기에 안전한 선택입니다.
• 기성 구성 요소: Pure는 최신 웹용으로 제작된 반응형 구성 요소와 함께 제공됩니다.

단점

• 숙련된 개발자의 경우: 퓨어스토리지는 프레임워크를 사용하기 위해 자신만의 디자인을 만들어야 하므로 경험이 부족하거나 소규모 팀에는 적합하지 않습니다.

추가 정보 / 다운로드 깃허브

8. 타키온

Tachyons 는 고급 유틸리티 클래스를 포함하고 이를 사용하는 수십 가지 방법을 제공하는 덜 알려진 CSS 프레임워크입니다.

프로젝트 문서는 개발 원칙을 설명하며 가장 중요한 것은 재사용 가능성입니다. Tachyons는 프로젝트의 디자인 패턴을 이해하는 데 도움이 되며 프로젝트 전체에서 재사용성을 촉진합니다.

타키온을 사용하는 이유

• 바로 사용할 수 있는 구성 요소: Tachyons는 생산성을 높이기 위해 뛰어난 유틸리티 클래스를 제공하는 데 중점을 두고 있지만 공식 문서에는 바로 사용할 수 있는 구성 요소도 많이 포함되어 있습니다.
• 다양함: Tachyons는 정적 HTML, Rails, React, Angular 등과 같은 다양한 설정에서 사용할 수 있는 기능 템플릿을 제공합니다.
• 재사용 가능: Tachyons는 확장 가능한 설계 시스템을 만드는 데 탁월한 선택입니다. 이러한 시스템은 일반적으로 점점 더 많은 변형이 나타나기 시작하기 때문에 확장됨에 따라 중단됩니다. 이 프레임워크를 사용하면 재사용 가능한 속성을 만들어 다양하고 유연한 구성 요소를 만들 수 있습니다.

단점

• 주로 PostCSS용: Tachyons를 사용하는 주요 방법인 PostCSS는 LESS 또는 SASS만큼 널리 사용되지 않습니다. Tachyons는 SASS와의 통합을 제공하지만 널리 사용되고 지원되지는 않습니다.

추가 정보 / 다운로드 깃허브

9. CSS 구체화

머티리얼 디자인은 많은 웹사이트와 관리 테마에서 선택하는 디자인 언어입니다. Google에서 개발했으며 프로젝트 전반에 걸쳐 사용됩니다.

Materialise CSS 는 자신의 프로젝트에서 머티리얼 디자인 룩앤필을 쉽게 구현할 수 있게 해주는 오픈 소스 CSS 프레임워크입니다.

개발 속도를 높이고 사용자에게 훌륭한 경험을 제공하는 데 도움이 되는 많은 대화형 구성 요소가 있습니다. 애니메이션은 개발자가 작업하기 쉬운 방식으로 사용자에게 시각적 피드백을 제공하기 위해 프레임워크 전체에서 사용됩니다.

Materialise를 사용하는 이유

• 머티리얼 디자인: 이 디자인 언어는 널리 사용되며 사람들에게 익숙합니다. 이렇게 하면 대상 고객이 자신의 창작물을 쉽게 사용할 수 있습니다.
• 완전한 기능: Materialize CSS에는 거의 모든 것에 대한 사전 제작 구성 요소가 포함되어 있지만 상호 작용을 지원하는 고급 Javascript 기능도 함께 제공됩니다.
• 모바일 친화적: 플로팅 탐색 모음 및 스와이프 상호 작용과 같은 프레임워크의 모바일과 유사한 구성 요소를 사용하여 프로그레시브 웹 앱을 만들 수 있습니다.

단점

• 엄격한 디자인 언어: 머티리얼 디자인에 가깝지 않은 작업을 하고 싶다면 Materialise를 피하는 것이 좋습니다.
• 독립 프로젝트: Materialise에는 활발한 커뮤니티가 있지만 기업 지원이 없는 소규모 독립 프로젝트입니다.

추가 정보 / 다운로드 깃허브

최고의 CSS 프레임워크는 무엇입니까?

이 목록에 있는 모든 CSS 프레임워크는 어떤 식으로든 생산성을 높이는 데 도움이 됩니다.

Bootstrap , Bulma 및 Materialize 와 같이 더 많은 기능과 미리 만들어진 구성 요소를 포함하는 것들은 경험이 덜한 프론트엔드 개발자에게 더 적합합니다.

Tailwind , Milligram 및 Pure 와 같이 유틸리티 클래스만 제공하고 스타일 지정은 제공하지 않는 프레임워크는 숙련된 개발자에게 적합합니다.

나는 우리 대부분이 새로운 프레임워크를 지속적으로 배우고 싶어하지 않는다고 가정합니다. 기술에서 새로운 것을 적용하고 배우는 것은 피할 수 없지만 이상적으로는 우리가 사용하는 프레임워크가 복잡성을 학습하는 것을 정당화할 만큼 충분히 오래 관련성을 유지해야 합니다.

대규모 커뮤니티가 프로젝트를 지원하고 새로운 아이디어가 지속적으로 크라우드소싱되기 때문에 Bootstrap 또는 Foundation 과 같이 커뮤니티 지원 수준이 높은 프레임워크를 선택하는 것이 안전한 선택입니다.

그러나 반면에 많은 프레임워크가 시간이 지남에 따라 부풀려지기 때문에 더 새롭고 더 나은 옵션이 등장하기 시작합니다. Tailwind 와 Milligram 은 작은 크기와 매우 구체적인 기능 집합을 유지하면서 코딩 생산성 향상에 중점을 두는 훌륭한 예입니다.

작은 위험을 감수하고, 새로운 기술을 배우고, 약간의 불완전성을 받아들이는 것이 편안하다면 새로운 프레임워크가 매우 유망합니다. 그리고 그들은 점차 성숙해지기 위해 당신의 지원을 기대하고 있습니다.

장기적인 솔루션을 찾고 있고 엔터프라이즈 기능이 필요한 경우 성숙한 기술을 사용하는 것이 최선의 선택이 될 것입니다.

웹에는 많은 CSS 및 JavaScript 트렌드가 있지만 곧 사용되지 않을 프레임워크를 사용하지 않도록 항상 성숙도와 커뮤니티 지원을 고려해야 합니다. 이 목록을 자신의 판단 및 개인 취향과 함께 사용하여 가장 적합한 CSS 프레임워크를 결정할 수 있습니다.

출처 : https://athemes.com/collections/best-css-frameworks/