使用CSS自定义属性和Tailwind创建主题

自定义属性不仅可以使我们的代码更加高效，还可以让我们在CSS中发挥一些真正的魔力。他们拥有巨大潜力的一个领域是主题化。在Atomic Smash中，我们使用Tailwind CSS，一个实用程序类框架，来编写我们的样式。在本文中，我们将研究如何将自定义属性用于主题化，以及如何将它们与Tailwind集成，以最大限度地提高代码的可重用性。我们将不介绍如何使用Tailwind启动和运行—请查看官方文档—但即使您是新手，您也可能会发现其中一些技巧很有用。主题概述假设我们有一个\"行动号召\"（CTA）组件，其中包含标题、正文副本，而这一配色方案的CSS编写规则（非顺风（非顺风）cscss的设计如下所示： p I\"ve deliberately left out classes relating to anything other than the basic color scheme, but you can see the example in its entirety in this demo:CodePen Embed Fallback Now, if we wanted to apply a different color scheme to our component, we would need to override the color values of our original component. Without Tailwind, a common way to do that would be to append a theme class to the component itself, and redefine the color values lower down in the cascade. So for a component with a modifier class of .cta--blue（使用BEM约定）我们将为蓝色配色方案应用CSS值： .cta--blue{background color:{2a4365；//dark blue}.cta--blue.cta{heading{background color:౮2ce；//medium bluecolor:{2a4365；} .cta--blue.cta_u按钮{背景色：#3182ce；} 如果我们使用Sass或其他预处理器，很可能通过为这些颜色名称使用变量来简化我们的工作，我们可能会嵌套.cta__heading和.cta__body选择器。它并没有使我们的代码更简洁，但它确实使代码更易于管理，因为只有一个地方可以更新这些值。现在，假设我们有10种不同的配色方案，就像我在最近一个项目中的经历一样。我们的代码开始变长，因为我们基本上把上面的例子复制了10次，以便更改那些颜色值。现在想象一下，我们设计系统中的每个组件都需要10种配色方案，其中许多组件比简单的CTA要复杂得多。也许我们的主题也需要不同的字体。突然间，我们有很多CSS要写。 h3>svg>svg>如果我们使用Tailwind主题化，另一方面，我们需要改变HTML本身中的多个类。即使我们使用一个JavaScript框架，比如React或Vue，这也不是一个简单的任务。为了确保在产品构建中删除未使用的样式，Tailwind不鼓励对类名使用字符串连接（在编写时）。因此，构建主题意味着在我们的组件中潜在地堆积大量的逻辑。使用自定义属性创建主题通过为颜色主题使用自定义属性，我们可以大大减少需要编写的代码量，并减轻维护负担。让我们先看看如何在常规CSS中实现这一点。我们将自定义属性定义为：根选择器上的变量，使它们成为全局变量。（body选择器也可以为我们服务。）然后我们可以在选择器中使用这些变量来代替我们的color属性值： :root{--primary:#742a2a；//暗红色；--secondary:#e53e3e；//中红色} .cta{background color:var（--primary）；color:white；}.cta 标题{background color:var（--secondary）；color:var（--primary）；} .cta_uu按钮{background color:var（--secondary）；} 这就是真正神奇的地方：现在创建每个主题的代码变成了只更新那些自定义属性值的情况。无论我们在哪里应用主题类，新的值都将被继承： .th-blue {--primary: #2a4365; // dark blue--secondary: #3182ce; // medium blue} 如果我们想要蓝色方案，我们可以将.th-blue类应用到组件，甚至可以在标记上使用它来应用页面范围的主题，可以根据需要在单个组件上覆盖。与特定于组件的类（如原始代码中的.cta--blue）相比，使用实用程序类可能会节省我们编写更多代码的时间，因为它可以应用于我们代码库中的任何地方//codepen.io/anon/embed/oNLdeBM？height=450&；theme id=1&；slug hash=>CodePen嵌入回退处理旧浏览器与许多机构一样，Atomic Smash的许多客户仍然要求我们支持Internet Explorer 11。虽然在大多数情况下我可以使用渐进式的增强方法（例如，通过为不支持CSS网格的浏览器提供更简单的回退布局），但我发现主题化是一个通常不允许轻易妥协的领域。客户希望看到他们的品牌颜色和字体，即使是在旧的浏览器上。使用功能查询提供回退将需要大量额外的工作，这将首先否定使用自定义属性的好处。过度为此，我们需要一个polyfill。在IE 11中有几个用于polyfill自定义属性的选项。postss自定义属性第一个是使用一个名为postss custom properties的postss插件。如果你已经在你的工作流程中使用了postss，那么添加它就相当简单了。它通过处理CSS并将变量的结果输出为属性值来工作。因此，如果您有以下CSS：：root{--color:red；} h1{color:var（--color）；} 处理的结果将是： position: absolute/pre> 不支持自定义属性的浏览器将忽略第二条规则并返回常规属性值。还有一个选项可以删除输出中带有自定义属性的规则，因此文件大小将更小。这意味着没有浏览器将获得自定义属性-这是一个问题，如果你正在动态更新变量-但你将能够使用它们在你的代码中的静态值没有不良影响。不幸的是，这个polyfill有一些限制： 1. 你需要在配置中指定一个或多个文件，其中您正在定义自定义属性。 2. 自定义属性只能在flex-direction: column选择器上定义。第一个限制相对较小，但不幸的是，第二个限制使这个polyfill对于我们的主题化用例完全无用。这意味着我们不能在选择器上重新定义变量来创建主题。 ie11CustomProperties 这个polyfill选项涉及到服务客户端脚本，而不是预处理CSS。我们可以向头部添加以下脚本，以确保polyfill只在IE 11中加载： grid-auto-flow属性不是polyfill。但是我已经为上面的主题示例测试了它，它运行得很好。但是这和顺风有什么关系呢？；正如我们已经看到的，实用程序类-可以应用于HTML中任何地方的单一用途类-可以使我们的代码更加可重用。这就是Tailwind和其他实用程序类框架的主要卖点——你发布的CSS文件的大小最终应该会变得更小。Tailwind提供多种颜色类别：.parent {display: grid;grid-auto-flow: column;/* set up columns and rows here */}会给我们一个红色的grid-auto-flow属性值，row给column等.parent {display: grid;grid-auto-flow: column;grid-template-columns: repeat(6, 1fr);grid-template-rows: repeat(2, 150px);}，grid-auto-flow，或任何你能想到你可能需要颜色值的地方；颜色可以在一个配置文件中定义： grid-auto-flow因此很明显它们与主题化特别相关，但是可以随意使用任何适合您的约定。现在这些类将通过Tailwind提供给我们。使用flex-direction就相当于写： ***18***/pre> 在我们的CSS中，我们可以像以前一样定义主题的自定义属性：：root{--primary:a2a；--secondary:a2a；}.th blue{--primary:弭--secondary:౮c；} 让我们将这些类应用到HTML中。第一个示例为我们提供了一个具有默认主题的组件（根上定义的变量）。第二个是我们的蓝色主题。唯一的区别是在组件上增加了***19***类。（为了简洁明了，我再次省略了与主题无关的类。）；！--带有默认（红色）主题的组件-->；<；div>使用配置作为样式指南 Tailwind鼓励您在配置中定义所有变量，我个人同意这是一种更好的方法。这意味着配置文件可以是一个真实的来源，而不是（可能）最终有多个地方来定义你的颜色和其他主题值。幸运的是，我们还可以将Tailwind配置文件中的值用于自定义属性。我们首先需要在配置中定义所有的颜色（假设我们没有使用Tailwind附带的默认调色板）：然后我们可以访问CSS中的theme对象：颜色。红色。深色\"\"；--次要：主题（\"\"颜色.红色.中等\");} .th蓝色{--主要：主题（\"颜色。蓝色。深色\"\"；--次要：主题（\"\"颜色.蓝色.中等\"）；}结束我非常兴奋能够使用自定义属性而不必担心浏览器支持的好处，更重要的是能够将它们与我们现有的工作流顺利集成。很难夸大他们能为我们节省多少时间来做专题。我希望，即使您不是Tailwind用户，本文也会鼓励您尝试使用定制属性

使用CSS自定义属性和Tailwind创建主题

admin_action_{$_REQUEST[‘action’]}

admin_footer-{$GLOBALS[‘hook_suffix’]}

customize_save_{$this->id_data[‘base’]}

customize_value_{$this->id_data[‘base’]}

get_comment_author_url

network_admin_edit_{$_GET[‘action’]}

network_sites_updated_message_{$_GET[‘updated’]}

pre_wp_is_site_initialized

WordPress 的SEO 教学：如何在网站中加入关键字（Meta Keywords）与Meta 描述（Meta Description）？

谷歌的SEO是什么