Лучше или хуже: стиль с JavaScript против CSS

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

У меня есть конструкторы, которые генерируют весь макет страницы и вставляют его в DOM. Нет изображений, просто стилизация JavaScript и SVG.

Что я хотел бы знать:

  • Что работает лучше?
  • Что, если какая-либо аппаратная поддержка существует для JS или CSS?
  • Является ли чистое решение JavaScript лучше, чем использование CSS Calc()?
  • Что более портативно?
  • Что еще лучше совместимо?

Я стараюсь избегать jQuery, так как мне больше интересно узнать, что заставляет все работать прямо сейчас, поэтому только чистый JavaScript и CSS3.

Ответы

Ответ 1

CSS - лучший способ создать HTML-документ (X).

Даже если вам нужно стилизовать документ с использованием необработанного JavaScript или DOM или какой-либо структуры, такой как jQuery, это будет означать, что вы даете значения правилам CSS.

Правило должно быть:

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

  • Используйте JavaScript/DOM или фреймворки, такие как JavaScript, когда документ или его части не предсказуемы или созданы на лету и вы применяете специальные эффекты, такие как затухание или любое другое - на самом деле, CSS 3.0 имеет переходы, поэтому можно делать много вещей без JavaScript -.

В конце концов, подумайте, как проще сделать что-то с CSS, а какой избыток использует JavaScript вместо этого, и иметь в виду его минусы (очень важный момент: совместимость и производительность браузера).

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

Ответ 2

Ваш стиль должен быть выполнен с использованием CSS везде, где это возможно. Устанавливайте разные классы в соответствии с вашими потребностями, затем добавляйте или удаляйте классы, когда это абсолютно необходимо с помощью JS.

Следует иметь в виду, что изменение стиля с помощью JS - одноразовое изменение. Элементы, добавленные динамически, VIA Ajax автоматически не наследует изменения стиля. Еще одна веская причина придерживаться CSS.

Смотрите это сообщение для дополнительного подтверждения Должен ли я загружать отзывчивый дизайн через JS или CSS.

Как указано в ссылке

Вложение всего, что касается стилей в файлах CSS, является лучшим практика.

HTML = > Структура

CSS = > Стили

JS = > Логика

Ответ 3

Пользовательский интерфейс должен быть оставлен в решениях UI (HTML/CSS). JavaScript должен предоставлять только дополнительные функции.

В дополнение к этому (поскольку вы упоминаете CSS3), если вы имеете в виду анимацию и новые добавления к CSS3 (которые в противном случае могут быть недоступны), вы можете использовать javascript - но только как резерв. (например, используя jQuery fadeTo для создания временной шкалы анимации с помощью CSS3).

Ответ 4

При применении стилей с CSS существуют серьезные недостатки не только потому, что у вас нет контроля над specificity, он медленный (поскольку вы 'd expect), любые вызовы .css(), связанные с классами, например $('.something').css(...), применит css только к элементам этого класса, которые существуют в то время, а не .something, созданным в будущем.