최고의 CSS 프레임워크(best-css-frameworks)

발행일: 2025년 10월 01일 16:04

거의 부트스트랩을 많이 쓰고 있고 참고 자료도 많아 다른 CSS 프레임워크를 살펴볼 기회가 없었는데 의외로 종류가 많네요.
목적에 맞게 선택해 적용해보면 좋을것 같습니다.아쉽게도 본인이 애호하는 simple.css나 pico.css는 없네요.

1. General-Purpose (범용)
가장 일반적이고 기능이 풍부하며, 완벽한 UI 컴포넌트와 사전 정의된 클래스를 제공하는 프레임워크입니다.

가장 많이 쓰이고 있는 Bootstrap를 포함해서 Bulma, Foundation, Fomantic UI, Blaze UI, Vanilla Framework 등이 있습니다.

2. Utility-Based (유틸리티 기반)
미리 정의된 컴포넌트 대신, 낮은 수준의 유틸리티 클래스(예: m-4 for margin, flex)를 사용하여 디자인을 조합하는 방식의 프레임워크입니다.

최근 각광받고 있는 Tailwind를 포함해서 Open Props,Tachyons,Materialize 등이 있습니다.

3. Lightweight (경량)
파일 크기가 작고 필수적인 기능만 제공하여 로딩 속도가 빠르며, 프로젝트에 부담이 적은 프레임워크입니다.

Pure를 포함해서 Miligram, Chota, Spectre, Skeleton 등이 있습니다.

4. Class-Less (클래스리스)
HTML 태그 자체에 스타일을 적용하며, 별도의 CSS 클래스(예: <sapn class="normal">)를 사용하지 않아 HTML 마크업을 건드리지 않고 디자인을 개선하는 데 중점을 둡니다.

Water, MVP 등이 있습니다.

5. Specialized (특수/전문)
특정 목적이나 생태계(Ecosystem)에 맞게 특별히 제작된 프레임워크입니다.

많이 언급되는 UI Kit를 포함해서 Gutenberg,Bojler 등이 있습니다.

출처 : https://hackr.io/blog/best-css-frameworks

내 북마크