Розробка з використанням css фреймворків

Розробка будь-якого сайту зазвичай складається з декількох загальних етапів, одним з яких є обов'язкова верстка основного шаблону, тобто створення на основі зображення дизайнера сторінки в форматі 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).