CSS 프레임워크(CSS framework)는 CSS(Cascading Style Sheets) 언어를 사용하여 더 쉽고 표준을 준수하는 웹 디자인을 가능하게 하는 라이브러리이다. 웹 개발 과정에서 반복적으로 사용되는 스타일 규칙과 레이아웃 구조를 미리 정의해 두어, 개발자가 처음부터 모든 스타일을 작성하지 않고도 일관된 디자인과 반응형 웹 페이지를 빠르게 구축할 수 있도록 돕는 도구 모음이다.
대부분의 CSS 프레임워크는 적어도 하나의 그리드(grid) 시스템을 포함한다. 더 기능적인 프레임워크는 추가적인 특징과 자바스크립트 기반 기능을 제공하기도 하지만, 대개 디자인 지향적이며 대화형 UI 패턴에 초점을 맞춘다. 이러한 세부 사항은 CSS 프레임워크를 다른 자바스크립트 프레임워크와 구별 짓는 요소이다.
CSS 프레임워크가 제공하는 대표적인 모듈과 도구는 다음과 같다.
- 초기화 스타일 시트(reset style sheet)
- 특히 반응형 웹 디자인을 위한 그리드
- 웹 타이포그래피
- 스프라이트나 아이콘 폰트 형태의 아이콘 세트
- 말풍선, 버튼, 폼 요소의 스타일링
- 아코디언, 탭, 슬라이드쇼 또는 모달 윈도(라이트박스)와 같은 그래픽 사용자 인터페이스의 일부
- 동일한 높이의 콘텐츠를 만들기 위한 이퀄라이저
- 자주 사용되는 CSS 헬퍼 클래스(left, hide 등)
더 큰 프레임워크들은 Less나 Sass와 같은 CSS 전처리기(preprocessor)를 사용하기도 한다.
주요 CSS 프레임워크로는 부트스트랩(Bootstrap), 파운데이션(Foundation), 테일윈드(Tailwind CSS), 블루프린트(Blueprint), YAML, YUI CSS 그리드 등이 있다. 이 중 부트스트랩과 파운데이션은 널리 사용되는 대표적인 예로 꼽힌다. 부트스트랩은 12칸 기본 그리드, 타이포그래피, 폼, 버튼, 내비게이션, 미디어 쿼리, 자바스크립트 라이브러리 등을 포함하며 MIT 라이선스로 배포된다. 테일윈드 CSS는 유틸리티 우선(utility-first) 방식의 프레임워크로, 미리 정의된 클래스를 조합하여 커스텀 UI를 신속하게 구축하는 데 중점을 둔다.
CSS 프레임워크의 활용은 개발 속도 향상, 일관된 디자인 유지, 반응형 웹 디자인 구현 용이성 등의 장점을 제공하는 반면, 프레임워크에 대한 의존성이 생길 수 있고, 불필요한 코드가 포함되어 파일 크기가 커질 수 있다는 단점도 지적된다.
