Практика для синхронизации JavaScript и CSS? - PullRequest
Новая
       42

Практика для синхронизации JavaScript и CSS?

4 голосов
/ 09 января 2011

Я работаю над большим JavaScript-тяжелым приложением.Несколько частей JavaScript имеют некоторые связанные правила CSS.Наша текущая практика заключается в том, чтобы каждый файл JavaScript имел дополнительный связанный файл CSS , например, так: 

MyComponent.js  // Adds CSS class "my-comp" to div
MyComponent.css // Defines .my-comp { color: green }

Таким образом, я знаю, что весь CSS, связанный с MyComponent.js, будет в MyComponent.css.

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

В последнее время я думал о встраивании CSS непосредственно в JavaScript - так что он все еще может быть извлечен в процессе сборки иобъединены в один большой файл CSS.Таким образом, мне не пришлось бы создавать новый файл для каждого маленького кусочка CSS.Кроме того, когда я перемещаю / переименовываю / удаляю файл JavaScript, мне не нужно дополнительно перемещать / переименовывать / удалять файл CSS.

Но как встроить CSS в JavaScript?В большинстве других языков я бы просто использовал строку, но у JavaScript есть некоторые проблемы с многострочными строками.Следующее выглядит ИМХО довольно некрасиво: 

Page.addCSS("\
  .my-comp > p {\
    font-weight: bold;\
    color: green;\
  }\
");

Какие еще у вас есть методы для синхронизации JavaScript и CSS?

Ответы [ 4 ]

2 голосов
/ 09 января 2011

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

Как встроить CSS в JavaScript?Это зависит от среды, в которой вы находитесь, и от того, как выполняется процесс сборки.Самое простое - иметь большой комментарий в начале каждого файла JavaScript, что-то вроде этого: 

// <...>Your copyright notice here</...>

// <css>
/*
body{color:red;}
div{border:solid 10px lime;}
// ... other ugly styles.
*/
// </css>

Затем во время сборки вы должны искать блоки <css>...</css> и извлекать CSS путем усечения./* и */.

Конечно, это создает проблему: если вы используете IDE с автозаполнением, встраивание CSS в файл JavaScript сделает невозможным использование автозаполнения вэто дело.

2 голосов
/ 09 января 2011

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

Кроме того, правила CSS (Cascading StyleSheets) зависят от их положения в документе CSS.Наличие нескольких файлов CSS с разными правилами в каждом может затруднить определение приоритетов, какие правила имеют приоритет.

Наконец, если вы хотите выяснить, какой селектор CSS в вашем JS-файле соответствует какому CSS-файлу, попробуйте использовать классный инструмент поиска, например, grep, если вы работаете в Linux.Если вы используете хорошую IDE, вы также можете использовать ее для быстрого поиска правил, тогда вы можете просто перейти к номеру строки.Я действительно не вижу никакого преимущества в сохранении правил CSS в разных файлах;это только усложнит дело.

Кроме того, я бы советовал не включать CSS.Делая это, вы неизбежно усложните своему веб-дизайнеру быстрый и простой обмен стилями.Весь смысл внешнего CSS заключается в том, что ваш веб-дизайнер может изменить тему или предоставить несколько тем для разных пользователей.Если вы встраиваете CSS в JavaScript или HTML, вы затем тесно связываете контент, поведение и представление.

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

1 голос
/ 09 января 2011

Выезд Csster . Я написал это, чтобы решить только эту проблему.

Вы встраиваете свои правила CSS непосредственно в свой Javascript, используя буквальный синтаксис объекта Javascript Это не страшнее, чем простой CSS. 

Csster.style({
  h1: {
    fontSize: 18,
    color: 'red'
  }
});

Правила вставляются в DOM на стороне клиента. Эта архитектура упрощает процесс сборки и уменьшает количество запросов клиентов.

Вы можете использовать его, как вы описываете, но Csster также предоставляет пару других тонкостей:

  • Вложение для СУШКИ таблиц стилей
  • функции цвета, такие как darken и saturate
  • встроенные макросы для распространенных идиом CSS, таких как clearfix, закругленные углы, тени.
  • точки расширения для настраиваемого поведения или кросс-браузерной поддержки

Он хорошо протестирован, и я использовал его на нескольких проектах. Он не зависит от jQuery, но хорошо играет с ним.

Я бы хотел, чтобы больше людей использовали его и давали отзывы.

1 голос
/ 09 января 2011

Мой предпочтительный метод - хранить все файлы CSS отдельно, а затем иметь процесс сборки, который компилирует их в файл CSS большего размера при развертывании.

Я бы не стал объединять ваш JS с вашим CSS.Это может звучать как более чистое решение на уровне файлов, я думаю, что это будет быстро запутаться.Это, и вы потеряете поддержку подсветки и синтаксиса, которую ваш редактор дает вам.

...