我应该如何严格地将样式与 html 代码分开？答案

【问题标题】：How strictly should I keep styling separated from the html code?我应该如何严格地将样式与 html 代码分开？
【发布时间】：2018-04-26 06:51:34
【问题描述】：

在干净的 html 代码和干净的 css 代码之间划分优先级的最常见或被接受的方式是什么？

在我看来，有两种可能的方法……

您可以使用与样式相关的最少标记的 html 代码。不利的一面是，当您为不同的对象添加类似的样式（在这种方法中缺少合适的类）时，css 往往有点凌乱并且可能有点多余。

另一种方法会产生更简洁的 css 代码，您可以在其中为不同样式预定义类，例如 w3.css 或 bootstrap。这一次的缺点是你最终可能会得到一个严重依赖标签的类属性的 html 代码，有时是几个类的组合；这意味着 html 标记并没有真正与样式分离。

我意识到没有明确的答案，两个选项之间的界限是浮动的。但是，鉴于您没有使用任何预编译框架，首选方法是什么？

编辑：问题不在于内联 CSS。它是关于如何考虑使用预定义的 css 类。例如……如果您向某些 div 添加一个类似于“w3-panel”的类，那么您实际上在 html 代码中添加了一些边距。如果您使用选择器专门针对这些 div，则可以使 html 没有样式。

前者产生更干净的 css 代码，后者产生更干净的 html 代码。在不实现框架（强制您通过向 html 添加类来设置样式）时，哪条路线是最被接受的路线？

【问题讨论】：

这个问题有点过于宽泛，无法在本论坛中讨论，您会看到很多人会选择it depends 之类的答案。
欢迎来到 Stack Overflow！这个问题要么太宽泛，要么基于意见，要么需要讨论，因此对于 Stack Overflow 来说是题外话。如果您有具体的、可回答的编程问题，请提供完整的详细信息。

标签： html css code-separation

【解决方案1】：

分离的好处是更容易维护，如果你觉得 css 太杂乱，可以看看 SASS 或 SCSS。如果你使用 jQuery 来操作你的 CSS，如果你有你的定义在一个 CSS 文件中会更容易。恕我直言，您可以做出的最糟糕的选择是将其混合在一起 - CSS 中的一些定义和 HTML 中的其他定义 - 您现在可能会发现它很有用，但请尝试在几个月内更改站点。

【讨论】：

【解决方案2】：

这真的取决于您的应用业务。

如果您将样式放在 html 中的同一文件中，文件大小会增加，并且当您为每种类型添加新的 css 时会变得混乱，但是由于您的 css 和 html 在同一个文件中并且 css 编写和使用得很好，页面加载时间将是最短的，因为 html 在同一文件中查找 css。

如果您将样式放在单独的 css 文件中，它将具有良好的可读性和可访问性，您将有单独的样式和标记层。但是每次页面加载，您包含的 css 文件也会被加载，因此会增加页面加载时间。

如果您的应用程序或 html 页面是一次性的，即将来没有太多的进一步添加，并且大部分情况将保持不变，则不需要单独的 css 文件。

如果您的应用程序会不断增长或 html 页面会经常更新，那么您应该是单独的 css 文件。

【讨论】：

【解决方案3】：

我个人认为最好从一开始就尽量拆分代码。（HTML 用于标记，CSS 用于样式等）。

专业版(+)

更容易排除故障
您可以扩展并在以后引入支持工具，例如用于 CSS 的 SASS 等。
可以在人员之间拆分任务。
其他程序员更容易理解文件的设置。

否定(-)

花点精力自律，真正保持代码拆分。
有时您需要更大的显示器才能并行查看拆分的代码。

【讨论】：