模板易于更改。内容通常不会。

HTML 有两种

构成模板的 HTML
作为内容的 HTML

我觉得关于 HTML 的一些讨论由于没有做出这种区分而变得模糊。

例如，我喜欢 Harry Roberts 关于标题元素类的方法。Harry 谈论的是“应用”，所以也许这是暗含的，但让我们明确一点：这些类用于 HTML **模板**中的标题，而不是 HTML 内容。

（这只是一个我想到的小例子，这个概念广泛适用。）

如果它是存储在数据库中的 HTML 片段，那么它就是内容

更改内容并非 *不可能*，但可能更困难且更危险。

网站可以持续很长时间。内容往往会越来越多。例如，在 CSS-Tricks 上，有 2260 篇帖子和 1369 个页面。多年来，我在这里和那里添加了一些类来做一些样式化的东西，随着时间的推移，我总是后悔。

为什么后悔在内容中使用类？

也许你会发现你给类起了错误的名字，并开始讨厌它。
也许你会将类更改为你更喜欢的名称。
也许你会停止使用该类。
也许你会忘记该类甚至存在，并且在重新设计中不会处理它。
也许你会再次使用旧名称，但它现在执行了新的操作并弄乱了旧内容。

这些只是一些可能性。

但当您决定要“修复”旧内容时，就会产生痛苦。你该怎么办？查找使用这些类的所有旧内容并将其清理干净？尝试运行数据库查询以删除类？繁琐或危险的工作。

Markdown 内容有所帮助

一旦掌握了 Markdown，编写起来就会很舒服。但它最好的功能是它不会（甚至不允许你）在它生成的任何 HTML 上添加类。除非你直接在 Markdown 中编写 HTML，这总是感觉有点脏（应该如此）。

样式内容

那么，如何在没有类的情况下设置内容样式？希望内容的样式相当一致。您可以将样式范围限定到内容。

.content h2 { }
.content figure { }
.content table { }

假设您绝对需要内容中不同变化的事物

如果您必须违反内容中不使用类的“规则”，也许您仍然可以对处理方式应用一些智能。

如果您使用的是 CMS，它可能有一些默认类，这些类可能会保留下来。例如，如果您选择，WordPress 会在图像上输出像 align-right 这样的类。
您可以以一种不只是“内容块”一部分的方式插入内容吗？例如自定义字段？
您可以通过抽象插入内容吗？在 WordPress 行话中，比如短代码？[table data="foo" style="bar"]
如果您必须使用类，您可以以一种感觉永远有效的方式命名它吗？

模板易于更改

这正是它们的目的！与它们生成的页面数量相比，您可能只有少数几个模板。更改它们，所有使用它们的內容都会更新。围绕内容的 HTML 将具有您使用的所有有用的类。

所以

模板的 HTML = 类，耶！
内容的 HTML = 保持原始！

Lewis Cowles (@LewisCowles1)

# 2016年3月4日

那么你完全放弃了内容中需要 CSS 的 HTML 元素吗？当然，这样的规则更像是例外，而不是情况。它有利于使用图像来创建图形上更有趣的元素的网站，并且可能会损害无障碍网络。

我认为我的方法更容易。在我查看内容时迁移内容；主要是将渲染在 DB 外部的 DOM 输出作为其呈现状态，将其映射到 DB 的单独副本。标记良好的、可寻址的模板在这里是一个胜利！

一旦你从 A->B 获得了它，如果需要，你可以使你的模板更复杂，通过 CPT 和短代码添加。也许添加到类别中（向数据添加一些内容，以便我们知道它来自迭代 X。（让我们面对现实，它已经死了或正在消亡，有时杀死它或标记为重新访问更仁慈）。

Adrian

评论永久链接# 2016年3月4日

哈哈，什么

我不明白你刚才说的一个字。
Philips Ekuma

评论永久链接# 2016年3月14日

第一段之后我就迷失了。Lewis，你的意思是？

Chris Coyier

# 2016年3月4日

@chriscoyier 这，无数次。之前从 CMS/内容建模方面写过：https://127.0.0.1/V8RjkBSny2

— Jeff Eaton (@eaton) 2016年3月4日

Chris Johnson

# 2016年3月4日

我来自大约 15 年前就开始构建网站的那个群体，并且在大约 10 年前阅读了 Zeldman 的经典著作后得到了极大的改进。由于这本书，我们似乎都对语义标记、将样式与内容分开以及编写 css 有了基本的了解。

这堂课是否已经失传给了年轻一代，以及“专业的前端开发人员”是否都只使用庞大而复杂的库而没有理解很多基本原理？他们知道“float: left”或 display: inline-block”是什么意思？！

例如，“@jensimmons 停止使用 javascript、bootstrap/foundation 进行布局。使用基本的 css。保持简单！” https://twitter.com/RaineDe/status/705772029832732672

我想，使用（或发明）一项技术的第一波人必须记住，下一波人无法像他们一样学习（或发明）它，因此他们对我们认为理所当然的基本原理没有深入的了解。

该死！这太糟糕了，因为现在我想我们有义务教他们 :\

Vanderson

# 2016年3月4日

我同意在内容中使用类通常是不好的，但我们也以某种方式被所见即所得编辑器所困。

对齐问题是最大的问题。我 *不* 想要使用内联样式来执行左/中/右对齐。因此，我们被迫为此使用类。

自从我开始在客户端驱动的网站上工作以来，我只遇到过一种需要并且实际上有帮助的在内容中使用类的场景。

我曾为一家非常大的公司做过网站的技术开发工作。而设计公司提供了很多格式化的内容。例如，各种嵌套的盒子，每个盒子中都有不同样式的列表。他们为了构建这个设计收取了巨额费用，所以这是我唯一能想到他们需要这么做的理由。

现在，想象一下，你要告诉内容编辑（通常是秘书或其他非网络办公人员）选择下拉菜单来设置样式。或者让他们跳过任何复杂的步骤来设置一个盒子的样式，然后确保使用正确的样式来设置该盒子内的列表，以便与设计公司的设计规范相匹配。真是糟糕透了。

所以，我创建了一些 HTML 代码片段/模板，这些片段/模板可以作为整个区块被所见即所得编辑器插入。然后内容编辑只需要在需要的地方替换文本即可。

将来这会导致 CSS 混乱吗？我不这么认为。原因是，当这些样式需要被审查时，整个网站很可能已经重新设计过了。

但是对于长期存在的，比如博客这样的内容，其内容在设计更改时不会被修改，我同意，使用类会是一团糟，非常糟糕。

但考虑到一个简单的 SQL 查询可以相当容易地找到所有使用某个类的实例，所以如果它确实能够帮助解决一个复杂或困难的问题，也许它并没有那么糟糕。

伯恩哈德·施特姆

# 2016年3月4日

现在，这将是使用 CCK 驱动的 CMS 的完美时刻。如果你将所有标记都放在你的模板中，你和你的用户只需要输入内容 (C)。通过大量的内容块，你可以构建 (C) 你的页面。这种套件 (K) 在已知的 CMS 中非常常见，并且绝对不需要使用 markdown 或任何其他文档语言来存储你的内容。
当然，CCK 需要一个详细的内容策略，但它会为你带来很多好处
– 灵活性（你可以随时向现有内容添加新的内容块）
– 稳定性（你的设计将掌握在你手中，而不是掌握在一个不可预测的所见即所得编辑器手中。）
– 转换（将相同的内容用于不同的输出或布局）
– 安全性（如果你以后不必使用正则表达式来查找类或标签，那么更容易将原始内容安全地保存到未来）

仅供参考
伯恩哈德

克里斯托夫·韦伯

评论永久链接# 2016年3月5日

没错！除了最简单的网站外，内容都需要结构化。我为我的编辑提供了一个简单的所见即所得编辑器，它允许使用语义标记。其余部分是用额外的字段和强大的模板构建的。

尼尔·G

# 2016年3月4日

WordPress 插件 Advanced Custom Fields，就这些 – http://www.advancedcustomfields.com/

你永远不应该在 WordPress 中使用单个所见即所得字段。这会迫使你将布局塞进那里。

迈克尔

评论永久链接# 2016年3月7日

你永远不应该在 WordPress 中使用单个所见即所得字段。

这是一个非常激烈的言论。不幸的是，我们中的许多人生活在一个这样的世界里：客户偶尔会希望有一种简单的方法来创建一个列表或斜体化某些内容，而无需先学习 HTML。

艾萨克·G

# 2016年3月5日

在 CMS 世界中，似乎存在一个普遍认可的分歧，即本文所表达的内容（通过一个大型内容编辑器/字段来编辑页面内容，其中内容纯粹是内容，没有类或其他内容）和通过自定义字段/部分/等来编辑更“结构化”的内容（例如：WP 中“Advanced Custom Fields”的内容管理方法）。

这两种方法似乎都各有优缺点（内容创建者在创建/编辑时需要在不同的字段之间切换，内容存储在多个数据库或平面文件字段中，这可能使网站迁移变得棘手等等）和优点（大量的强大模板潜力，没有来自一个大型所见即所得字段的格式错误的结构相关 HTML 等等）。

现在试试这个：访问 Medium，创建一个帐户，并创建一个草稿帖子来体验他们的内容编辑器。它很棒。确实是上述两种方法的最佳结合。内容创建者/编辑拥有统一而强大的内容编辑体验。开发者/设计师拥有以超强大的方式处理这些内容的魔力。

只是一个想法。

马库斯·费恩斯坦

# 2016年3月5日

这难道不是 Jens Meier 等谷歌开发者多年来一直在撰写的内容吗？现在每个人都应该知道这一点，但所谓的专家们却无法阻止自己污染 HTML——更糟糕的是，他们还叫嚣着让其他人也污染他们的代码，或者落后于时代几千年，并将自己的智慧当作自己的东西来兜售。

编辑：例如 http://meiert.com/en/blog/20140722/docs-and-apps/。保持简单。

Chris Coyier

# 2016年3月6日

斯努克

在一个理想的世界里，CMS 应该允许你在内容中定义和嵌入“对象”。一个对象具有一定的复杂性。例如，一段摘录可能有一个署名。一张照片可能有一个标题和一个来源。或者它可能比这更复杂。

问题是，我很少见到一个能很好地处理这种情况的 CMS。使用一个大型文本框不利于在其中嵌入复杂的对象。使用一系列对象进行艺术指导——许多人试图用一个大型所见即所得文本框来做到这一点——并不简单。设计一个界面来实现强大的艺术指导也不容易。

另一个问题是，在内容级别赋予艺术指导的权力往往会导致许多场景被忽略，例如各种屏幕尺寸和布局。它们被忽略是因为很难在内容创建工具中提高人们对这些场景的认识。这会减慢人们的速度。

这是一个非常困难的问题。这就是为什么我们试图将内容与呈现分离的原因：它使用户不必考虑其内容可能被使用的所有方式。

内特·格林

评论永久链接# 2016年3月7日

我去年秋天参加了几门内容策略课程，并被介绍了“内容类型”的概念，这听起来很像斯努克在这里所说的“对象”。我们的一些 CS 作业的重要部分是开发一份策略文档，概述内容类型是什么，它们的所有部分是什么，以及需要什么样的 CMS“模板”（命名不当，与你所说的 HTML 模板不同）才能允许作者创建和维护这些类型。我觉得，如果我们花时间思考内容策略，在很多情况下，我们可以获得对更优雅的解决方案的支持，这些解决方案可以满足作者的需求，但不会让他们用完全的所见即所得控制来破坏设计。
凯西

评论永久链接# 2016年3月7日

我在 WP 中发现的一种实现方法是将 ACF 与短代码结合使用。你在 ACF 中创建一组字段，以及一个“widget”文件，你将它放在主题目录中的某个地方，以及一个将两者绑定在一起的短代码函数。

这绝不是一个完美的解决方案——我曾尝试将其包装成一个插件，但我没有看到任何方法可以做到这一点，而不会涉及复制大量 ACF 的功能或依赖于它，从而要求用户安装它。
阿戈普

评论永久链接# 2016年3月7日
这实际上是我们开始对我们的 WordPress 网站采用的方法——使用“内容对象”来代替具有平面自定义字段方法的单个正文字段。

我们有一个名为 Layout Builder（无耻地自我宣传）的工具，它允许我们将这些“内容对象”（我们称之为“元素”）放到行和列中。

例如，根据斯努克的文章，你可以定义一个“摘录”元素
```
class PullQuote extends \LayoutBuilder\Element
{
    protected $_code = 'pull_quote';
    protected $_label = 'Pull Quote';

    protected $_fields = array(
        'content' => array(
            'code' => 'content',
            'label' => 'Content',
            'type' => 'wysiwyg'
        ),
        'byline' => array(
            'code' => 'byline',
            'label' => 'Byline',
            'type' => 'text'
        )
    );
}
```
然后你为它创建一个视图
```
<div class="pullQuote">
    <?php if (isset($args['byline'])): ?>
        <div class="pullQuote-byline"><?php echo $args['byline']; ?></div>
    <?php endif; ?>

    <div class="pullQuote-content"><?php echo $args['content']; ?></div>
</div>
```
然后你进入 Layout Builder，决定你想要在哪里放置一个摘录，然后将其拖放到那里。填写内容，填写署名（如果你想要的话），它就会显示出来（所见即所得）。当你满意后，保存“布局”，并将其放在你的页面/帖子/文章/任何内容中

[layout slug=example]

这也解决了不同屏幕尺寸的问题，因为 Layout Builder 中的列基于响应式网格，就像你的前端一样。你看到的就是你得到的——如果你想在较小的屏幕上查看你的页面，只需将 Layout Builder 界面调整为更小即可。

如果你想尝试这个想法，运行 public/example/builder.php（参见此处）——它不依赖于数据库或任何类型的 CMS，它只是一个独立的演示。

斯瓦蒂

# 2016年3月7日

非常正确！模板很容易更改。内容通常不会更改。

萨利姆·法伊克

# 2016年3月9日

#评论
{一篇非常好的文章；
}

詹姆斯·D

评论永久链接# 2016年3月29日

是的，很棒的文章

此评论线程已关闭。如果您需要分享重要信息，请联系我们。