Чи дійсно слід тримати окремі 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, зображення та css, кожна з яких містить ресурси для сайту.

Файли js та css, що знаходяться на сайті, згортаються на стороні сервера та повертаються як єдиний js-файл. Окремі сторінки, як правило, лише одна на сторінку, залишаються в спокої.

Це впорядковує мої ресурси щодо їх обсягу. І хоча у мене може бути десяток файлів js у кореневій папці js, вони будуть повернуті як один js-ресурс, поєднуючи та мінімізуючи їх на стороні сервера (та кешуючи результат).

Я також не завантажую ресурси, характерні для pagex, коли я перебуваю на сторінці. Єдиний "відхід" може бути у файлі ресурсів на сайті, але оскільки він кешований, і багато ресурсів будуть використовуватися в декількох місцях, це більш ефективно.

загалом умовою є створення окремих файлів для 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 можна кешувати, якщо вони використовуються на кількох сторінках вашого сайту