Разработка любого сайта обычно состоит из нескольких общих этапов, одним из которых является обязательная верстка основного шаблона, то есть создание на основе изображения дизайнера страницы в формате HTML.

Верстка веб-страницы вполне однотипная задача, поэтому ее можно автоматизировать, что уменьшит сроки разработки веб-сайта и даже сделает его более надежным, путем уменьшения количества ошибок в процессе верстки. Для достижения этой цели используются специальные библиотеки CSS, содержащие определения основных блоков на странице для создания «быстрой» разметки без необходимости самостоятельного просчета различных величин на странице (например, ширины блоков в некогда популярной трехколоночной верстке).

 

Преимущества CSS фреймворков

Разработка страниц с использованием таблиц стилей изначально может быть сложна для начинающих дизайнеров и верстальщиков веб-страниц. Особенно при верстке исключительно блоками (блочная верстка). Сложность разработки будет увеличиваться, если при этом необходимо создать «резиновый» сайт. В таких случаях на помощь приходят CSS библиотеки. Они содержат в себе разметки наиболее популярных расположений контента: в две колонки, в три колонки, с колонтитулами и колонками и т.д. а также наборы разметок для позиционирования практически любого элемента на странице.

Использование CSS фреймворков предполагает создание 100% блочной разметки. А, значит, это современно и качественно. У разработчика больше нет необходимости рассчитывать и прописывать все стили, которые предполагают собой расположение элементов на странице. Все уже заранее находится в простом подключаемом  файле. Если у разработчика уже есть опыт подобной разработки, то такой процесс значительно ускоряется, а, соответственно, стоимость разработки уменьшается. Более того для ускорения можно использовать различные генераторы кода, которые поддерживают требуемые библиотеки.

Очень важным плюсом разработки с использованием фреймворков является повышенная кроссбраузерность проектов на их основе. Ввиду того, что разрабатываются библиотеки ведущими профессионалами в этой области, то количество ошибок вызванных несоответствием отображения элементов между различными браузерами заметно уменьшается.

Единообразие кода в CSS фреймворке приводит к согласованию работы в команде, так как это помогает лучше воспринимать содержимое между несколькими разработчиками, если у каждого из них свой стиль написания.

 

Недостатки CSS фреймворков

Кроме положительных сторон у фреймворков несомненно есть и свои недостатки. Чаще всего фреймворки критикуют за их излишнюю избыточность неиспользуемого кода. Крупные библиотеки больше подходят для крупных проектов, так как не все из предполагаемых стилей будут использоваться в реальном проекте. Более того, разметка организованная с помощью CSS библиотеки является не очень удобной для чтения, так как большинство классов имеют неочевидные для человека названия (например, g-8, sp-b-n, but-no-15). Если вы используете не самую распространенную библиотеку, то можете получить у себя на сайте ошибки, которые допустили разработчики этого фреймворка при его создании.

Также, для того, чтобы увеличить скорость разработки  с использованием библиотек CSS для начала их нужно досконально изучить. И, хотя, общие подходы к формированию лэйаута страницы схожи, все же между фреймворками есть существенные отличия.

Однако главным недостатком CSS фреймворков все же считается зависимость дизайна сайта от той библиотеки, которую вы используете. Именно поэтому большинство страниц, основанных на CSS библиотеках требуют модернизации этих самых библиотек, что требует за собой затрат дополнительных ресурсов. Большинство разработчиков предпочитает использовать CSS фреймворки, которые разработали они сами.

 

Виды CSS фреймворков

В профессиональной среде HTML-верстальщиков до сих пор ходят споры о целесообразности использования CSS фреймворков. Из-за упомянутых выше недостатков все библиотеки делят на две большие группы: всеобъемлющие и ограниченные.

Всеобъемлющие фреймворки пытаются охватить все правила оформления страницы. Обычно они включают  в себя правила для верстки страницы, правила для сброса стилей элементов. Также они могут включать правила типографики, оформления элементов форм, поддержки элементов HTML5 и т.д. Примерами таких фреймворков могут быть:

  • Blueprint
  • 960 Grid System
  • Twitter Bootstrap
  • YAML
  • Fluid Baseline Grid System

и многие другие.

Ограниченные фреймворки предназначены для решения более узкого набора задач (например, оформление элементов форм или, собственно, верстка страниц).  Самым ярким примером такого фреймворка является jQuery UI CSS Framework, который устанавливает правила для отображения виджетов соответствующего плагина.

На рисунке ниже изображен принцип работы CSS феймворка  (на основе 960 Grid System).