В наши дни «фреймворк» — довольно модное слово в веб-разработке. Например, фреймворки JavaScript YUI, JQuery и Prototype привлекли широкое внимание, а фреймворки веб-приложений Rails и Dojo привлекли еще больше внимания. Кажется, каждый использует какой-то фреймворк для разработки собственных веб-сайтов. Но что такое фреймворк? Могут ли фреймворки принести пользу только программистам?
Что такое фреймворк?
Чтобы облегчить общение, мы даем единое определение «фреймворка» (по крайней мере, в этой статье): набор инструментов, библиотек функций, соглашений и общих модулей, которые пытаются абстрагировать общие задачи и могут использоваться повторно. и разработчикам сосредоточиться на аспектах, уникальных для конкретного проекта, и избегать дублирования разработки. Вообще говоря, фреймворки — это фреймворк JavaScript и фреймворк веб-приложений, упомянутый выше.
Важно подчеркнуть, что нам не нужно говорить о создании, упаковке и распространении. Вместо этого фреймворк может использоваться только вами или вашей командой.
CSS-фреймворк
Иногда вы можете ощутить преимущества абстрактного и похожего CSS-кода, что наиболее очевидно среди дизайнеров, которые одновременно разрабатывают несколько похожих веб-сайтов. Кроме того, дизайнеры команды получили большую пользу от подхода фреймворка. Например, я работаю в газете, и все более чем 20 веб-сайтов имеют много общего. Судя по характеристикам новостных веб-сайтов, они, как правило, больше похожи, чем различны. Но даже один дизайнер, работающий над проектом, который на первый взгляд выглядит совсем по-другому, может абстрагировать некоторые общие детали CSS-фреймворка.
В Lawrence Journal-World, где я работаю, мы недавно создали структуру CSS и обнаружили, что она значительно повышает эффективность. Конечно, нам потребовались дни, чтобы создать структуру CSS самостоятельно, но как только структура была завершена, разработка высококачественных веб-страниц стала чрезвычайно быстрой. Более того, поскольку каждый дизайнер в команде теперь использует эту структуру, когда дизайнер изменяет веб-страницу другого члена команды, ему больше не нужно тратить 20 минут на понимание строительных идей других людей, и он может немедленно приступить к работе.
Есть ли такие, которые можно игнорировать?
Инвестируя в целостную структуру CSS, вам нужно искать общий код, который повторяется снова и снова в каждом проекте. Цель состоит в том, чтобы закрепить основную позицию этих кодов и следовать принципу «Не повторяйтесь». t Повторите себя)». Это значительно упрощает обслуживание и экономит расходы на пропускную способность для ваших посетителей.
Почти в каждом проекте, над которым я работаю, есть несколько проблем CSS, о которых мне приходится заявлять:
«Расширенный сброс» стиля браузера по умолчанию, например, установка полей и отступов всех элементов на 0, удаление границ наборов фреймов и изображений и т. д.
Выровнять по базовой линии. Сюда входят такие вещи, как установка полей для элементов уровня блока, таких как абзацы, заголовки и списки, на одинаковую (или несколько) базовую высоту строки.
Создайте основной стиль формы.
Создайте несколько часто используемых CSS-классов, например, .hide (установите для отображения значение none, то есть скройте элемент), .mute (установите меньший шрифт и более яркий цвет).
И вот что самое забавное: многие дизайнеры веб-сайтов снова и снова используют одну и ту же базовую структуру, так почему бы не сделать ее своей собственной, очень гибкой и способной использовать на нескольких веб-сайтах? Yahoo сделал это, это? ЮИ. Когда мы создавали структуру CSS для веб-сайта Lawrence Journal-World, я начал с изучения того, как это сделал Yahoo. Мы почти уверены, что это не то, чего мы хотим, но это служит хорошим примером и дает нам много идей для размышления и того, как построить нашу собственную структуру. Мы остановились на задаче с 16 ячейками, которая была достаточно гибкой, чтобы работать на каждом из наших сайтов, даже если каждый сайт немного отличался от другого. Кроме того, большинство веб-сайтов используют виджеты, такие как раскрывающиеся меню, меню навигации, кнопки и т. д. Это также основные объекты, которые необходимо абстрагировать. Кроме того, у вас могут быть общие имена контента, например миниатюры для списков изображений. Вы можете стандартизировать именование CSS, например «thumbnail-list», чтобы все миниатюры, отображающие миниатюры, использовали этот класс CSS.
Еще один вариант — извлечь хаки (например, совместимость со старыми браузерами) и добавить свой собственный модуль расширенного стиля. Я попробовал это сам, но обнаружил, что этот хак слишком запатентован, чтобы его можно было извлечь в общую структуру.
Каковы реальные преимущества?
Реальное преимущество фреймворка заключается в том, что он может быстро начать работу. Вы можете создать новый (X)HMTL-файл и ввести свою фреймворк. Вам больше не придется сбрасывать отступы и поля. Красивая типографика, чистые формы, аккуратный макет. Действующие виджеты и т. д. Однако очевидно, что вам определенно придется настроить внешний вид каждого сайта. Для этого все, что вам нужно сделать, это переопределить и добавить стиль по умолчанию, где это необходимо.
Очевидно, что хотя вам придется настроить внешний вид каждого веб-сайта, все, что вам нужно сделать для этого, — это добавить несколько строк кода к стилям по умолчанию. Например, если вы установили базовый стиль горизонтальной навигации для всех тегов UL с атрибутом класса «вкладки» в вашем фрейме и имеете серую рамку, вам понадобится всего несколько строк кода CSS, чтобы настроить его внешний вид. сайт соответствует.
| Ниже приводится цитируемое содержание: ул.табс ли { граница: нет; фоновое изображение: url('/images/tabs/?site-activate-tab-look.jpg'); } ул.табс ли { граница: нет; фоновое изображение: url('/images/tabs/?site-activate-tab-look.jpg'); } |
Список перемещается слева, а ссылки размещаются в виде блоков. Ссылки также перемещаются слева, а шрифт центрируется. Фреймворк поможет вам выполнить эти задачи, как раздражающая реклама на вашем веб-сайте. Работая над дизайном, просто сосредоточьтесь на конкретных, интересных деталях вашего веб-сайта, а не на написании кода CSS, который был написан миллион раз раньше.
Как создать CSS-фреймворк?
Существует несколько возможных способов создания структуры, но наиболее распространенным и, возможно, самым полезным является абстрагирование общего CSS в отдельный файл таблицы стилей, который содержит только определенную часть целого. Например, у вас может быть один стиль дескриптора типографики и другой дескриптор массового сброса. Этот хороший метод позволяет вам выборочно вводить нужные вам стили. В вашей структуре может быть шесть или семь разных файлов стилей, но вам не нужен один или два из них, пока они не импортированы. Фреймворк, созданный нашей командой, состоит из 5 файлов стилей:
reset.css — обрабатывает сброс
type.css — обрабатывает типографику
Grid.css — обрабатывает макет
widgets.css — обрабатывает виджеты, такие как меню вкладок, раскрывающиеся меню и кнопки «еще»
base.css — содержит все остальные файлы таблиц стилей, поэтому нам нужно только ссылаться на base.css в (X)HTML, чтобы использовать всю структуру CSS. Затем мы сохраняем структуру в отдельном месте, чтобы каждый сайт импортировал этот фрейм. Конечно, каждому веб-сайту также нужна уникальная таблица стилей, а уникальный стиль является необходимым дополнением к структуре.
совет
Этот метод хорош, но он приносит и новые проблемы: увеличивает количество http-ссылок на каждой странице. Для сайтов с большим и средним трафиком, если на каждой странице добавлено более 5 HTTP-соединений, у системного администратора могут возникнуть большие проблемы. Два возможных решения:
Поместите все стили в один файл вместо того, чтобы разбивать их на несколько модулей. Проблема здесь в том, что теряется гибкость инфраструктуры, позволяющая включать только определенные файлы, и обслуживание становится обременительным.
Существует серверная программа, которая динамически обрабатывает несколько отдельных файлов в ответ. Я еще не видел, чтобы это было сделано, но если все сделать хорошо, это должно быть очень эффективно. Если взять в качестве примера приведенную выше структуру, этот процесс динамической обработки запускается при запросе base.css, а не при запросе type.css,grids.css и т. д. Таким образом, отдельные файлы по-прежнему доступны, и вся платформа действительна для данной версии платформы.
Подводя итог, важно отметить, что наша цель — не быть настолько абстрактными, насколько это возможно. Вместо этого цель состоит в том, чтобы обеспечить быстрый старт и более эффективный процесс проектирования, который, безусловно, возможен когда-либо. Если вы пойдете слишком абстрактно, все может запутаться, а слишком большое количество HTTP-ссылок может повлиять на производительность вашего сайта. Помните: хорошая структура – это не усложнение и усложнение, а начало с нуля.
Подвести итог
Мы, веб-дизайнеры, склонны все время повторяться, и, как и мои друзья из мира программирования, мы снова и снова сбрасываем стили браузера по умолчанию, макеты дизайна и меню навигации — почти в каждом проекте. Потратив немного времени на разбор структуры CSS, вы сможете быстро запустить каждый проект веб-сайта, упростить его поддержку и помочь другим дизайнерам в команде понять вашу работу. Следует отметить, что эти преимущества должны быть получены без ущерба для производительности веб-сайта.