重新加工CSS年鉴

CSS-Tricks Almanac焕然一新！

想必您已经熟悉CSS-Tricks的这个庞大的部分——Almanac（年鉴）。在这里，我们发布CSS选择器和属性的参考文档。自古以来……或者至少自2009年（大部分原始工作完成之时）以来，我们只发布了这些内容。在网页年代，那几乎就是时间的开端。我们甚至可以称之为响应式设计之前的第1年（BR），或者响应式设计后的第14年（AR）。

您无需我告诉您，如今在响应式设计后的第14年编写CSS与以往大不相同。简而言之，Almanac并没有跟上CSS的发展步伐，而CSS远不止是属性和选择器。事实上，我们一直不愿修改Almanac，因为它在后端的配置方式，而且我敢肯定，当我触碰它时，在那里看到了一两个幽灵。

现在访问Almanac，您会发现更广泛的CSS信息，除了现有的属性和选择器部分外，还包括伪类选择器、函数和@规则的专用部分。我们还有很多工作要做（您应该帮忙！），但架构已经存在，如果需要，还有空间可以扩展。

这项工作并非易事，也像我想象的那样令人害怕。让我带您了解我所做的一些事情。

现状

我们自第一天起就自豪地运行WordPress。这有很多好处，尤其是在模板方面。它可能不是每个人的最爱，但我对此非常满意，并毅然投入——不顾一切！

如果您熟悉WordPress，那么您知道内容主要分为两种类型：页面和文章。两者之间的区别微乎其微——几乎无法区分，因为它们都使用相同的编辑界面。当然，也有一些细微差别，但页面的主要区别在于它们是分层的，这意味着它们最适合建立父子页面关系，从而创建一个结构良好的站点地图。同时，文章更侧重于元数据，我们可以通过添加标签或将它们放入类别组或我们触手可及的任何自定义分类法来组织内容。

Almanac是基于页面构建的，而不是文章。页面擅长分层结构，而Almanac是一个高度结构化的区域，具有典型的站点地图式流程，它恰好遵循字母顺序。例如，CSS属性的条目，比如aspect-ratio，路径为：Almanac → 属性 → A → Aspect Ratio。

这听起来不错，对吧？不错，但是页面在模板中的查询比文章更困难，文章有更多可用于过滤等的元数据。另一方面，页面则不然。（至少不是显而易见的。）它们通常作为结构化对象返回，因为，你知道，分层结构。但这也意味着我们必须手动创建所有这些页面，不像标签和类别那样会自动生成归档。为字母“A”创建一个空页面，它是“属性”页面的子页面——本身是Almanac的子页面——感觉太傻了，仅仅是为了有一个逻辑位置来插入以字母A开头的属性。这对于属性和选择器都必须这样做。

真正的问题是Almanac的功能不足。我们想在那里发布其他CSS内容，例如函数和@规则，但Almanac最初只构建用于显示两组内容。这就是为什么我们从未发布其他任何内容的原因。这也是为什么通用选择器和伪选择器在同一个桶里的原因。

扩展空间以容纳更多内容是我工作的范围，我知道我将有机会在此过程中调整样式。

一个模板统治所有

事情就是这样做的。最初的做法是使用单个模板来处理Almanac索引和列出选择器和属性的字母页面。这很巧妙。页面首先检查当前页面是否是位于页面层次结构顶部的Almanac页面。如果是该页面，则模板会在同一页面上的两列中输出选择器和属性的结果。

该查询非常令人印象深刻。

<?php function letterOutput($letter, $selectorID, $propertyID) {
  $selector_query = new WP_Query(array(
    'post_type' => 'page',
    'post_status' => 'publish',
    'post_parent' => $selectorID,
    'posts_per_page' => -1,
    'orderby' => 'title',
    'order' => "ASC"
  ));

  $html = '<div>';
  $html .= '<div><a>' . $letter . '</a></div>';
  $html .= '<div>';

  while ($selector_query->have_posts()) : $selector_query->the_post();

    $html .= '<details><summary>';
    $html .= '<h2><code>';
    $html .= get_the_title();
    $html .= '</code></h2>';
    $html .= '</summary>';
    $html .= get_the_excerpt();
    $html .= '<code>';
    $html .= get_post_meta(get_the_id(), 'almanac_example_code', true);
    $html .= '</code>';
    $html .= '<a href="'%20.%20get_the_permalink()%20.%20'">Continue Reading</a>';
    $html .= '</details>';
  endwhile;

  $html .= "</div>";
  $html .= "</div>";

  return $html;
}

这实际上只是一半的代码片段。请注意，它只标记为$selector_query。它会再次循环遍历$property_query。

从那里，该函数需要调用26次：字母表中的每个字母一次。它需要三个参数，即字母（例如A）和“A”页面的页面ID（例如14146、13712），它们是选择器和属性的子页面。

<?php echo letterOutput("A", 14146, 13712);
  // B, C, D, E F, G, etc.
?>

如果我们当前不在索引页面上呢？模板会输出该特定部分（例如属性）的子页面的字母列表。一个模板就足够了。

查询子页面

我可以修改letterOutput()函数以获取更多页面ID来显示其他部分的字母页面。但老实说，我只是不想那样做。我选择改为将函数减少为一个页面ID参数，而不是两个，然后拆分模板：一个用于主索引，一个用于“子部分”（如果有的化）。是的，这意味着我的WordPress主题目录中会有更多模板，但这主要针对我个人，我不介意。我可以检查我所在的子页面（是属性索引、选择器索引、@规则索引等），并分别获取这些子页面的内容。

函数的另一个问题是什么？所有生成的标记都夹在while()语句中。即使我想按部分解析查询以保留单个模板架构，也不像我想在其中任何地方放置if()语句而不会导致PHP致命错误或通知。再说一次，我对彻底修改该函数不感兴趣。

字母归档

发布所有这些部分的字母的空子页面，然后将它们附加到正确的父页面，这是一项大量的手工工作。我知道，因为我做过。当然有更好的、甚至是编程的方式，但是将内容从页面转换为文章并从这个角度出发并没有吸引我，而且我当时时间紧迫。我们并不总是能够找到一种“理想”的方式来做事。

根据WordPress的说法，将这些字母页面中的任何一个称为“归档”是一种误称，但这正是我看待不同部分的子页面的方式——如果这些内容是作为文章而不是页面构建的，那就会是这样。如果我有一个伪选择器部分，那么我将需要A到Z的各个页面，这些页面反过来充当各个伪选择器的父页面。三个新的部分，每个部分有26个字母，这意味着我创建了78个新页面。太棒了。

您可以通过Almanac页面的面包屑（例如，aspect-ratio属性的此页面）或单击任何部分中的大写字母（例如，属性的此页面）来访问字母页面。

我们从未认真对待这些页面。它们是为了结构而存在的，但并不是很多人会访问它们。它们本质上是占位符。有用，是的，但仍然是占位符。我们对这些页面如此不认真，以至于我们从未正式为它们设置样式。这是一个CSS继承的模型，告诉你什么。

这就是我抓住机会在视觉上进行润色的地方。自从几个月前回到这份工作以来，我一直都在处理设计中庞大而粗犷的事物。例如，您看到的超大标题和厚厚的阴影。

这不是我的自然审美观，但我认为它与CSS-Tricks很搭配……也许，只是也许，Chris Coyier脸上会流下欣喜的泪水。也许吧。

导航

在主索引页面上显示的导航中添加了另一个增强功能。我将顶部的字母导航替换为一个导航，它可以带您到每个部分，现在我们可以直接在WordPress中编辑页面，而无需绕过开发。

唯一让我困扰的是，我将它硬编码了，而不是将其制作成一个合适的WordPress菜单，我可以从管理界面进行管理。[在他的待办事项列表中添加一个TODO。]

自从我将Almanac索引从完全显示选择器和属性列表中解放出来后，我就可以真正地将其用作我们正在添加的大量部分的索引。

我们可能需要在某个时候让主页面内容与导航的冗余度降低，但我认为这是一个良好的开端，我们可以从中构建。此外，就标题而言，它现在与网站主菜单中链接的其他“顶级”页面更加一致，这不会坏事。

哦，对了，当我们谈论导航时，新的部分已添加到各个Almanac页面的现有左侧边栏中，以帮助跳转到任何部分中的其他条目，而无需返回索引。

快速参考内容

我将要提到的最后一个增强功能很小，但我认为它带来了积极的影响。如果您转到索引的任何子页面——即选择器、属性、伪类、函数、@规则——则无需跳转到完整页面，即可随时获得每个条目的代码片段和高级定义。

我们一直非常重视“快速访问示例”，我认为这在很大程度上帮助了这一目标。

“你也可以做[x]……”

是的，还有很多机会来改进。我唯一的目标是将事情改变得足够多，以便Almanac涵盖的内容不仅仅是选择器和属性，并且可能在这里和那里进行一些样式调整。我还想做很多事情，也许我们会做到，尽管是逐步进行的。

什么样的事情？好吧，首先是那个硬编码的索引导航。但更重要的是，我想继续推动主页面。它以前发挥着巨大的作用，而我几乎把它抹去了。找到一种方法来列出所有条目的方法——对于所有部分——在我们只有两个部分时所做的那样，将会很好。这是我计划研究的事情。

是的，我们想在那里涵盖更多CSS内容，例如通用术语、媒体和用户首选项查询，可能是规范……您明白了。Almanac对我们团队来说是一个资源，就像对您一样，我们每天都会参考它。我们希望它充满有用的信息。

就是这样。

您现在可以停止阅读，直接前往Almanac进行虚拟漫步。

以上是重新加工CSS年鉴的详细内容。更多信息请关注PHP中文网其他相关文章！