表格:您的css是否适合您的标记,反之亦然？

Question

关于html表单,一个非常常见的标记模式是:

<form ...>
  <p>
    <label>Name:</label>
    <input .../>
  </p>
  <p>
    <label>Birthdate:</label>
    <input .../>
  </p>
  ..
  <input type=submit/>
</form>

您通常提供多少标记(类等)以允许表单的最灵活的可视化格式？也就是说,您添加了多少标记来帮助您的css选择器并使用通用选择器？

<form ...>
  <p class='name'>
    <label>Name:</label>
    <input .../>
  </p>
  <p class='birthdate'>
    <label>Birthdate:</label>
    <input .../>
  </p>
  ..
  <input type=submit/>
</form>

与

<form class='person' ...>
  <p class='name string'>
    <label>Name:</label>
    <input .../>
  </p>
  <p class='birthdate date'>
    <label>Birthdate:</label>
    <input .../>
  </p>
  ..
  <input type=submit/>
</form>

在第二种情况下,直接从数据库添加泛型类型("日期")可以更容易地一致地格式化日期字段.包装分组("人")以显示字段来自的模型也可以提供帮助.(或者我可以使用内部DIV.)然而,为了增加css重用,我发现自己添加了额外的标记.在我读过的一些书中,我听说标记越少越好(虽然这对我来说是真的很粗糙).例如,我很可能已使用其中一个先前块的标记,并为css添加了更多选择器.

决定标记有多大意义的原则是什么？或者在css方面放多少钱？

此外,我知道我可以选择输入的名称,但由于这是一个嵌套元素,我失去了从外部包装器("p")控制格式的能力,这通常是我想要额外控制的地方.

Answer 1

我确实尝试将 html 标记保持在最低限度。

HTML 表单是最难将 html 和 css 保持在最低限度的事情，因为如果不向它们添加类（例如文本框到文本框等），则很难在所有浏览器中定位所有各种输入。

如果该网站的所有表单都使用简单的文本框并且没有太多其他内容，则最小标记方法就可以很好地工作。然而，具有复杂标记的控件（例如 Telerik RAD 控件）无法使用简单的标记，并且通常需要额外的标记和类。

这些小技巧增加了标记，但也使 css 更加简洁，并且毫无疑问使这些元素的样式变得更加容易。

对于其他通用的 html/css，我倾向于使用尽可能少的类，例如

.Menu {}
.Menu li {}
.Menu li a {}

这种模式可以多次重复使用重复数据，并且可以使用很少的 html 标记来制作和设计模板。

有时添加类和诸如此类的东西是不可避免的，但我认为如果您通常同时考虑 css 和 html，那么您最终应该得到光滑的标记。

从一个站点到另一个站点，我很少重复使用 CSS。它是如此快速和容易地敲出任何你想要的风格，重新设计现有的皮肤以适应新的网站在我看来通常是不值得的。

主要是使用 CSS，我倾向于将从以前的网站中学到的知识应用到新网站中，以使所有浏览器的编码变得容易:)