HTML <header> / <footer>最常见的CSS实践

Question

在CSS中设置'main'标题（或页脚）样式的最佳样式是什么？

我的风格如下： header { ... }

但后来我记得，html中可以有多个标题......

1. 所以我改写了： body > header { ... }

但它并不美丽。在body > header .search { ... }

等几个地方写作

2.nd可能性： <header class="main-header">

但它也不是很漂亮。

1. 当然，可以忽略，可以有多个标题（页脚）。但是我没有为自己标记html / css，所以有可能，smb会在html中添加新的页眉/页脚元素。

那么，最好的风格是什么？这在谷歌，StackOverflow，微软，IBM等大公司中使用。

嘿！我有个主意！主要页眉/页脚简单header { ... }以及.some-element header { ... }等特殊页眉/页脚的内容是什么？现在对我来说很明显，这是最好的风格。我是对的吗？

Answer 1

你听说过BEM吗？它代表块元素修饰符，它可以帮助您实现可重用的组件。我认为你应该使用它，它会使你的代码好像样式和文档准备就绪。

更多here

Answer 2

我建议如下，假设您使用的是html5。保持尽可能简单，使其变得复杂。同时保持二级层次结构以读取代码和更快的css处理。

header{
 /* enter your css properties */
}
header p{
}
footer{
 /* enter your css properties */
}

Answer 3

重要的是，我们都要关注用户真正注意到的性能改进。所以它并不是关于它有多漂亮而不是优化。

对于CSS，我们必须考虑几件事情。如果是选择器，我们必须关注CSSOM的构建方式（您可以从团队Udacity提供的here课程中了解更多信息。）

出于性能问题，请使用类而不是标记。此外，使用两个或更多规则（如div>p>span）将会有更多时间呈现页面。

Answer 4

这真的是你喜欢什么。我认为最简单易读的方法可能是属性选择器。

header[main] {/*something*/}

另外：

<header main>Main header</header>

Answer 5

您可以简单地编写css代码来编写这样的代码  标题{}  或者如果你在dom上有很多标题，那么选择标题的第一个孩子：first-child {} 或者你可以写标题：nth-​​child（1）{}

希望它能帮助你

由于