在快节奏的 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中文网其他相关文章！
