[kostyanet]

о, что все мной просмотренные примеры(большинство) по калькуляторам на сайтах (скрипты) лежали в отдельных файлах

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

Если же хтмл делается скриптом на php, то и все остальные ресурсы php туда засунет как миленький из тех самых _отдельных_ файлов. Щас покажу

<style><?php $this->assets('css','catalog_promo.css');?></style>
<div class="promo">
<div class="promo-m"><?php echo join($items);?></div>
<div class="promo-o" t="Открыть"></div>
<div class="promo-b"><?php echo join($dots);?></div>
<div class="promo-bn"><i class="fa fa-chev-d"></i></div>
<div class="promo-bp"><i class="fa fa-chev-u"></i></div>
</div>
<script><?php $this->assets('js','catalog_promo.js');?>Promo();</script>

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

Как видите сначала идут стили, потом хтмл и сразу же после него - скрипт и сразу же он запускается. Можно запустить автоматически, но я уже забыл почему так осталось - по имени. Работает и х с ним.

Паттерн - стиль-хтмл-скрипт - самый оптимальный. Загрузив стили браузеру вы сокращаете итерации - получив хтмл браза уже знает как что рендерить. Ну а скрипт и должен быть после, чтобы все, что он начнет щупать - уже было в DOM'е

Метод $this->assets() - обычный загрузчик кеша с фичей минимизации текста. Открыл файл, сравнил даты, если исходник свежее - минимизировал, записал и выдал в буфер текст. По опции может возвращать текст - что важно для рендера объектов через __toString();