Должны ли вы действительно хранить свои js, html и css отдельно?

Я все время слышу / читаю, что лучше разделить ваши js , html и css . Предположительно, это облегчает обслуживание, отладку. Предположительно , это более эффективно, потому что это позволяет кэшировать / Минимизация CSS и JS - файлов.

Насколько мне известно, используя веб-фреймворки (Django, Rails, ...), библиотеки шаблонов javascript, ... Я склонен довольно сильно разбивать одну HTML-страницу на несколько повторно используемых шаблонов - какие-то виджеты, если хотите , Например, у меня может быть виджет новостной ленты, виджет выбора нескольких элементов и т. Д., Каждый из которых имеет одинаковую разметку на разных страницах, и каждый из них управляется своим фрагментом javascript.

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

в файле выбора нескольких виджетов

• HTML
• базовый формат CSS
• контроль прямого взаимодействия и улучшения UX с небольшим количеством JS.

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

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

• Есть ли действительно веские причины для этого?
• не правда ли, что в руководствах в Интернете обычно предполагается, что вы не будете использовать какой-либо необычный инструмент (в этом случае я бы хотел получать более свежие онлайн-материалы для лучшей практики)?
• Это просто вопрос предпочтений?

Я поддерживаю эту структуру

Для каждой страницы или элемента управления я даю ему папку для html-страницы (или aspx, или php и т. Д.). В этой папке также находятся папки для файлов js, xml, изображений и css. Они предназначены для страниц / элементов управления, а не для общих ресурсов.

В корне сайта также находятся папки js, xml, images и css, каждая из которых содержит ресурсы всего сайта.

Файлы js и css для всего сайта свернуты на стороне сервера и возвращены в виде одного файла js. Специфичные для страницы, так как обычно на странице остается только один, остаются одни.

Это организует мои ресурсы по объему. И хотя у меня может быть дюжина js-файлов в корневой js-папке, они будут возвращены как один js-ресурс путем объединения и минимизации их на стороне сервера (и кэширования результата).

Я также не загружаю ресурсы, специфичные для pagex, когда я нахожусь на Pagey. Единственный «отход» может быть в файле ресурсов всего сайта, но, поскольку он кэшируется, и многие ресурсы будут использоваться в нескольких местах, он более эффективен.

В общем случае соглашение состоит в том, чтобы иметь отдельные файлы для JS / CSS / HTML, чтобы поддерживать разделение содержимого, представления и поведения. Однако, если скорость становится проблемой, тогда что-нибудь идет.

в файле выбора нескольких виджетов

• HTML
• базовый формат CSS
• контроль прямого взаимодействия и улучшения UX с небольшим количеством JS.

У меня есть инструмент организации ( тринити ), который помогает вам сделать это.

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

Это позволяет избежать проблемы толстых файлов, но все же дает вам отдельные файлы.

То есть, если говорить об отдельных проблемах, это не значит, что у вас должен быть один большой файл HTML / CSS / JS. У вас должно быть несколько триплетов <HTML, CSS, JS>для всего вашего повторно инкапсулированного кода

Теперь нет ничего плохого в том, чтобы хранить все это в одном файле, если они четко разделены.

Итак, виджет, который выглядит как

<div id="wrapper">
  <style scoped> CSS code </style>
  <script> JS code </script>
  HTML code
</div>

Это хорошо, и отлично. За исключением того, что все в одном файле, для сопровождающего слишком легко начать смешивать и сопоставлять CSS / JS / HTML.

Это делает его слишком легким, чтобы со временем превращаться в спагетти.

Основная причина, по которой люди продвигают отдельные файлы, в два раза

• отдельные загрузки. Как только вы копируете и вставляете любой код CSS / JS в несколько «виджетов», вам нужно добавить его в отдельный файл.
• Агрессивно превосходит код спагетти, не полагаясь на то, что автор хранит их css / js / html в отдельном файле.

Рекомендуется разделять html, css и js, поскольку это облегчает управление вашим сайтом.

Когда вы только начинаете, у вас может быть только основной index.html и один файл styles.css, но, скорее всего, по мере роста вашего сайта у вас будет несколько сценариев и таблиц стилей, специфичных для отдельного компонента или конечная точка.

Используя разделение:

• Отдельный JavaScript можно использовать повторно на других страницах
• Отдельный CSS может быть в состоянии легко придать сайту новый свежий вид вместе с повторным использованием
• Отдельный HTML можно сосредоточить на контенте, а не смотреть.

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