css - 您的 XHTML/CSS 标记的语义如何？

Question

我认为我很擅长在我的页面上使用语义标记，但我仍然有一些这样的类：

/**** Aligns ****/
.right_align  { text-align: right; }
.left_align   { text-align: left; }
.center_align { text-align: center; }

从技术上讲，这是一个禁忌。但是当你只想在表格中放置一些文本时，我应该对语义标记有多疯狂？

score 13 · Accepted Answer

为什么要对齐文本？

问题的答案是选择器所需的 id 或类的名称。你想调整它，因为它是一个价格吗？

table .price {
  text-align: right
}

只要问问自己为什么要应用一种特定的风格，一切都会变得清晰。

我可能做得过火了，但我的上一个工作项目非常接近 100% 语义——我需要的任何非语义的东西（比如，我不能没有布局要求的填充 div），我使用 jQuery 动态添加。

score 2 · Accepted Answer

如果您想要表格单元格和对齐之间的紧密耦合，您可以style="text-align:right"直接在标签上分配属性。如果您不将它用于抽象级别，则没有理由通过类进行额外的间接级别。

score 2 · Accepted Answer

我尝试考虑为什么我想要在表格中右对齐的列。例如，如果列包含货币金额，那么我将使用名为货币的样式而不是 right_align。

score 1 · Accepted Answer

语义标记是一个令人钦佩的目标，但在现实世界中，您有时必须做出妥协。在某些情况下，做某事的唯一明智的方法是打破语义并只输入一个right_align.

编辑：人们似乎误解了我的观点。您应该尽可能使用语义标记。但是，在某些情况下，它实际上只是一种风格选择，并且没有任何固有的数据可以用来描述或分类它。对于大部分表格数据来说，这通常是正确的，尤其是在动态生成的情况下。

我遇到过客户希望能够动态控制数据网格中出现的列的情况。无法提前知道他们将选择显示什么类型的数据。如果他们想要一种使动态生成的列居中或右对齐的方法，最好让他们使用居中和右对齐类，而不是让它们style在任何地方粘贴属性。

score 0 · Accepted Answer

100% 语义标记是一个愚蠢的目标。你的平面设计师会说，“让我们把这个对齐”，原因是“因为这样看起来不错”。你应该怎么做，在 div 中添加一个“looksgoodthatway”类？恰到好处地调整它并继续你的生活！:)

score -3 · Accepted Answer

根据经验，出于可用性原因，您应该将令牌保留在尽可能多的行上。

我使用以下符号

匹配器，¶
匹配器¶
{¶
··属性：·属性；¶
}¶

你为什么问？这解决了许多碰撞问题，因为它减少了位置的数量 2 个不相关的变化可以同时在 2 个不同的地方发生（这会导致碰撞），并且当碰撞确实发生时，更容易看到是什么导致它并选择了正确的解决方案。

这是因为 SCM 的 DIFF 是面向行的，如果您将所有内容放在 1 行上，您将有 2 个选择，软管一套完整，或软管另一个。

此外，我发现，如果坚持这种特定的风格，可以很容易地编写检测 CSS 中错误的 lint 检查代码。

例如，找出错别字：

matcher 
matcher, 
{
    attribute property 
  attribute
}

在这种情况下，仅检查空格和分隔符一致性的代码也会检测到编码错误！

6 回答 6