Обзор CSS библиотек.
Статья от 13.07.09 в категории CSS
В данный момент CSS является основой современной вёрстки, и время, которое верстальщик тратит на разработку CSS стилей увеличивается с каждым днем. И сложность CSS стилей будет расти с прогрессом веб-технологий браузеров. Для того, чтобы облегчить труд веб-разработчика были придуманы CSS библиотеки.
CSS библиотеки (или фреймворки) предназначены для предоставления готовых решений для различных задач, которые разработчик решает при вёрстке каждого дизайн-макета, например присвоения свойствам начальных значений (reset), модульные сетки, плавающие блоки, всевозможные хаки, обыденный clearfix . CSS библиотека это, своего рода, отправная точка в написании CSS-стилей. И, что самое главное, использование библиотек существенно сокращает время вёрстки дизайн-макета, что неоднократно было проверено мной на практике.
Зачем использовать CSS библиотеки?
Не нужно использовать их только ради того, чтобы их использовать. Ничего особо крутого в этом нет. CSS библиотеки созданы в первую очередь для того, чтобы избежать рутины при написании стилей, не писать одни и те же строчки из проекта в проект. Кроме того, при использовании библиотек ваши стили будут более понятны. Плюс к тому большинство библиотек написаны экспертами в области CSS и достаточно хорошо протестированы.
Недостатки
К сожалению у CSS библиотек есть и недостатки, которые вы должны знать. Вот некоторые из них:
- Ваши стили будут зависеть от библиотеки.
- Требуется знать основы той или иной библиотеки, чтобы её использовать. Ничего страшного – разберётесь.
- Библиотеки писали люди, следовательно они могут содержать ошибки. В этом случае вы убьёте уйму времени на поиск ошибки в своих стилях.
- Вы не будете использовать все возможности библиотеки в своей вёрстке. То есть вы будете подгружать к странице лишние килобайты.
Виды CSS Библиотек
CSS библиотеки можно разделить на два вида: полные и ограниченные.
- Полные CSS библиотеки
Этот тип библиотек охватывает большинство из того, чтобы может понадобиться разработчику. Такие библиотеки являются своего рода базой. - Ограниченные CSS библиотеки
Они выполняют конкретные задачи, например reset.css “сбрасывает” стили.
Существует и третий вариант – ваша собственная CSS библиотека, такие есть у многих профессиональных студий веб-дизайна.
Далее я приведу список практически всех CSS библиотек, которые были когда-либо созданы.
Полные библиотеки
Очень популярная на западе CSS библиотека, она поддерживает различные модульные сетки, сброс, стили для типографики, форм и печати. А также содержит стили для кнопок и вкладок.
YAML содержит базовые стили, стили для печати, контента, навигации, форм, а также хаки для IE.
Эта библиотека часть Yahoo YUI Library. Она включает в себя стили для вёрстки макетов с различной шириной отцентрованного контейнера и поддерживает двух, трех или четырех-коллонные макеты. Также содержит CSS для “перезагрузки”, базовые стили и стандартный набор шрифтов.
Содержит стили для 12- или 16-колонных модульных сеток, с шириной контейнера 960px. А также CSS для перезагрузки и стили для оформления текстов.
Поддерживает 24-коллонную модульную сетку и содержит CSS для печати, типографики и форм.
Лёгкая CSS библиотека, поддерживает три различных модульные сетки, содержит стили для типографики. Стоит отметить что, в этой библиотеке единица измерения – EM.
Очень прогрессивная библиотека. Основана на принципах объектно-ориентированного подхода к написанию CSS. (кто-нибудь знает как это так?). Она основана на % вместо px. За основу были взята библиотека YUI CSS.
Поддерживает 4-ех колонные макеты, легко реализует фиксированную и “резиновую” вёрстку. Также содержит CSS для “перезагрузки”, базовые стили и типографику.
Лёгкая библиотека, поддерживает 6 или 12-ти колонную модульную сетку и содержит CSS для “перезагрузки” и типографики.
Ограниченные CSS библиотеки
Нацелена на приведение браузеров к веб-стандартам. Ваши стили начитают работать одинаково во всех браузерах. Неплохая база для вёрстки.
Реализует вертикальный ритм для всех элементов в 18px.
Лёгкая библиотека, поддерживает основные модульные сетки.
Разработана для поддержки пользовательских виджетов jQuery.
Набор стилей для ряда элементов веб-страницы.
Кроссбраузерная реализация выпадающего меню.
Как видно из названия, содержит стили для печати.
Содержит стили для вёрстки форм и контейнеров.
Другие CSS библиотеки
Следующие библиотеки находятся в разработке, экспериментальные, недостаточно документированные, либо заброшены.
Если я вдруг забыл упомянуть о какой-либо CSS библиотеке, напишите о ней в комментариях.
upd: Русский css-фреймворк – css-framework.ru
16/07/09 в 15:04
Вы забыли о русском CSS-фреймворке – css-framework.ru!
23/07/09 в 21:36
[...] CSS-библиотеках я уже писал в своей статье. Суть здесь в том, что из проекта в проект вы, зачастую, [...]