вторник, 18 января 2011 г.

Делить так делить

О чем пойдет речь? Поговорим о дизайне. Я конечно не дизайнер, но для того, что бы дизайнер ставил всякие рюшечки и задал свою цветовую палитру, требуется что-то такое!
Здесь не будут рассказаны тайны мироздания, просто зарисовка из жизни.
В любом web-приложении есть:
  • страничка с разметкой HTML;
  • таблицы стилей CSS;
  • javascript-ы;
  • сервер.
Что требуется? Нужно сделать так, чтобы смена дизайна была легкой процедурой.
Опустим умные речи про то, как все работает в web и перейдем к делу.
Все оформление и дизайн в хорошем случае находится в css. Вот и все меняй не хочу. Но там много всего такого, что если неопытный человек начнет изменят, то будет "северный писец" =).
Выход до банальности прост.
Создаем новую иерархию каталогов со звучными названиями, например, цвета, рисунки, кнопки и т.д.
В этих каталогах размещаем новые css-файлы с говорящими названиями, основной фон, кнопки, текст и т.д.
В сss-файлах создаем css-классы с говорящими названиями (фон, кнопка увеличит и т.д). В эти классы переносим только 2 - 3 строчки отвечающие за дизайн (путь к картинке и смещение в ней, цвет фона и т.д), в основном классе их комментируем и пишем, что перенесены туда-то.
Новые css-классы дописываем к тем, где используются основные.
Для рисунков можно придерживаться принципа: cоглашение вместо конфигурации, это означает, что в вместо бесконечных настроек и кучи вариантов есть определенные соглашения о том, как надо делать. Это можно реализовать как, все иконки для кнопок размером 16*16, все иконки лежат в каталоге таком-то с таким-то именем и расположением картинок внутри.
Вот и все. Жизнь становиться прекрасной.
Нужно изменить иконки: рисуем новую картинку и сохраняем куда надо. Если изменяем одну картинку, а остальные не трогаем, то идем в css находим нужный класс меняем путь к картине, обнуляем смещение.
Основные проблемы:
  • стало больше css-классов (много мест где менять);
  • все, что раньше относилось к одному css-классу теперь размазано по нескольким (сложность);
  • для картинок повторение атрибута пути к файлу (дублирование);
  • и т.д. =)
Но теперь у вас главный плюс: удобство при изменении дизайна =)

Комментариев нет:

Отправить комментарий