改变默认显示属性是一种好的做法吗？ [英] Is changing default display property a good practice?

问题描述

TL; DR 在我的CSS中更改默认显示属性是一种糟糕的做法吗？

Issue

最近，在我们的项目中，我们不得不放置2个标题标签，使它们看起来像一个。他们有相同的字体大小和类似的样式，所以唯一的问题是如何将一个放在另一个旁边。我们有2个不同的想法，它可以讨论是否改变默认显示属性

$ b $因此，我们非常基本的代码

 < div class =container> 
< h1>标题：< / h1> 
< h2>我的标题< / h2> 
< / div> 
  

我们希望得到的结果：

< blockquote>

头文件：我的头文件

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

方法1：使用 display：inline

这非常明显。块元素变为内联，因此它们位于同一行中。这种方法的缺点是改变了 h1 和 h2 的默认显示属性。

方法＃2：使用 float

H1 可以使用 float：left 属性放置在左边。这种方法保留了默认的显示属性，但如果 .container 的长度不足以容纳两行标题，则需要一些黑客。

问题

这一切都会导致一个简单的问题：更改默认显示 HTML元素的属性？它是否违反了标准，应尽可能避免？或者它是我们的面包和黄油，它并不重要，只要代码在语义上是正确的（所以标题放在 h1 中，文章放在<$ c $

文章 etc ...）

解决方案

回答您的主要问题： b
$ b

tl; dr 改变默认显示属性是一种糟糕的做法在我的CSS？

NO

---

为什么？

A：因为它全部是关于语义的

HTML中的元素，属性和属性值被定义（通过本规范
）以具有某些含义（语义）。例如，
ol 元素表示有序列表，并且 lang 属性
表示这些定义允许HTML处理器（例如Web浏览器或
搜索引擎）以$ b的形式呈现和使用文档和应用程序。

---

所以，在你的情况下，如果你真的需要 ，那么你可以更改他们的样式，包括强> 显示 属性。

不过不必 这样做不正确。

看看这个例子：

 < h1>欢迎使用我的网页< / h1> 
< p>我喜欢汽车和货车，并拥有一辆大吉普！< / p> 
< h2>我住的地方< / h2> 
< p>我住在山上的小屋里！< / p> 
  

因为HTML表达的是意义而非表达，所以同一页面
也可以通过手机上的小型浏览器使用，而不会对网页进行任何
更改。例如，在桌面的
上，标题不是大字母，而是移动电话上的浏览器可能在整个页面上使用
相同大小的文本，但标题为
大胆。

这个例子集中在标题上，但同样的原则将
应用于HTML中的所有语义。

** 上面的报价重点是我的 **

PS - 记住标题 h1 - h6

---

考虑到上面的所有内容，以下是一些（好的）方法：如果你纯粹为了设计而做两个标题，那么： / h3>

• 在 h1 span c $ c>，使用媒体查询移动第一种方法（ min-width ）或非移动方法（ max-width ）。





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





CONs - 使用媒体查询添加额外的HTML标记。



  h1 {/ * demo only * / background：red; margin：0} @media（max-width：640px）{span {display：block}}  

 < div class =container> < H1>头：其中跨度>我的标题< / span>< / h1>< / div>  




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






• 使用 flexbox 布局。






PRO - 无需添加额外的HTML标记或使用媒体查询，目前在CSS中最灵活（基本上是上面提到的 cons 选项）。





CONs - IE10及以下有部分或没有支持，我可以使用flexbox吗？（对于IE10及以下版本的回退应该是 CSS TABLES ）





  .container {display：flex; flex-wrap：wrap; align-items：center; / *仅限演示* / background：red;} h1，h2 {/ *仅限演示* / margin：0;} h2 {/ * 640px将以flex为基础值 - 可以更改为首选* / flex：0 640px; }  

 < div class =container> < H1>头：其中/ H1> < h2> my header< / h2>< / div>  

来源： W3C规范 - 3.2.1语义


• W3C规范 - 4.12.1副标题，副标题，替代标题和标语 / ul>
  

  TL;DR Is it a bad practice to change default display property in my CSS?

  Issue

  Recently, in our project we had to position 2 header tags so they would look like one. They had the same font size and similar styling so the only issue was how to place one next to another. We had 2 different ideas on that and it le do a discussion on whether or not is a good practice to change default display property

  So, our very basic code

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

  The outcome we would like to have:

  Header: my header

  Note: The code needs to consists of 2 different headings because on mobile version we want to display them in in separate lines (so leaving default display: block).

  Approach #1: Use display: inline

  This is pretty stright forward. Block elements became inline so they are positioned in the same line. The disadvantage of this approach is that default display properties of both h1 and h2 were changed.

  Approach #2: Use float

  H1 can be positioned on the left using float: left property. This approach leaves the default display property intact, but will requires some hacks if the .container is not long enough to fit both headers in single line.

  The question

  It all leads to a simple question: Is it a bad practice to change the default display property of HTML elements? Is it breaking the standard and should be avoided if possible? Or is it our bread and butter and it does not really matter, as long as code is semantically correct (so headers are placed in h1, articles are placed in article etc...)

  解决方案

  Answering your main question:

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

  NO

  ---

  WHY?

  A: Because it is all about semantics

  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.

  ---

  So, in your case if you really need to have 2 headings semantically then you can change their styles, including the display property.

  However If you don't need to have 2 headings semantically, but only for purely cosmetics/design (responsive code), then you are doing it incorrectly.

  Look at this example:

  <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.

  ** Emphasis in the quote above is mine **

  P.S - Remember that headings h1–h6 must not be used to markup subheadings (or subtitles), unless they are supposed to be the heading for a new section or subsection.

  ---

  With all this above in mind, here is a few (good) approaches:

  If you're doing the two headings purely for design then:

  • add a span inside of the h1, using a media query either using mobile first approach (min-width) or the non-mobile approach (max-width).

  PROs - easily manageable through CSS, changing only properties.

  CONs - adding extra HTML markup, using media queries as well.

  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>

  If you need to use the two headings semantically then:

  • use flexbox layout.

  PROs - no need to add extra HTML markup or the use of media queries, being the most flexible currently in CSS (basically the cons from option above mentioned).

  CONs - IE10 and below has partial or none support, Can I use flexbox ? (fallback for IE10 and below would be 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>

  Sources:

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

  这篇关于改变默认显示属性是一种好的做法吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！