Портал Belkin-labs»PHP классы»Статья
welcome!

Подключение стилей в заголовок страницы
Объектно-ориентированный подход
Введение

При создании страницы мы имеем дело со стилями. Стили - дело очень хорошее и полезное. Но прозрачная работа с ними оказалась весьма сложным и трудоемким делом. А мне, как всегда нужен абсолютно полный контроль, возможность оптимизации скорости загрузки страницы и полное соответствие рекомендациям Гугла, который, по большому счету, что хочет, то и творит, то есть меняет свои рекомендации очень часто и никогда об этом не предупреждает.

Что имеется ввиду под стилями и их подключением

На всякий случай уточню, что под стилем я понимаю набор CSS-определений. Они могут быть собраны в отдельностоящий файл с расширением .css или подключены в заголовке страницы с помощью тега style.

Замечу попутно,
что я иногда в своей работе использую атрибут style, хотя это и не приветствуется. Но я часто имею свое личное мнение на счет рекомендаций и всегда отношусь к ним творчески. В свое оправдание я готов гарантировать, что везде, где я использую атрибуты style, я могу его применение аргументировать.

Что же мы хотим от системы включения стилей в страницу

Мы хотим буквально все! Далее идет полный список.

На удаленном хосте

  • Мы хотим, и это очень важно, добиться того, чтобы подключаемые стили, по возможности, содержали именно те стили, которые нужны. Мне бы не хотелось таскать на каждую страницу сайта файл стилей весом в 200К, который содержит все, что только можно. Я понимаю, что у этого подхода есть некие плюсы, но они не срабатывают, когда человек приходит на страницу впервые и кэш его браузера пуст.
  • Мы хотим, чтобы при редактировании мы имели красивый текст с обильными комментариями, причем мы бы не заботились о том, что эти комментарии будут создавать дополнительный и ненужный вес при загрузке страницы.
  • Мы хотим разбить стили по функциям. Если у нас на каждой странице сайта есть раздел, который касается зарегистрированного пользователя, то я хочу иметь отдельный стилевой файл со стилями касающимися конкретно той функции, о которой я говорил, и больше никакой. При этом мы не хотим, чтобы миллион отдельных крошечных стилевых файлов по 500 байт, создавали нагрузку на наш сайт в случае загрузки страницы. Другими словами, мы хотим уменьшить количество запросов к серверу. Эта функция напрямую служит цели, обозначенной в самом первом абзаце этого бюллетеня.
  • Ввиду того, что написано в предыдущих абзацах, становится понятным, что мы хотим уметь объединять несколько стилевых файлов в один, сжимая их при этом.
  • Мы хотим некоторые стили в виде одного сжатого файла подключать в заголовке страницы, а другие стили, тоже в таком же виде подключать в самом конце страницы, за тегом </html>. Это предлагает Гугл в своих инструментах по оптимизации скорости загрузки страницы (https://developers.google.com/speed/pagespeed/insights/?hl=ru).
  • Наконец, мы хотим подключать в заголовок страницы стили в виде текста, сжимая при этом текст и помещая их в тег <style>. При этом хотелось бы брать текст как из строки, так и из отдельностоящего стилевого файла. Причем, хотелось бы, чтобы разные стили (из разных строк или из разных файлов) формировали всего один тег <style>, а не несколько.
  • Мы хотим внести в стилевые файлы некоторую легкую программируемость. Ну хотя бы вставлять в них значения констант, которые определяются в скриптах. Что-то большее редко бывает необходимо. Напротив, часто бывает нужно работать с разными хостами, у нас ведь портал делается! При этом хочу напомнить, что на локальном и удаленном хосте у нас хосты могут быть разные.
  • Мы хотим, чтобы все эти функции были оформлены в ООП и их вызов в скрипте был коротким, понятным и прозрачным. Чтобы скрипт при этом хорошо читался и нам не нужно было бы каждый раз лазить в документацию для того, чтобы что-то изменить. По опыту это требование самое сложно выполнимое.
  • Мы не хотим, чтобы все эти функции нагружали сервер. Мы хотим иметь систему кэширования тех стилевых файлов, которые мы создаем, чтобы нам не приходилось их сливать из источников и сокращать каждый раз заново.

На локальном хосте

При отладке на локальном хосте нам нужна совсем другая функциональность! При этом как раз на локальном хосте нас меньше всего заботит быстродействие и больше всего заботит наглядность и отладочная функциональность.

  • Мы хотим оставить в наших стилевых файлах форматирование и комментарии. Мы не хотим их объединять в один. Мы хотим иметь столько тегов <link> сколько у нас файлов. Тексты, помещаемые в теги <style> тоже должны вставляться несжатыми.

Что же стоит это все реализовать?

Скажу честно! Это стоит дорого! За реализацией этих функций стоит целая полновесная гроздь классов, как базовых, так и классов уровня проекта. Приходится использовать наследование и композицию, то есть включение и использование в отдельных классах других объектов, например, для работы с источником кода из текстового файла. К слову сказать, многие классы и методы оказались универсальными для CSS и JS файлов.

Именно ввиду сложности темы, я заканчиваю это введение. Будем описывать отдельные функции частями. Хорошая новость в том, что система готова и отлажена. Нужно только задокументировать.

Дмитрий Белкин.

Статья создана 14.12.2014
Похожие материалы - отбираем по ключевым словам