html - 样式化 html 标签是不好的做法吗？

<分区>

想要改进这个问题？ 更新问题，以便 editing this post 可以用事实和引用来回答它.

关闭 3 年前。

例如，放置

是不好的做法吗

img {
  display: inline-block;
  height: auto;
  max-width: 100%;
}

让我网页上的所有图片都响应而不是使用

img-responsive

一切，或设计我的 h1 到 h6 标签。

最佳答案

不，这不是坏习惯。学会区分概念是这里的关键。

通常，标签样式仅用于在最通用的网页基础上定义/重置样式。您可以看到的最常见的情况是用于为跨浏览器目的重置样式。有一些像Normalize.CSS这样的支持会这样做。

然后，当您的元素依赖于像 Bootstrap 或 Foundation 这样的框架时，它们将具有自己的样式。通常在这个阶段他们使用类来获得更好的结构和重用。

在这里，您可以选择从框架继承样式，也可以创建自己的样式。

附带说明一下，它仍然建议使用类来进行样式设置。例如给定这个 HTML 结构。

<div class="profile">
  <img class="avatar-url" src="..." />
  <p>John</p>
</div>

和

.profile p {
  font-size: 16px;
}

暂时有效，当name是它唯一拥有的东西。随着时间的变化，您可能需要添加 title到 profile block 。

<div class="profile">
  <img class="avatar-url" src="..." />
  <span class="title">Mr. </span><span class="name">John</span>
</div>

现在，您可能会在这里看到一些问题，包括:

你的 CSS 会崩溃，因为没有更多的 <p>标记周围。
需要重写 CSS 以适用于新结构。在可扩展性方面，这被认为是不好的做法，因为它可能会破坏您可能无法控制的其他地方。
您强制名称使用 <p>标签。当一个标签有自己定义的属性需要更改为另一个标签时，请考虑这可能会破坏您的布局。特别是在 inline 之间切换和 block显示属性。

此外，将样式与类一起使用还可以提高代码的可读性。阅读类似 .list .item 的内容总是更容易比 .list div .

在 CSS 特异性计算方面，标签的优先级最低。因此，要覆盖定义的类，如 .btn , 你需要使用 .btn至少。

关于html - 样式化 html 标签是不好的做法吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59003621/

相关文章：

javascript - 隐藏 Popup Div 无法正常工作