понедельник, 31 января 2011 г.

CSS фреймворк. Что это, и кому оно нужно.

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

Что же с CSS?
Кросс-браузерность в CSS также наболевшая задача для многих верстальщиков. Но, насколько мне известно, каждый опытный верстальщик имеет свой набор правил верстки, что помагает ему практически безошибочно делать кроссбраузерный код, тем более для современных браузеров, где анализ CSS-стилей не так уж сильно отличается, как было, например 2-3 года назад. Рассмотрим CSS фреймворк на примере blueprint CSS. Есть и множество других фреймворков, которые решают подобные задачи, но я остановился на этом.

Что нам дает CSS фреймворк?
Сразу замечу, что сам его начал недавно использовать, и, хотя CSS верстка - не мое повседневное занятие (в данном случае, это очень важно), иногда приходится с этим делом сталкиваться. CSS фрейморк предоставляет набор CSS-стилей для кроссбраузерной колоночной верстки, где вы можете делать такие операции как "задавать ширину колонки", "смещать колонку на некоторое число пикселей слева", делать "переход на новую колонку", и т.д. То есть все для того, чтобы создавать и размещать контейнеры для "функционирующих элементов управления" клиентской части веб приложения, что является зачастую самой трудной задачей верстки.

Мои впечатления
Имея некоторый опыт верстки до фреймворка, с использованием фреймворка все получается действительно быстрее. Если оценивать себя, то могу сказать, что создал довольно неординарную верстку страницы (в т.ч. для IE6).

Плюсы:
  • Быстрота верстки и создания базового html-кода
  • Легкость внесения изменений в верстку
  • Вся вестка div-контейнерами
  • html-код получается чистый и короткий (это очень важно как с точки зрения разработки, поддержки, так и SEO)
  • Наложение стилей работает "иерархически", то есть никаких проблем с встраиванием контейнеров в контейнеры
Минусы:
  • В связи с тем, что применяются классы с "несемантическими" именами, более того, к одному и тому же контейнеру может применятся от одного до трех классов из фреймворка, код выглядит немножко "странновато" (но всегда можно добавить какой-нибудь класс-маркер, чтобы не забыть, для чего создавался тот или иной контейнер)
  • 15 кб базового CSS (в некоторых случаях этого может быть многовато)
Кому это нужно
Со всего вышесказанного, сделаю небольшое резюме. Я бы рекомендовал использовать CSS-фреймворки следующим категориям верстальщиков:
  1. Неопытные верстальщики, которые только начинают свой трудных боевой путь. Такой подход позволяет быстро решать задачи верстки и не срывать сроки по проекту.
  2. Программисты, которые делают свой проект/стартап (коим я и являюсь), но пока не имеют средств для того, чтобы нанять опытного верстальщика.
  3. Студенты, которым нужно сдавать зачет по предмету <предмет>, а препод поставит зачет, если ему сверстать красивую html-страничку для сайта кафедры/факультета/... , но ни предмета ни верстки студенты делать не умеют, а в армию не хочется.
Всем удачной верстки.

2 комментария:

  1. мне еще понравился YUI3, даже больше чем BluePrint/BlueTrip

    ОтветитьУдалить
  2. YUI3 хрош, если его использовать цельно, то есть вместе с js-фреймворком, который входит в YUI3. К тому же там разметка (YUI3 CSS grid) находится в бете. CSS base, fonts, reset прикольные, но не решают проблему позиционирования и разметки.
    А в общем то, что есть решает те же задачи немножко другим образом. Радует то, что ко всему этому Yahoo! выпустили свой фреймворк под BSD-лицензией. За это им большущий +.

    ОтветитьУдалить

В этом гаджете обнаружена ошибка