SASS - 语义课程

Question

我们假设我们有这样的代码片段：

<div class="wrapper">
    <nav></nav>
    <header></header>
</div>

我认为在HTML 5时代，正确地设计代码非常重要。例如 - 您能告诉我哪种解决方案更好，为什么？我怎样才能学到SASS的“语义”？

首先（div的布局是持续的）：

.wrapper {
  nav { ... }
  header { ... }
}

第二个（所有要素都是分开的）：

.wrapper {} 
nav {} 
header {}

*当然 - 我们谈论的情况是，没有必要标记父子关系（所有这些只在站点发生一次）。

Answer 1

我不认为我们在这里谈论SASS语义，但答案是你可能想让你的样式嵌套反映你的标记的嵌套。

因此，如果您的标记是按照您的说法嵌套的，那么嵌套样式是正确的方法。此外，您可能希望在每个范围内谨慎添加更多全局样式，但最好将这些样式保持在最低限度（与软件开发中的全局信息一样）。

示例：

body {
    .some-global-body-style;
    .nav {
        .some-global-nav-style;
        .subnav {}
    }

    .content {}
}