PHP项目中自定义外部CSS失效及加载缓慢问题求助

我在基于Bootstrap框架开发的PHP项目中，遇到了自定义外部CSS突然失效的异常情况：将CSS代码复制到新创建的文件后，该CSS暂时生效，但不久后又会失效。此外，我发现该CSS在PHP文件中加载速度缓慢。请问：

1. 这种情况的原因是什么？
2. 使用PHP是否会对CSS的生效产生影响？
3. 本地服务器（Live Server）是否会影响外部CSS的加载速度？

我已尝试将CSS代码转移至其他文件，但问题仍会意外出现。

自定义CSS代码 #

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

* {
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
}

:root {
    --primary: rgb(42, 157, 143);
    --secondary: rgb(38, 70, 83);
    --secondary-hover: rgba(38, 70, 83, 0.3);
    --warning: rgb(233, 196, 106);
    --danger: rgb(231, 111, 81);
    --active: var(--secondary);
}

html, body {
    height: 100vh;
    min-height: 100vh;
}

a {
    display: block;
}

.bg-image {
    background-image: url('../images/students.jpg'); 
    background-size: cover;
    background-repeat: no-repeat;
}

/** sidebar start */

.sidebar {
    max-width: 13.5rem;
    min-width: 14rem;
    background-color: var(--primary);
    color: white;
}

.sidebar-item {
    margin-bottom: 5px;
}

.sidebar-item .active-link {
    background-color: var(--active);
}

.sidebar-link {
    color: white;
    cursor: pointer;
    transition: all .35s;
}

.sidebar-link:hover {
    background-color: var(--secondary-hover);
}

.notification-btn, .profile {
    cursor: pointer;
    user-select: none;
    border: none;
}

.profile-btn {
    position: relative;
    border: none;
}

.profile {
    width: 40px;
    height: 40px;
    border-radius: 100%;

    /*! remove, only proto */
    display: grid;
    place-content: center;
    background-color: rgb(90, 20, 20);
    color: white;
}

.chevron-btn {
    font-size: 13px;
    display: grid;
    place-content: center;
    background-color: gray;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    position: absolute;
    right: -2px;
    bottom: -2px;

    transform: translate(2px, 2px);
}

/** sidebar end */

HTML/PHP页面代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard</title>

    <!-- bootstrap -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">

    <!-- bootstrap icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css">

    <!-- custom css -->
    <link rel="stylesheet" href="../assets/css/mainStyle.css">
</head>
<body>
    <div class="container-fluid p-0 h-100">
        <div class="row h-100 p-0 m-0">
            <!-- sidebar -->
            <div class="sidebar col border-end py-2 p-0 h-100">
                <p class="fs-3 fw-bolder text-center">XYZ LMS</p>

                <ul class="list-unstyled px-2">
                    <li class="sidebar-item">
                        <a href="" class="sidebar-link rounded-1 link-underline link-underline-opacity-0 py-2 px-3 active-link">
                            <i class="bi bi-speedometer2 me-2"></i> 
                            <span>Dashboard</span>
                        </a>
                    </li>

                    <li class="sidebar-item">
                        <a href="" class="sidebar-link rounded-1 link-underline link-underline-opacity-0 py-2 px-3">
                            <i class="bi bi-bookmark me-2"></i> 
                            <span>Courses</span>
                        </a>
                    </li>

                    <li class="sidebar-item">
                        <a href="" class="sidebar-link rounded-1 link-underline link-underline-opacity-0 py-2 px-3">
                        <i class="bi bi-person-check me-2"></i>
                            <span>Students</span>
                        </a>
                    </li>

                    <li class="sidebar-item">
                        <a href="" class="sidebar-link rounded-1 link-underline link-underline-opacity-0 py-2 px-3">
                            <i class="bi bi-person me-2"></i> 
                            <span>Profile</span>
                        </a>
                    </li>
                </ul>
            </div>
            
            <!-- content side -->
            <div class="col flex-grow-1 h-100 p-0">
                <!-- navbar -->
                <nav class="d-flex justify-content-between align-items-center px-4 py-2 shadow-sm">
                    <div>
                        <span class="fs-5 fw-bold">Dashboard</span>
                    </div>
                    
                    <div class="d-flex align-items-center">
                        <!-- notification -->
                        <div class="notification">
                            <button class="notification-btn me-4 ">
                                <i class="bi bi-bell-fill fs-5"></i>
                                <span class="badge bg-danger">0</span>
                            </button>


                        </div>
                        
                        
                        <!-- profile -->
                        <div class="dropdown">
                            <button type="button" class="profile-btn profile" data-bs-toggle="dropdown">
                                <div>S</div>

                                <div class="chevron-btn">
                                    <i class="bi bi-chevron-down text-white"></i>
                                </div>
                            </button>

                            <ul class="dropdown-menu">
                                <li><a href="#profile" class="dropdown-item">Profile</a></li>
                                <li><a href="#logout" class="dropdown-item">Logout</a></li>
                            </ul>
                        </div>
                        
                    </div>
                </nav>

                <!-- main content -->
                <div class="content p-3">
                    This is the dashboard
                </div>
            </div>
        </div>
    </div>

    <!-- bootstrap js -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <!-- popper js -->
    <script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.js"></script>
    <!-- custom -->
    <script src="../assets/js/script.js"></script>
</body>
</html>

1. CSS突然失效的原因 #

• 浏览器缓存问题：浏览器会缓存静态CSS文件，修改CSS后如果文件名没变，浏览器直接加载缓存里的旧文件，看起来像是“失效”；新建文件时文件名不同，缓存没命中所以暂时生效，之后复用旧文件名或缓存未清理时，又会加载旧内容。
• 相对路径错误：PHP文件可能放在不同目录下，相对路径../assets/css/mainStyle.css在某些页面会解析失败，导致CSS文件404，表现为样式失效。
• 服务器静态缓存：如果本地服务器有静态文件缓存机制（比如部分PHP服务器的缓存插件），会延迟更新CSS文件的最新内容。
• 样式优先级冲突：Bootstrap的部分样式优先级高于自定义CSS，导致你的样式被覆盖，看起来像是失效（可通过浏览器开发者工具检查样式是否被覆盖）。

2. PHP对CSS生效的影响 #

PHP本身不会直接干扰CSS的解析生效，因为CSS由浏览器处理，但存在间接影响的可能：

• 动态路径错误：如果PHP动态生成CSS链接路径，可能因逻辑错误输出错误路径，导致CSS加载失败。
• 输出缓冲延迟：如果PHP开启输出缓冲，或页面有大量PHP逻辑处理，会延迟HTML输出，导致CSS加载时机延后，看起来加载缓慢。
• 静态文件路由处理：如果用PHP路由处理CSS文件请求（比如伪静态配置错误），PHP脚本的性能瓶颈会导致CSS加载速度变慢。

3. 本地服务器对CSS加载速度的影响 #

肯定会影响，常见原因包括：

• 缺乏静态文件优化：普通Live Server一般没有gzip压缩、缓存控制头等优化，导致CSS文件传输体积大、重复请求多，加载变慢。
• 服务器性能限制：比如PHP内置服务器的性能远不如Nginx、Apache这类专业服务器，处理静态文件的响应速度慢；本地电脑同时运行多个服务时，资源不足也会拖慢加载速度。
• 自动刷新机制问题：部分Live Server在文件修改后自动刷新页面，但刷新逻辑可能存在延迟，导致CSS没及时更新加载。

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