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

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

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

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

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

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

css less css-frameworks
person BillPull    schedule 24.05.2011    source источник
comment
Я бы не назвал 3 класса много.   -  person Matt Ball    schedule 24.05.2011
comment
Ну, это то, что я пытаюсь понять, сколько классов слишком много.   -  person BillPull    schedule 24.05.2011
comment
Также, насколько конкретными должны быть эти классы. Например .box-shadow .3pxbox-shadow .3px-box-shadow-blue   -  person BillPull    schedule 24.05.2011

Ответы (4)


arrow_upward
10
arrow_downward

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

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

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

person Jonathan Miller    schedule 24.05.2011
comment
Теперь я бы рекомендовал использовать Codekit вместо Less.app. Это тот же разработчик, но Codekit добавляет НАМНОГО больше, включая обработку SASS и coffeescript, и многое, многое другое. - person Jonathan Miller; 12.03.2012
comment
Кстати, приложение less.app бесплатное, его можно скачать здесь: incident57.com/less. - person Hugo Gameiro; 08.06.2012

arrow_upward
2
arrow_downward

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

Я придумал решение, которое использует 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/

person JD Isaacks    schedule 09.06.2011

arrow_upward
0
arrow_downward

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

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

Так что, когда вы видите комментарии вроде «Вы серьезно не думаете, что любой приличный разработчик использует меньше клиентской части, не так ли?», я бы воспринял их с долей скептицизма.

person ccnokes    schedule 10.01.2014

arrow_upward
0
arrow_downward

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

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

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

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

person Community    schedule 08.07.2015