html - 更改默认显示属性是一种好习惯吗？

Question

TL;DR 在我的 CSS 中更改默认 display 属性是一种不好的做法吗？

问题

最近，在我们的元素中，我们必须放置 2 个标题标签，使它们看起来像一个。它们具有相同的字体大小和相似的样式，因此唯一的问题是如何将它们并排放置。我们对此有两种不同的想法，并且讨论了更改默认 display 属性是否是一个好的做法

所以，我们最基本的代码

<div class="container">
    <h1>Header:</h1>
    <h2>my header</h2>
</div>

我们想要的结果:

Header: my header

注意:代码需要包含 2 个不同的标题，因为在移动版本中我们希望将它们显示在不同的行中(因此保留默认的 display: block)。

方法 #1:使用 display: inline

这很简单。 block 元素变为内联，因此它们位于同一行。这种方法的缺点是 h1 和 h2 的默认显示属性都已更改。

方法 #2:使用 float

H1 可以使用 float: left 属性定位在左侧。这种方法保持默认显示属性不变，但如果 .container 的长度不足以在一行中容纳两个标题，则需要进行一些修改。

问题

这一切都引出了一个简单的问题:更改 HTML 元素的默认 display 属性是一种不好的做法吗？它是否违反标准并应尽可能避免？或者它是我们的面包和黄油，这并不重要，只要代码在语义上是正确的(所以标题放在 h1 中，文章放在 article 等中。 ..)

Answer 1

回答你的主要问题:

tl;dr is it a bad practice to change default display property in my CSS?

没有

---

为什么？

答:因为这都是关于语义的

Elements, attributes, and attribute values in HTML are defined (by this specification) to have certain meanings (semantics). For example, the ol element represents an ordered list, and the lang attribute represents the language of the content.

These definitions allow HTML processors, such as Web browsers or search engines, to present and use documents and applications in a wide variety of contexts that the author might not have considered.

---

因此，在您的情况下，如果您确实需要语义上有 2 个标题，那么您可以更改它们的样式，包括 display 属性。

但是 如果您不需要在语义上有 2 个标题，但仅纯粹用于>cosmetics/design(响应式代码)，那么您的操作不正确。

看这个例子:

<h1>Welcome to my page</h1>
<p>I like cars and lorries and have a big Jeep!</p>
<h2>Where I live</h2>
<p>I live in a small hut on a mountain!</p>

Because HTML conveys meaning, rather than presentation, the same page can also be used by a small browser on a mobile phone, without any change to the page. Instead of headings being in large letters as on the desktop, for example, the browser on the mobile phone might use the same size text for the whole the page, but with the headings in bold.

This example has focused on headings, but the same principle applies to all of the semantics in HTML.

** 上面引用中的重点是我的 **

P.S - 请记住，不得使用标题 h1–h6标记副标题(或副标题)，除非它们应该是新部分或小节的标题。

---

考虑到以上所有内容，这里有一些(好的)方法:

如果你做这两个标题纯粹是为了设计，那么:

• 在 h1 中添加一个 span，使用 media query 或者使用移动优先方法(min-width) 或非移动方法 (max-width)。

PROs - 通过 CSS 轻松管理，仅更改属性。

缺点 - 添加额外的 HTML 标记，同时使用媒体查询。

h1 {
  /* demo only */
  background: red;
  margin:0
}
@media (max-width: 640px) {
  span {
    display: block
  }
}

<div class="container">
  <h1>Header:<span> my header</span></h1>
</div>

如果您需要在语义上使用这两个标题，那么:

• 使用flexbox布局。

优点 - 无需添加额外的 HTML 标记或使用媒体查询，是目前 CSS 中最灵活的(基本上是上述选项的缺点)。

缺点 - IE10 及以下版本部分支持或不支持，Can I use flexbox ? (IE10 及以下版本的回退是 CSS TABLES)

.container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /*demo only*/
  background: red;
}

h1,
h2 {
  /*demo only*/
  margin: 0;
}

h2 {
  /*640px will be flex-basis value - can be changed as prefered */
  flex: 0 640px;
}

<div class="container">
  <h1>Header:</h1>
  <h2>my header</h2>
</div>

来源:

• W3C specs - 3.2.1 Semantics
• W3C specs - 4.12.1 Subheadings, subtitles, alternative titles and taglines