设计HTML以便于CSS自定义的指南

Question

我正在做一个Saas项目，我们希望每个客户都能够为“他的”网站上传一个css页面。 （尽管实际上，所有客户的网站都是由我们使用虚拟主机托管的。）

在设计页面的html时有哪些好的指导方针，以便可以应用css a posteriori 。

Answer 1

您可以查看CSS Zen Garden处的代码，它专门设计为可设置样式。

通常，您应该使用最自然的HTML元素来实现所需的功能。列表应该是列表，导航链接等等。

使用div标签分隔逻辑分区中的内容为了使元素易于定位，请在它们上设置适当的类和id。

要使链接真正具有样式，您只需在文本周围添加span标记：

<a href="#"><span>text</span></a>

通过使用“sliding doors”技术，通过向锚标记添加一个背景而向span标记添加另一个背景，可以很容易地为其提供动态按钮。如果链接未设置样式，则span标记根本不会影响布局。

Answer 2

您可以查看css Zen Garden，看看他们是如何做到的。

Answer 3

不要这样做。

客户会将设计搞砸，并会打电话给您重新设置。

最好使用很多只能生成有效值的选项来制作一个BIG定制部分。允许上传图片，在提交时检查其尺寸限制。

自定义CSS也可能是攻击的来源。我们昨天谈了这件事。

Is it safe to allow users to edit css?

无论如何，这种自定义只能在相对简单的页面上执行，而不仅仅是页面。我们在这里谈论的是SaaS应用程序，它通常具有非常复杂的UI，试图模仿经典的桌面软件。我怀疑客户是否能够正确定制各自复杂的CSS。好吧，不是没有聘请一位专业的程序员，他会一直打电话给你，以便清理事情。简单地提供高级设置屏幕会更容易。

Answer 4

有些可能是显而易见的：

• 使用一致且明显的命名方案命名所有类，ID，但不要命名所有内容，如果它们都相同，则可以让较小的子对象成为未命名的对象。

• 剪切出可以改变页面外观的Javascript。用户将破坏它。

• 请勿使用CSS重置样式表。这会让事情复杂化。如果用户打算处理CSS，请让他们处理跨浏览器问题。

• 所有HTML都是valid，不是吗？

Answer 5

基本上，从合理的语义（和有效的！）html开始，并确保使用相当广泛的元素（不要使所有东西都成为div）和类（在适当的地方洒水。使用多种元素使得css和html更具可读性，这对于简单的可设置性非常重要。

然后，不要害怕添加额外的元素，只是为了使样式更容易。例如，如果你有一个代表某种网格的表（即，不仅仅是一个纯文本表），并且你想要一个特定的数据单元成为关注的焦点，那么虽然它可能只是简单在td上设置一个类，你最好在td中嵌套一个新元素（并在其上设置类）。像这样的额外嵌套元素大大减少了对复杂的css选择器的需求，甚至可能不支持跨浏览器。对于一个元素来说，拥有多个类比使一个具有多个含义的类更好;并且最好让一个类在任何地方具有相同的含义（即不依赖于其他类）。

您的HTML将是各种API，因此保持其可理解性非常重要。 Javascript让事情变得棘手，所以如果你需要任何东西，我会尝试将javascript保持在css之外 - 确保javascript对dom的任何修改都与你的“API”保持一致 - 不要硬编码特定的布局覆盖到javascript。如果javascript需要弹出窗口来显示额外的信息，比如说，只需在适当的位置向文档添加<div class="js-extrainfo-pop>...</div>，让css决定如何设置弹出窗口的样式，而不是处理z-index，显示：绝对等在javascript中。这样，客户端CSS只需要学习一个API - 你的html结构 - 而不是解决JS-wart。 DOM是一个可管理的界面，javascript相当复杂。

最后，大多数客户可能只想对您的基本布局进行微小修改;所以不要害怕在必要时使用表格。在不使用表格的情况下，通过css应用基于网格的布局是非常棘手的（通常是完全不可能的）。至少，你需要使用一个与table-tbody-tr-td结构平行的语法结构，并让人们通过css的display：table- *规则将它设置为一个表格（在任何地方都不支持好）。如果您确定需要网格，请使用表格并停止担心。无论如何，真正的css“英雄”将覆盖任何“隐式”布局，从合理的基点开始将使初始的无样式页面看起来更加明显，并将帮助客户做出自己的样式选择。

总之，

1. 确保您的html足够详细（如果有疑问，请使用额外的嵌套元素或额外的类）。
2. 如果只是为了便于阅读，你的html在语义上应该是“明显的”
3. 不要害怕强烈暗示特定类型的布局。
4. 确保您的API“干净” - 不要通过添加样式敏感的javascript来引入复杂性。

Answer 6

简短提示：我认为语义是这种方法的关键。我见过很多网站都倾向于命名他们的类，如 floatleft ， width100px 或 right_column 。这意味着您在HTML中说出了您对网站的期望。为CSS类提供语义含义，如 sidebar 或 widget ，这使得HTML和CSS代码更具可读性。

也许看看HTML5以及这将引入的新标签？很好的博客文章可以在Woork找到：CSS code structure for HTML5

Answer 7

我也很想解决这类问题。对于类，我们需要采用HTML中的所有样式并将其严格包含在一个CSS文件中。我希望我对CSS有所了解，而只需要在该文件中进行样式设置，而不必重新研究并解决将样式从HTML转换为CSS时所搞砸的所有问题。我想，如果我不得不设计另一个网站，我会将所有内容都放在一个CSS文件中，然后只需将内容输入到HTML文件中，然后一起运行即可。