Меньшая производительность и реализация CSS

Каковы наилучшие способы использования LESS для CSS.

  • В принципе, разработчики должны написать файл с меньшим объемом и затем скомпилировать его для производства
  • Должен ли я связать код LESS и файл javascript.
  • Или я должен вообще пропустить LESS-трафик и просто переделать классы

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

Я заменяю много фоновых изображений градиентами css и тенями ящиков, поэтому я также пытаюсь избавиться от префиксов поставщиков. Иногда я вижу, какой вид выглядит как перегрузка класса, но плохо ли добавлять множество классов в такой элемент, как

<div class="comment dark-shadow round-corners"></div>

ОТВЕТЫ

Ответ 1

Меньше - отличный стиль. Я использую его широко, и это действительно помогает с поддержкой кода, а также со скоростью написания стилей.

Я лично считаю, что ваши стили не должны зависеть от javascript для рендеринга, поэтому я использую less.app для компиляции всего моего LESS в CSS. Я покоясь более спокойно, зная, что все мои CSS есть и что он работает правильно, прежде чем я поместил что-нибудь "живое".

Если вы заинтересованы, я также собираю библиотеку LESS mixin, которая может быть очень полезной: https://github.com/jdmiller82/-lessins-

Ответ 2

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

Я придумал решение, которое использует node.js на сервере для перехвата запросов типа styles.css и попытается найти эквивалентный .less файл (в данном случае styles.less) и проанализировать его и вернуть его как CSS.

Итак, на вашем сервере у вас будет только styles.less, но вы можете запросить URL example.com/styles.css и получить проанализированный LESS файл. Таким образом, интеграция является полной для остальной части вашего приложения, и она не требует, чтобы у пользователя был включен JavaScript.

Вам также не нужно использовать node.js для остальных приложений. Я сделал это в приложении PHP.

Вы можете прочитать мой учебник здесь: http://programming-perils.com/155/parse-less-files-on-the-fly-and-serve-them-as-css/

Ответ 3

Я понимаю, что этот ответ примерно на два года позже вышеупомянутых, но я думаю, что этот вопрос все еще имеет значение.

Я думаю, что есть случаи, когда компиляция некоторой клиентской стороны LESS является хорошей идеей (при условии, что вы не поддерживаете IE 8 или ниже), и у вас есть вариант использования, который его проверяет. Например, приложение, в котором я работал недавно, имеет настраиваемый, способный к теме интерфейс, в котором цвета текста и т.д. Необходимо изменить на основе того, является ли цвет фона, на котором они находятся, светлым или темным, и в конечном итоге может потребоваться поддержка способности для пользователя, чтобы изменить их и увидеть те изменения, которые отражены на сайте в реальном времени. Это отличный вариант для клиентской стороны. Меньше, чем я думаю. Обратите внимание, что только небольшая таблица стилей LESS скомпилирована, а остальная часть приложения LESS, которая не связана с темой, предварительно скомпилирована. Я не видел заметной разницы в производительности.

Итак, когда вы видите комментарии типа "вы не всерьез думаете, что какой-нибудь достойный разработчик использует меньше клиентов, не так ли?", я возьму их с солью.

Ответ 4

Способ использования LESS для веб-сайта производства заключается в компиляции файлов LESS в файлы CSS.

Для локальной разработки у вас может быть файловый наблюдатель, который восстанавливает файлы CSS для файлов LESS, которые были изменены.

Если у вас есть несколько файлов CSS для создания из LESS, вы должны их разделить.

Например, если у вас меньше 30 файлов, и они создают два CSS файла a.css и b.css, вы захотите отделить эти два задания, чтобы их можно было скомпилировать быстрее. Это быстрее для разработки, потому что вы только скомпилируете a.css, если вы измените любые файлы LESS, которые влияют на него.