Все мы привыкли через JavaScript пользоваться встроенными стилями элемента. При этом люди не подозревают, что тем самым делают себе плохо в дальнейшем. Внешние стили (подключенные через элемент style) имеют значительно больше возможностей чем встроенные стили DOM элемента.
Введение
Использование встроенных стилей чревато тем, что они не сменные т.е. мы постоянно вручную меняем стили элемента вместе применения уже существующих стилей. Генерация стилей позволяем избежать многих проблем с изменением стилей.
Самый простой пример:
var style = document.createElement("style");
style.innerHTML = generateStyles(/* arguments */);
document.head.appendChild(style);
Причем нам достаточно просто изменить innerHTML элемента style для изменения стилей. Кроме того, мы можем использовать внешние стили через директиву import, встраивать анимации, а также псевдо-элементы.
Сравнения
— При помощи динамических стилей можем реализовать более гибкое «скрытие» или «вскрытие» элемента. Для встроенных стилей элемента потребуется больше кода для подобного сценария.
— Динамические стили могут вставить управляемый псевдо элемент. Встроенные стили не в состоянии использовать псевдо-элементы (только стили самого элемента).
— Сложно реализовать стили при наведение на элемент через встроенные стили. Динамические могут использовать псевдоклассы для подобной реализации (в том числе со сложной анимацией).
— Что встроенные, что динамические, могут использовать мышь из JavaScript. Однако у динамических стилей преимуществ несколько больше, чем у встроенных. Например можно реализовать действия с мышью на псевдо-элементах и псевдо-классами.
— А главное преимущество динамических стилей — это загрузка шаблонов стилей через AJAX. Мы можем выбрать, какой стиль использовать для того или иного элемента, а также использовать пользовательские стили (это уже вашего ума дела).
Как применить динамические (внешние) стили
На сегодняшний момент можно манипулировать классами у определенных элементов вместо изменения ID элемента. Для этого есть свойтсво classList у DOM элемента с функциями add, remove и toggle.
Польза динамических стилей
Польза динамических стилей огромная! Во первых — мы можем использовать JavaScript переменные в CSS. Кроме того, наличие stylesheet API позволяет изменять отдельные параметры стилей (к сожалению я нуб в использовании данного API) вместо глобального изменения стилей. Кроме того, мы можем использовать один и более style элементов, в зависимости от наших предпочтений и целей. Динамические стили могут помочь с реализацией сайта в различных девайсах, могут дать больше динамики вашей веб-страницы в целом.
Вред динамических стилей и их недостатки
Постоянное создание (генерация) стилей можно плохо сказаться на производительности. Хакеры могут нехило повлиять на генерацию контента в целом (для примера, сделать дефейс сайта из псевдо-элементов). Кроме того, создание динамических стилей потребуют определенных навыков в программировании (JavaScript, CoffeeScript, CSS и прочие).
Если JS отключен, то сайту грозит неминуемая гибель, поскольку контент напрямую зависит от JS.
Известные библиотеки
Это TeaCSS, LESS, и, возможно, некоторые другие, использующие JavaScript стилевые движки.
Эксклюзив для хабра — свойство calc() никто не отменял
Это свойство уникально тем, что мы можем использовать разные измерительные величины в вычислениях на CSS, в то время как JavaScript может лишь оперировать с простыми числами. Только при помощи calc() мы можем сделать динамику еще гибче, сделать сайт сложнее и оригинальнее. Динамические стили и calc() — вещи незаменимые. Однако для IE придется подключать «тяжеловесные» библиотеки для поддержки calc(). Благо есть IE9. Opera не столь популярный браузер, поэтому обсуждение оперы оставим в теплом и уютном ящике томиться до своего момента.
Примеры
Я к сожалению дать примера не могу. Отправьте мне свои идеи и примеры по использовании данной технике. Желательно мне по почте (alexei03a@gmail.com) или по скайпу (solovei905). Отсутствие примера еще не повод для недовольства.
В дальнейшем я все равно постараюсь сделать интересные примеры…
Но и не забывайте использовать «статические» стили
«Статические» стили помогут сделать основу вашему сайту (фундамент), в то время, как динамика является неким дополнением к вашему сайту, своего рода украшательством.
Автор: Alexei03a
