1

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

在设计页面的 html 时，什么是好的指导方针，以便 css 可以在后验中应用。

4

7 回答 7

7

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

一般来说，你应该只为你想要的功能使用最自然的 HTML 元素。列表应该是列表、导航链接等。

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

要使链接真正样式化，您只需在文本周围添加一个 span 标签：

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

这样，通过使用“滑动门”技术，通过将一个背景添加到锚标签和另一个背景到跨度标签，很容易给它一个动态按钮的外观。如果链接没有设置样式，则 span 标签根本不会影响布局。

于 2009-09-22T08:23:47.630 回答
2

你可以看看css Zen Garden，看看他们是怎么做的。

于 2009-09-22T08:22:51.887 回答
1

不要这样做。

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

更好地制作一个包含许多只会产生有效值的选项的大定制部分。允许上传图片，在提交时检查它们的大小限制。

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

允许用户编辑css是否安全？

反正这种定制只能针对比较简单的页面进行，毕竟只是页面而已。我们在这里谈论的是一个 SaaS 应用程序，它通常有一个非常复杂的 UI，试图模仿经典的桌面软件。我怀疑客户是否能够正确定制一个复杂的 CSS。好吧，不是没有聘请专业的程序员，他会一直打电话给你清理事情。简单地提供一个高级设置屏幕会更容易。

于 2009-09-22T08:13:02.130 回答
1

有些可能是显而易见的：

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

  • 剪掉会改变页面外观的 Javascript。用户会破坏它。

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

  • 所有的 HTML 都是有效的，不是吗？

于 2009-09-22T08:56:41.650 回答
1

基本上，从合理语义（且有效！）的 html 开始，并确保使用相当广泛的元素数组（不要将所有内容都设为 div）和类（在看起来合适的地方随意撒上。使用各种元素可以用于更具可读性的 css 和 html，这对于易于样式化很重要。

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

您的 html 将是各种 API，因此保持其可理解性很重要。Javascript使事情变得棘手，所以如果你需要任何东西，我会尽量让javascript远离css - 确保javascript对dom所做的任何修改都与你的“API”一致 - 不要将特定的布局覆盖硬编码到的JavaScript。如果 javascript 需要制作一个弹出窗口来显示额外的信息，比如说，那么只需<div class="js-extrainfo-pop>...</div>在文档中的适当位置添加 a 并让 css 决定如何设置弹出窗口的样式，而不是处理 z-indexes、display: absolute 等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 来引入复杂性。
于 2009-09-22T09:04:56.390 回答
0

简短提示：我认为语义是这种方法的关键。我见过很多网站倾向于将它们的类命名为floatleft、width100px或right_column。这意味着您在 HTML 中说明了您希望网站的外观。为 CSS 类赋予语义含义，例如sidebar或widget，这使得 HTML 和 CSS 代码更具可读性。

也许看看 HTML5 和这将引入的新标签？可以在 Woork 找到不错的博文：HTML5 的 CSS 代码结构

于 2009-09-22T09:30:50.007 回答
0

我也正在经历这种类型的问题。对于类，我们需要采用 HTML 中的所有样式，并将其严格包含在一个 css 文件中。我希望我已经了解 CSS，并且只需要在该文件中进行样式设置，而不必返回并修复我在将样式从 HTML 切换到 CSS 时搞砸的所有事情。我想如果我必须设计另一个网站，我会将所有内容都放在一个 CSS 文件中，然后将内容输入到 HTML 文件中，然后一起运行它们。

于 2020-03-11T14:08:33.680 回答