《PHP 與 MySQL 程式設計（第 3 版）》—— 19.7 結合 Smarty 使用 CSS：解決大括號衝突的三種方案

Smarty 預設定界符為 { 與 }，與 CSS 規則（如 .class { color: red; }）發生語法衝突，直接內嵌 <style> 會拋出「無法識別標籤」錯誤。提供三種解決方案：

方案一：外部引入 CSS（推薦，最佳實踐）

<link rel="stylesheet" href="styles.css" type="text/css" />

• 符合關注點分離原則：結構/行為/表現三層分離。
• 瀏覽器可緩存 CSS 文件，提升頁面載入速度。
• 無需修改 Smarty 任何配置，零衝突。

方案二：使用 {literal} 標籤包裹內嵌樣式

<style type="text/css">
{literal}
  .highlight { background: yellow; color: black; }
  #footer { margin-top: 20px; }
{/literal}
</style>

• {literal}...{/literal} 區塊內容會原樣輸出，Smarty 完全不解析。
• 適合極少量、頁面專用的內嵌樣式。

方案三：修改 Smarty 定界符（慎用，影響全局）

$smarty->left_delimiter  = '<!--{';
$smarty->right_delimiter = '}-->';

• 模板中需相應改為 <!--{$var}--> 等語法。
• 會影響專案所有模板，團隊協作成本高，不建議輕易變更。

總結建議

1. 首選方案一：將 CSS 置於獨立文件，<link> 引入。
2. 極少量內嵌樣式用方案二 {literal} 包裹。
3. 避免使用方案三 修改定界符，除非有極強歷史遷移理由。

良好的前端架構應堅持「CSS 外部化、JS 外部化、模板僅含結構與變量」，Smarty 衝突問題自然迎刃而解。