CSS在上，JS在下，這一編碼規范在Web開發中非常流行，那么為什么要這樣做呢？

/* 樣式 */
.btn {
padding: 10px 20px;
background-color: red;
color: #fff;
}
/* 腳本 */
var btn = document.querySelector('.btn');
btn.addEventListener('click', function() {
console.log('點擊事件被觸發！');
});

首先，我們需要知道CSS和JS在頁面渲染時的加載順序，CSS會在HTML解析完成后立即開始加載樣式，而JS則會在整個文檔加載完畢后才開始加載和執行腳本。如果我們將JS代碼寫在頁面頭部（前面），它將會阻止其它資源（如樣式和圖像）的加載，導致頁面加載速度減慢，用戶體驗變差。

相反，如果我們將JS代碼放在頁面底部（后面），在它執行時其他資源已經加載完畢，頁面可以更快地響應用戶操作，提升用戶體驗。

此外，將CSS放在JS前面可以確保頁面樣式在JS代碼執行前已經準備就緒，避免了頁面閃爍和樣式跳動的問題。

最后，對于SEO優化也有幫助。由于搜索引擎會先解析頁面頭部的內容，將JS放在頭部可能會讓搜索引擎優先關注JS腳本而忽略CSS樣式，從而影響頁面的排名。

綜上所述，將CSS放在JS前面可以提高頁面性能、提升用戶體驗、避免樣式跳動和優化SEO，因此我們應該遵循這一編碼規范。