自动 HTML 生成指南，实现最大程度的 CSS 样式化

发布于 2024-11-03 19:45:04 字数 852 浏览 1 评论 0原文

我想询问一下您在自动 HTML 生成方面的经验以及编码人员应该考虑什么才能达到最大的样式性？请添加良好的指南并解释其原因。

我将从 3 点开始：

您创建一个 div 或 td 或任何其他带有文本内容的内容..在其中添加一个跨度！
```
文本内容
```
而不是
```
文本内容
```
原因：有时您必须对文本内容应用不同的样式。如果您只能通过周围的 div 间接访问它，则有些事情是不可能的。
将 BR 放在 div 后面！
```
foo bar

;
```
而不是
```
foo bar;
```
原因：假设您决定让一些 div 向左浮动，您需要在它们之后清除向左。您现在可以使用
```
div#myId + br {
  清除：左；
}
```
如果您不需要 br，您可以简单地执行以下操作：
```
div#myId + br {
  显示：无；
}
```
如果没有附加 br，div 的浮动会很麻烦，并且您无法正确对齐内容。
这“应该”是显而易见的，但仍然是：使用类和 ID，以便您可以正确访问 CSS 中的每个项目。

好吧，这就是我发现的，现在轮到你扩展这组指南了:-)

I'd like to ask about your experience with automatic HTML generation and what should coders consider to reach a maximum stylability? Please add good guidelines and please explain the reason for them.

I'll start with 3 points:

You create a div or a td or anything else with text content.. Put a span in it!
```
<div><span>text content</span></div>
```
instead of
```
<div>text content</div>
```
Reason: Sometimes you have to apply a different styling to the text content. If you can only access it indirectly by the surrounding div some things aren't possible.
Put BRs behind divs!
```
<div id="myId">foo bar</div><br>
```
instead of
```
<div id="myId">foo bar</div>
```
Reason: Let's say you decide to let some divs float left, you'll need to clear left after them. You can do that now with
```
div#myId + br {
  clear: left;
}
```
And if you don't need the br, you can simply do:
```
div#myId + br {
  display: none;
}
```
Without that appended br the floating of divs is a real hassle and you can't properly align the content.
This 'should' be a no-brainer but still: Use classes and IDs, so that you can properly access every item in CSS.