Динамически генерируемый CSS

Question

Я подумываю о замене ряда статических CSS-файлов тегами стилей, динамически генерируемыми из JavaScript. Моя цель не в том, чтобы создать таблицу стилей для всего документа, а в том, чтобы использовать ее для плагинов, добавляемых на страницу, таких как вкладки, слайд-шоу и т. Д. В таблицах стилей, с которыми я сейчас работаю, есть от 10 до 20 строк.

Я вижу несколько преимуществ:

• загрузить только файл js вместо js и css
• возможность определять темы на лету (например, вводить цвета в качестве переменных)
• возможность определять селекторы на лету (например, имена классов в пространстве имен)
• добавить специфичные для браузера стили

Какими были бы недостатки этого подхода? Не могли бы вы порекомендовать хорошие ссылки на эту тему?

Я провел некоторое исследование и нашел следующие инструменты:

• меньше - но все равно требуется загрузка отдельной таблицы стилей
• DiceJS (очевидно новая библиотека)

Answer 1

Меньше - это просто потрясающе, я не думаю, что вы должны пытаться сгенерировать CSS с помощью специальной библиотеки в javascript.Хорошей идеей будет сохранить ваш javascript как можно более отделенным от вашего css.

Мы используем определенные атрибуты element class = "" для запуска логики javascript, но они никогда не пересекаются с классами, используемыми в наших меньших стилях.(мы используем разные правила размещения для того, чтобы не допустить перекрытия).

Также не так уж много преимуществ для динамической загрузки частей вашего css.У нас есть JavaScript.js, работающий во время разработки, но мы запускаем компилятор 'lessc' для производства, поэтому у нас всегда есть 1 таблица стилей (и также сжимаем ее с помощью YUI Compressor).

Если только общий CSS не является абсолютно огромнымМы предпочитаем загружать в 1 большой файл CSS при первом обращении, а затем кэшировать файл.

Проверка того, что все ваши CSS загружаются постоянно (а не только части), также помогает вам обеспечитьнет противоречивых правил.Это действительно принесет пользу вам, если вам когда-либо понадобится рефакторинг, и части вашего приложения перейдут на другие URL-адреса (где внезапное совпадение становится видимым).

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

Если вы ищете отличный пример эффективного использования less, ознакомьтесь с Twitter Bootstrap

Answer 2

Еще одним преимуществом будет то, что каждый дополнительный ресурс, загружаемый на страницу, замедляет общую загрузку страницы, поскольку браузер обычно загружает одновременно только 4 ресурса в данный момент времени.

Однако выполнение всего этогообъединение при загрузке страницы, вероятно, приведет к тому, что страница будет замедляться в той же степени, что и от одной только обработки ... в зависимости от того, сколько вещей ей нужно выполнить, чтобы выполнить окончательный блок CSS.

С точки зренияпроизводительность, мне кажется очень маловероятным, что javascript собирается элегантно / эффективно заменить стили, которые были бы включены в комбинированный файл CSS.

Другое дело, что в производственных средах вы также можете делатьдругой вариант, который заключается в использовании библиотеки для предварительной генерации набора минимизированного, оптимизированного (и запутанного в случае JS) кода, а затем загрузки 1 js-файла и 1 css-файла во время загрузки страницы, чтовключите кэширование для увеличения скорости / загрузки.Я думаю, что в Boilerplate lib есть сценарий для этого.

Конец дня: энергия не создается и не уничтожается - ваши оптимизации в одном месте и вам больно в других местах, если вы не будете осторожны.

Answer 3

На мой взгляд, использование JavaScript для CSS звучит немного грязно. Поскольку вы упоминаете о себе, я бы вместо этого рекомендовал вам использовать МЕНЬШЕ или SASS или подобное. Да, это приведет к загрузке одного дополнительного ресурса, но я думаю, что это стоит того по сравнению с использованием JavaScript для стилизации. На мой взгляд, это неправильный инструмент для этой цели.