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

StackOverflow https://stackoverflow.com/questions/4636322

Вопрос

Я работаю над большим приложением HeavaScript. Несколько кусочков 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 имеет некоторые проблемы с многослойными строками. Следующее выглядит IMHO довольно уродливым:

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

Какие другие практики у тебя Для сохранения вашего JavaScript и CSS в синхронизации?

Нет правильного решения

Другие советы

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

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

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

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

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

Наличие одного файла 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 с Auto-завершением, встраиваемые CSS в файл JavaScript, сделают невозможным использование автоматического завершения в этом случае.

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

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

Проверить CSSTER. Отказ Я написал это, чтобы решить только эту проблему.

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

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

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

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

  • Гнездо для высыхания стилей
  • цветные функции вроде darken а также saturate
  • Встроенные макросы для общих идиом CSS, таких как Clearfix, округлые углы, падение теней.
  • Усилительные точки для пользовательского поведения или поддержки кросс-браузера

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top