Перейти до основного вмісту

CSS фреймворк. Що це, і кому воно потрібно?

Що таке фреймворк і навіщо воно потрібно?

На сьогодні існує велика кількість фреймворків для всього-всього-всього. Це стосується веб-програмування серверної частини, javascript-фреймворків клієнтської частини, а також в багатьох інших сферах. В загальному, можемо розуміти фреймворк як деяку кодовую базу, що вирішує набір стандартних задач, і яка задає архітектуру та стиль створення додатку. Ну, зі всім цим зрозуміло. Наприклад, javascript-фреймворки дозволяють не паритись з крос-браузерністю і вирішувати задачі на порядок швидше.

Що ж із CSS?

Крос-браузерність в CSS - це також наболіла проблема. Але, наскільки мені відомо, кожен досвідчений CSS майстер має свій набір правил верстки, що допомагає йому практично безпомилково писати крос-браузерний код, тим більше для сучасних браузерів, де аналіз CSS-стилів не так вже й сильно відрізняється, як було, наприклад, 2-3 роки тому. Розглянемо CSS фреймворк на прикладі blueprint CSS. Є й багато інших фреймворків, які вирішують схожі задачі, але я зупинився на цьому.

Що нам дає CSS фреймворк?

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

Мої враження

Маючи деякий досвід верстки без фреймворка, з використанням останнього все виходить дійсно швидше. Якщо оцінювати себе, то можу сказати, що створив досить неординарну верстку сторінки (в т.ч. для IE6).

Плюси:
  • швидкість верстки і створення базового html-коду
  • легкість внесення змін в верстку
  • вся верстка div-контейнерами
  • html-код виходить чистий і короткий (це дуже важлиов як з точки зору розробки, підтримки, так і SEO)
  • Накладання стилів працює "ієрархічно", тобто ніяких проблем з вбудовуванням контейнерів в контейнери
Мінусы:
  • У зв'язку з тим, що застосовуються класи з "несемантичними" іменами, більше того, до одного і того ж контейнера може застосовуватись від одного до трьох класів з фреймворку, код виглядає трошки "дивно" (але завжди можна доддати якийсь клас-маркер, щоб не забути, для чого створювався той чи інший контейнер)
  • 15 кб базового CSS (в деяких випадках це може бути багато)

Кому це потрібно?

Зі всього сказаного зроблю невеличке резюме. Я б рекомендував використовувати CSS-фреймворки наступним категоріям:
  1. Недосвідчені верстальщики, які тільки починають свій важкий бойовий шлях. Такий підхід дозволяє швидко вирішувати задачі верстки і не зривати строки по проекту.
  2. Програмісти, які роблять свій проект/стартап, але поки не мають засобів для того, щоб найняти досвідченого верстальщика.
Всім вдалої верстки.

Коментарі

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

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

    ВідповістиВидалити

Дописати коментар

Популярні дописи з цього блогу

Регулярні вирази в Python: вивчення та оптимізація

Writing a regular expression is more than a skill -- it's an art. Jeffrey Friedl Що це таке? Рано чи піздно майже кожному програмісту в своєму житті доводиться стикатись з регулярними виразами. Термін "Регулярні вирази" є перекладом з англійської словосполучення "Regular expressions" і не є зовсім точним, а для тих, хто перший раз почув цей термін, мабуть, навіть спантеличуючим (я, наприклад, коли вперше почув, ніяк не міг собі второпати по назві, хоча б приблизно, що це, і для чого використовується). Літературний і більш осмислений переклад звучав би, мабуть, як "шаблонні вирази". Але назва вже прижилась, а скажете "шаблонні вирази" - вас просто не зрозуміють :). Звідси: Регулярний вираз -  це рядок, що задає шаблон пошуку під-рядків в рядку. Регулярні вирази використовуються для аналізу текстів на предмет відповідності текстової інформації деякому шаблону. Наприклад , шаблон, що задає слово, яке містить букву "к". Де застосовують

Python: як програмно перемкнути розкладку клавіатури в Windows

Дослідивши дане питання, я побачив, що Python не має засобів "з коробки" для вирішення цієї задачі. Відвоідно, задача повинна вирішуватись для каждої ОС своїм шляхом. Дане рішення було знайдено мною для ОС Windows XP +. Панацея - Win API Для того, щоб виконати завдання необхідно встановити додатково бібліотеку pywin32 , яка надає доступ до функцій Windows API з Python. З цієї бібліотеки нам знадобиться модуль win32api . >>> import win32api Дослідивши його вміст, можна побачити, що для роботы з розкладкою клавіатури є декілька функцій і одне системне повідомлення Windows - WM_INPUTLANGCHANGE : GetKeyboardLayout GetKeyboardLayoutList LoadKeyboardLayout В даному випадку для нас важлива саме остання функція - LoadKeyboardLayout . Дана функція завантажує нову розкладку (якщо вона ще не завантажена) і виконує після цього ще якісь дії; приймає в якості аргументів два: рядок з ідентифікатором розкладки. дію. Більш детально про їхні можливі значення можна почитати в MSDN . О

Python: PEP-8 чи не PEP-8

Пост - не технічний, кому не цікаво - можете далі не читати... PEP-8, хоча й фактично є пропозицією по розширенню Python під номером 8, серед Python програмістів уже став терміном, що позначає правила стилю оформлення коду. Ні, я не збираюсь зараз описувати його тут - про нього можна почитати в першоджерелі . Питання в тому, слідувати цьому стандарту, чи не слідувати? Ітак, стандарт це в більшості випадків добре, оскільки вносить порядок. Наприклад, стандарт USB 2.0 - просто прекрасний стандарт, уявіть собі, якби флешки були не USB, а кожна мала б свій вихід :)... Жахливо, так, були б у нас USB-порти як card-reader'и - 62 в 1.. Реально 62 в 1 Інша справа з PEP-8. Тут все по іншому, адже програма не змінює свою поведінку, якщо ми будемр робити відступ не в 4 пробіла, а 2 (добре, що більшість, все-таки, робить 4), або будемо ставити пробіл перед другою дужкою, чи не будемо і т.д..  Отже, кожен програміст може редагувати свій код як йому хочеться. Мені, наприклад, подобається