在快節奏的 Web 開發世界中，創建可維護、可擴展和優化的程式碼比以往任何時候都更加重要。對於重視模組化和清晰度的開發人員來說，Galadriel CSS 提供了一個強大的解決方案。 Galadriel CSS 的核心是 Nenyr，它是一種領域特定語言 (DSL)，旨在以聲明性方式簡化樣式的創建。在本文中，我們將探討 Galadriel CSS 和 Nenyr 的核心功能，深入探討它們獨特的設計理念、驅動它們的機制，以及它們如何協同工作來創造高效、實用至上的 CSS。我們還將透過定義兩個基本的 Nenyr 文件來示範這些工具如何互動：一個中心文件和一個模組，每個文件都用於強調 Galadriel CSS 的關鍵原則。
Galadriel CSS 與 Nener 簡介
在深入研究 Galadriel CSS 和 Nennyr 的具體運作方式之前，了解它們要解決的問題至關重要。在傳統的 CSS 工作流程中，樣式定義可能會變得混亂且重複，難以有效管理大型專案。透過引入模組化和分層方法，Galadriel CSS 試圖克服這些問題，利用 Nenyr 語言的強大功能為網頁設計帶來清晰度和靈活性。
什麼是 Galadriel CSS？
Galadriel CSS 是一個框架，旨在透過創建用於編寫 CSS 的模組化且可擴展的系統來優化網站樣式設計流程。它將設計過程分解為不同的上下文——中央、佈局和模組——每個上下文都服務於管理樣式規則的特定目的。這種分層系統確保樣式在網站的各個部分一致應用，從而減少衝突和冗餘的可能性。
Galadriel CSS 的核心功能是它的 Nenyr 整合。 Nenyr 用作以聲明方式定義樣式的語言，可讓開發人員建立清晰且可重複使用的程式碼。與需要命令式定義樣式的傳統 CSS 不同，Nenyr 允許以反映文件本身結構的方式聲明樣式屬性。
奈尼爾是什麼？
Nennyr 是一種特定於領域的語言，有助於以更直觀和模組化的方式創建樣式。其主要目標是提供用於定義樣式的聲明性語法，這些樣式稍後將由 Galadriel CSS 解析並轉換為優化的、實用程式優先的 CSS 輸出。 Nenyr 文件包含類別、斷點、變數、別名、主題和其他定義，這些定義定義了HTML 元素樣式的規則，但使用者無需在CSS 中手動編寫每個規則，而是以結構化和分層格式定義其樣式。
Nenyr 透過重複使用類別並降低傳統 CSS 的複雜性，簡化了編寫樣式的過程。它與 Galadriel CSS 協同工作，將這些高級聲明性樣式定義轉換為經過優化且無冗餘的最終 CSS 文件。
Galadriel CSS 和 Nennyr 如何協同工作
Galadriel CSS 的核心是一個系統，它解析 Nennyr 文件、產生抽象語法樹 (AST)，並應用繼承、擴展和唯一性的特定規則。讓我們更詳細地分解這個過程。
解析 Nennyr 文件：Nennyr 解析器的作用
Galadriel CSS 工作流程的第一步是解析 Nennyr 文件。當處理 Nennyr 文件時，它會被送入 Nennyr 解析器，該解析器會產生抽象語法樹 (AST)。該 AST 表示 Nenyr 文件的結構和內容，將其分解為單獨的樣式規則，這些規則稍後將轉換為實用 CSS 類別以應用於 HTML 元素。
Nennyr 解析器處理每個文檔，提取類別定義、屬性和值。解析後，產生的 AST 包含 Galadriel CSS 繼續後續步驟所需的所有樣式資訊。這裡的關鍵優勢是 Nenyr 語言允許開發人員以聲明方式定義樣式，從而產生更有效率、更易讀的程式碼。
應用擴充、繼承、上下文感知和唯一性規則
產生 AST 後，Galadriel CSS 會套用幾個重要規則來確保最終的 CSS 輸出乾淨且有效率。
產生最終 CSS
在應用擴展、繼承、上下文感知和唯一性規則後，Galadriel CSS 產生最終的 CSS 輸出。此輸出針對效能進行了最佳化，確保僅包含必要的樣式規則並且不存在冗餘。產生的 CSS 檔案是實用程式優先的，這意味著它包含可重複使用的原子類，可以應用於網站上的各種元素。
實際範例：在 Nenyr 中定義中央文檔和模組文件
在本文中，我們將逐步介紹使用 Next.js 設定 Galadriel CSS 的過程，並示範如何建立兩個簡單的 Nenyr 文件：一個用於全域樣式的中央文件和一個用於特定元件的模組文件。這個基本設定將讓您全面了解 Galadriel CSS 的工作原理以及如何使用 Nennyr 進行樣式設定。
設定環境
在開始之前，請確保您已安裝並正確配置 Galadriel CSS 開發伺服器。您可以參考 https://galadrielcss-docs.vercel.app/docs/installation 以了解詳細的安裝說明。這裡是
使用 Next.js 設定 Galadriel CSS
首先，我們需要設定 Galadriel CSS 開發伺服器以及 Next.js 應用程式。由於 Galadriel CSS 目前支援 Webpack（未來計劃支援 Vite、ESBuild 和 Rollup 等其他捆綁器），因此我們將在本範例中使用 Webpack。
啟動 Galadriel CSS 開發伺服器：在專用終端機視窗中，執行下列指令啟動 Galadriel CSS 開發伺服器：
此命令設定後端伺服器，該伺服器將處理 Nennyr 檔案並產生優化的 CSS。
啟動 Next.js 開發伺服器：在單獨的終端機視窗中，導覽至 Next.js 專案目錄並運行：
這將啟動 Next.js 的開發伺服器。請記住，Galadriel CSS 應該首先啟動；否則，webpack 整合客戶端將嘗試連接到 Galadriel CSS 後端，如果找不到它，則會拋出錯誤。
安裝 Galadriel CSS Webpack 用戶端：要將 Galadriel CSS 與 Next.js 集成，您必須安裝適用於 Webpack 的 Galadriel CSS 外掛程式。有關如何安裝和設定用戶端的詳細說明，請參閱官方文件：https://galadrielcss-docs.vercel.app/docs/integrating-with-next-and-docusaurus。
全域CSS配置：在Next.js中，全域樣式通常在global.css檔案中定義。為了確保包含 Galadriel CSS 樣式，請在 global.css 頂部新增以下指令：
指令告訴 Galadriel CSS 整合客戶端將產生的樣式註入到您的應用程式中。
建立中央文件
Galadriel CSS 的中心文件定義了整個應用程式的全域樣式。它是其他風格構建的基礎。對於此範例，我們將建立一個名為central.nyr 的文件，該文件定義了
資料夾結構
在本教程中，我們對 Next.js 應用程式使用以下資料夾結構：
您可以將central.nyr 檔案放在 src 資料夾中，但在本例中，為了清楚起見，我們將其保留在根目錄中。
寫中央內尼爾文件
在central.nyr 檔案中，我們將定義 Central 上下文並建立一個 Nennyr 類別來設定
說明
建構中心：這定義了應用全域樣式的中心上下文。
Declare Class("body")：這將建立一個名為「body」的 Nenyr 類，該類別的樣式稍後將套用於 body 元素。
樣式表：在類別內部，我們使用樣式表方法來定義類別的 Nenyr 屬性。我們使用 Flexbox 將內容垂直和水平居中，分別使用 100vh 和 100vw 將高度和寬度設定為視窗的 100%。
central.nyr 檔案建立後，Galadriel CSS 會自動處理它並產生對應的 CSS。
現在讓我們將中央上下文中的「body」類別應用到 body 元素，修改 Next.js 應用程式中的layout.tsx 檔案：
layout.tsx 代碼
在這裡，您必須使用類型“@class”，此標記表示我們將使用的類別來設定
的樣式。元素位於中央上下文內部；然後我們指定位於中央上下文中的類別的名稱。最終的樣式應用程式將如下所示：className=“@class:body”。 Webpack 整合用戶端在建置過程中將此標記替換為適當的實用程式類別名稱。定義模組文件
除了中央上下文之外，Galadriel CSS 還允許您定義模組文件。它們用於定義特定於應用程式的某些元件或部分的樣式。對於此範例，我們將建立一個模組文件來設定
編寫模組 Nenyr 文件
在 src/app 資料夾中建立一個名為 page.nyr 的檔案。在此檔案中，定義模組上下文和
說明
建構模組：這為特定元件樣式定義了名為「page」的模組上下文。
Declare Class("box")：這將建立一個名為「box」的 Nennyr 類別。此類別中的樣式稍後將套用於 div 元素。
Stylesheet：Stylesheet 方法用於定義樣式屬性。在本例中，我們新增填滿、設定背景顏色、變更文字顏色以及將文字在元素內居中等。
有了這個 page.nyr 文件，Galadriel CSS 將為「box」類別產生必要的樣式。現在讓我們將 box 類別應用到
page.tsx 的程式碼
在這裡，我們必須指定該類別在 Nennyr 文件中的位置，在本例中，它位於名為「page」的模組上下文內。然後，我們需要使用“@module”類型來指示它位於模組映射中，然後我們必須指定該類別位於哪個模組中，在本例中，它位於“page”上下文中，最後指定我們要使用的實際類，這裡是「box」。最終標記為：className=“@module:page::box”。在建置過程中，整合用戶端會將此標記解析為位於頁面節點中的模組映射中的對應實用程式類別名稱。
這些範例展示了 Galadriel CSS 在模組化和分層樣式方面的簡單性和強大功能。透過將全域樣式和特定於元件的樣式分離到不同的 Nenyr 文件中，您可以實現乾淨且可擴展的程式碼庫。
整合客戶端作為 Galadriel CSS 工作流程的骨幹運作。在開發過程中，它會掃描應用程式元件以識別特定於 Nenyr 的佔位符或“標記”，例如“@class:body”或“@module:page::box”。這些佔位符指示應在何處套用 Nennyr 文件中定義的樣式。整合客戶端處理這些標記，並將其替換為由 Galadriel CSS 動態產生的實用程式類別名稱。
每個 Nennyr 類別對應於一組 CSS 實用程式類別名稱，而 Nennyr 類別中的每個屬性值代表一個唯一的實用程式類別。例如，Nennyr 類別中的backgroundColor:「blue」屬性值會產生對應的CSS 公用程式類別來設定背景顏色。整合用戶端將這些實用程式類別連結到元件中的指定元素，確保應用正確的樣式而無需手動幹預。
產生最佳化樣式的過程
Galadriel CSS 的設計以優化為核心。當它建立CSS實用程式類別時，它會透過檢查實用程式類別是否已存在來避免重複。如果實用程式類別已經存在，它僅在現有 CSS 實用程式類別和需要它的 Nenyr 類別之間建立參考。這種方法消除了冗餘並產生了精簡、高效的全局樣式表。
在這個過程結束時，Galadriel CSS 會產生一個地圖，追蹤所有Nennyr 類別以及它們連結到的實用程式類別名稱；稍後整合客戶端將使用它來將必要的資料注入到應用程式的輸出構建中。這種映射不僅增強了可維護性，還確保最終輸出僅包含必要的 CSS 規則。其結果是建立輸出沒有未使用的樣式、污染或 CSS 膨脹，從而提高應用程式的可擴展性和效能。
Galadriel CSS：徹底改變樣式最佳化與開發工作流程
在建立現代 Web 應用程式時，開發人員經常面臨平衡開發期間乾淨、可維護的程式碼與高度最佳化的生產輸出的挑戰。 Galadriel CSS 為這些挑戰提供了突破性的解決方案，提供簡化的開發體驗並確保生產構建中的最佳性能。
使用 Galadriel CSS 進行即時開發
如果您已經啟動了 Galadriel CSS 和 Next.js 開發伺服器，您可能會注意到一個令人印象深刻的功能：即時樣式更新。這個無縫體驗是 Galadriel CSS 以開發人員為中心的理念的核心。樣式的變更會立即反映，使開發人員能夠快速迭代並專注於製作令人驚嘆的高級設計。
但是當您從開發過渡到生產時，真正的魔力就會發生。執行 Next.js 建置指令 npm run build 會觸發由 Galadriel CSS 提供的整合客戶端精心編排的複雜流程。這種整合可確保您的應用程式保持輕量級、高效能且沒有不必要的依賴項。
了解建造過程
執行建置指令會啟動 Webpack，而 Webpack 又會啟動 Galadriel CSS 整合客戶端。客戶端執行以下關鍵任務：
與可能在最終建置中包含不必要開銷的傳統 CSS 框架不同，Galadriel CSS 會產生完全最佳化的靜態輸出。這種方法消除了運行時對系統的任何依賴，確保生產環境精簡且有效率。
在開發模式下，Galadriel CSS 運行時不會產生任何依賴項資料夾或建立額外的依賴項。相反，它利用機器上全域安裝的系統來實現無縫功能。相較之下，在建置模式下，整合用戶端會自動從 GitHub Releases 下載最新版本的 Galadriel CSS。這種自動化簡化了建置流程，減少了手動介入並簡化了開發人員的工作流程。透過在幕後處理複雜的流程，Galadriel CSS 使開發人員能夠使用其直覺的 Nenyr 語法，輕鬆地專注於製作高級的、視覺上令人驚嘆的樣式。
探索構建輸出
建置過程完成後，產生的程式碼將駐留在 .next 資料夾中。此資料夾包含應用程式所需的 HTML 和 CSS 檔案。為了說明這種轉變，請考慮以下內容：
開發程式碼範例
這裡，類別屬性使用 Nennyr 標記，這是 Nennyr 提供的一種聲明性語法，用於定義 HTML 元素的樣式應用。這種乾淨且可讀的方法在開發過程中非常寶貴，它允許開發人員專注於結構和功能，而不必擔心實用程式類別混亂。
輸出建構程式碼範例
這些元素與開發期間建立的元素相同，但此版本是 Next.js 建置輸出的一部分。值得注意的是，Nenyr 標記（例如“@class:body”和“@module:page::box”）不再出現在類別屬性中。相反，類別屬性現在包含設定每個元素樣式的實際實用程式類別名稱。此轉換由整合客戶端處理，它將 Nennyr 標記替換為相應的實用程式類別。建置元件僅包含靜態內容，最終輸出中沒有直接引用 Galadriel CSS 或 Nennyr。應用於 body 和 div 標記的每個實用程式類別都對應於 Nennyr 類別中定義的屬性值對。這個精簡而高效的系統凸顯了 Galadriel CSS 的真正力量：支援乾淨、可維護的開發程式碼，同時產生最佳化的、注重效能的建置輸出。
產生的 CSS：最佳化的力量
Galadriel CSS 在建構過程中產生的 CSS 反映了其對效率的承諾。以下是位於 .next/static/css 中的 CSS 檔案的摘錄：
Galadriel CSS 產生的所有實用規則都經過最佳化，沒有冗餘 - 僅包含必要的樣式。例如，在中心文件和「頁面」模組上下文中，顯示樣式：flex、justifyContent：center和alignItems：center被定義了多次。然而，Galadriel CSS 有效地為每種樣式產生了一個實用程式類，避免了重複的 CSS 規則。此外，這些實用程式類別會套用於輸出中的 body 和 div 元素，確保樣式一致套用，而無需重複規則。這體現了 Galadriel CSS 的強大功能：它使開發程式碼保持乾淨，避免了其他框架中常見的類別名稱混亂，同時建立輸出保持靜態、輕量級並針對效能進行了最佳化。透過提供乾淨的開發工作流程和高效的建置輸出，Galadriel CSS 增強了可維護性、可擴展性和整體應用程式效能。
1。清潔開發工作流程
Galadriel CSS 利用 Nennyr 的聲明性功能，使開發人員能夠專注於創建模組化和可重複使用的樣式，而不會受到實用程式類別名稱的干擾。這簡化了開發流程並改善了團隊之間的協作。
2。可擴充且高效能的生產版本
建置過程中產生的最佳化 CSS 可確保應用程式具有可擴展性和高效能，且不會產生不必要的開銷。這對於每千位元組都很重要的大型專案特別有利。
3。自動化與效率
透過自動化依賴管理、樣式註入和清理等任務，Galadriel CSS 減少了手動工作量和潛在錯誤。這使開發人員能夠投入更多時間來打造用戶體驗。
4。增強的可維護性
開發和生產關注點的分離增強了可維護性。 Nennyr 標記清楚地指示樣式的來源，以便在需要時更輕鬆地找到和更新它們。
結論
Galadriel CSS 重新定義了 Web 開發中樣式管理的標準。透過使用聲明性 Nenyr 標記提供乾淨的開發體驗並提供高度優化的生產構建，它使開發人員能夠輕鬆創建複雜的應用程式。
Galadriel CSS 以其模組化、以上下文為中心的方法徹底改變了樣式管理，解決了 Web 開發中的可維護性、可擴展性和效能問題。其創新設計將樣式組織到中心、佈局和模組上下文中，確保隔離和精確性，同時促進重複使用。透過利用其定制的 Nenyr DSL，該框架最大限度地減少了 CSS 膨脹並生成優化的實用優先樣式，從而支援乾淨、可擴展的應用程序，隨著它們的增長而無縫適應。
使用 Galadriel CSS，您可以專注於真正重要的事情：設計美觀、實用且有影響力的 Web 應用程式。讓它變得更好。讓它與眾不同。擁抱 Galadriel CSS 的力量。
testing-app 範例的儲存庫：https://github.com/patrickgunnar/galadrielcss-testing-app
更多關於 Galadriel CSS 的資訊：https://galadrielcss-docs.vercel.app/docs
這些是一些使用 Next.js 建立並使用 Galadriel CSS 設計的應用程式：
感謝您花時間了解 Galadriel CSS！我很想聽聽您的想法和回饋——請隨時在下面的評論中分享。
以上是了解 Galadriel CSS 和 Nenyr：聲明式樣式綜合指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！
