PHP项目中按需引入CSS与JS脚本的最佳实践有哪些？

核心方案：公共模板留占位 + 页面自行声明所需资源 #

这种方案完全避免了在公共header、footer中添加页面判断逻辑的不规范做法，符合代码开闭原则，维护成本极低。

1. 改造公共header.php #

在header.php的<head>标签末尾预留专属CSS的输出位置，全站通用的固定资源依然放在公共文件中：

<!-- header.php 示例 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= $page_title ?? '站点默认标题' ?></title>
    <!-- 全站通用CSS，所有页面都需要加载的资源放在此处 -->
    <link rel="stylesheet" href="/static/css/reset.css">
    <link rel="stylesheet" href="/static/css/common.css">
    <!-- 页面专属CSS占位 -->
    <?php if (!empty($custom_css)): ?>
        <?php foreach ($custom_css as $css): ?>
            <link rel="stylesheet" href="<?= htmlspecialchars($css) ?>">
        <?php endforeach; ?>
    <?php endif; ?>
</head>
<body>
<!-- 全站通用头部导航、顶部栏等公共内容 -->

2. 改造公共footer.php #

在footer.php的</body>标签前预留专属JS的输出位置，通用JS固定放在公共区域：

<!-- footer.php 示例 -->
<!-- 全站通用JS，所有页面都需要加载的资源放在此处 -->
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/common.js"></script>
<!-- 页面专属JS占位 -->
<?php if (!empty($custom_js)): ?>
    <?php foreach ($custom_js as $js): ?>
        <script src="<?= htmlspecialchars($js) ?>"></script>
    <?php endforeach; ?>
<?php endif; ?>
</body>
</html>

3. 业务页面的调用方式 #

每个需要引入专属资源的页面，在引入header前先声明当前页需要的CSS、JS资源即可：

<?php
// 例如订单列表页 order.php
$page_title = '我的订单';
// 声明当前页专属CSS
$custom_css = [
    '/static/css/order.css'
];
// 声明当前页专属JS，比如订单相关的Ajax请求逻辑
$custom_js = [
    '/static/js/order-ajax.js'
];
// 引入公共头部
include 'header.php';
?>

<!-- 页面专属业务内容 -->
<div class="order-list">
    <!-- 订单列表结构 -->
</div>

<?php
// 引入公共底部
include 'footer.php';
?>

方案优势 #

• 公共模板保持纯净，不需要针对不同页面写任何判断逻辑，后续新增页面不需要修改公共文件
• 资源与页面绑定，每个页面需要加载什么资源直接在页面头部声明，逻辑清晰，排查问题时可以快速定位资源加载逻辑
• 扩展性强，后续如果需要给资源加版本号、defer/async属性、CDN前缀等配置，只需要修改公共模板的占位逻辑即可，不需要改动所有业务页面

进阶优化（可选） #

如果项目规模较大，可以进一步将资源加载逻辑封装成公共函数，统一处理资源校验、依赖引入、缓存控制等逻辑，进一步减少重复代码。

内容的提问来源于stack exchange，提问作者Abdulrahman Mushref