如何用 CSS 分隔文本和 HTML答案

【问题标题】：How to separate Text and HTML with CSS如何用 CSS 分隔文本和 HTML
【发布时间】：2012-04-05 09:54:13
【问题描述】：

为了提高网站的可维护性，将所有文本从 HTML 中分离出来并放在一个独特的 CSS 样式表中是不是一个好主意？我的意思是，像这样：

HTML 文件

<body>
    <h1 class="home-title"></h1>
    <p class="description"></p>

    <!-- and much more elements... -->
</body>

包含所有文本的 CSS 文件

.home-title:after {
    content: "Welcome to my website!";
}

.description:after {
    content: "This is a demo ok?";
}

...

【问题讨论】：

答案在下面，多重的。你不应该仅仅因为你可以就做事。 但是告诉我，你为什么认为这是个好主意？也许我们可以提供帮助。
@MrLister 我认为如果你想用英文显示一个网站（例如）是个好主意，所以如果你点击一个按钮，你会加载其他包含所有样式表的页面西班牙语的句子。这种方式可以让您分离网络结构 (HTML)、样式 (CSS) 和文本（每种语言都有另一个 CSS）。但我看到这不好...... :(
@albertoblaz HTML 描述内容，并包含内容。您可以使用 Twig 或 HAML 之类的东西在服务器端将两者分开。但是，客户端应该接收 HTML 中包含的内容。您可以以一种语言生成内容，然后在客户端使用 JavaScript 进行翻译，但您仍然会错过 SEO 和可访问性。服务器端是这里的方式 - 查看 i18n / l10n 库，了解您使用的任何 CMS、语言或框架。

标签： html css text pseudo-element

【解决方案1】：

没有。

样式表应该用于布局。内容应在 HTML 代码中。

此外，正如jacktheripper 指出的那样，这对于 SEO 而言将是一场灾难，因为搜索引擎会认为您的页面只包含很多空元素。

【讨论】：

【解决方案2】：

不！对于SEO（搜索引擎优化），您应该使您的网站尽可能容易被网络蜘蛛阅读，并且使用 CSS 填充您的所有元素将是终端！

CSS 仅用于布局
HTML 仅用于内容

您的网站应该像教科书一样易于阅读 - 想象一下教科书上的一个页面，上面写着“去寻找本应在另一本教科书中出现的内容”，那会是多么烦人。这实际上就是你正在做的事情。

保持 HTML 和 CSS 分开！

这样想：

当且仅当你不能在 HTML 中做到这一点时，使用 CSS
当且仅当你不能在 CSS 中做到这一点时，使用 JavaScript

【讨论】：

【解决方案3】：

不，这不是一个好主意，我怎么强调都不过分。

content 属性用于添加装饰性文字。 HTML 用于页面的核心内容。

搜索引擎将无法为内容编制索引，无障碍工具将无法解释内容。而且使用起来会非常麻烦。

用 HTML、CSS、JavaScript 和某种服务器端语言做不到的事情可能不值得去做。

【讨论】：

【解决方案4】：

不，这不是一个好主意。

您是否正在尝试模板化您的网站？基本上，您希望某些 html 显示在每个页面上，但您不想每次更新该代码时都复制粘贴？我感觉这就是您所说的可维护性。在这种情况下，您需要使用服务器端脚本语言，例如 PHP。

这样你可以做这样的事情：

**some_page.php**
<?php
    require("template.php");
    open_template();
    echo '<p>Hello world!</p>';
    close_template();
?>

**template.php**
<?php
    function open_template() {
        echo '<html><head><title>Title!</title></head><body>';
    }

    function close_template() {
        echo '</body></html>';
    }
?>

其中 open_template 和 close_template 是在 template.php 中定义的函数，它们基本上显示您的内容之前和之后的任何内容。显然它可能比这复杂得多，但这将是一个比将内容放入 CSS 中更好的可维护性解决方案。

【讨论】：