Bourbon Neat 和语义化的 HTML5，BEM 呢？答案

【问题标题】：Bourbon Neat and semantic HTML5, what about BEM?Bourbon Neat 和语义化的 HTML5，BEM 呢？
【发布时间】：2017-02-01 06:09:27
【问题描述】：

我正在尝试写一个非常简约的博客作为重新学习 html 和 css 的一种方式。我试图了解应该使用什么来在普通标签、id 或类之间选择页面元素。

例如，这是我的一个页面的样子：

    <body>
     <header>
      <h1><a href="/">My fabulous blog</a></h1>
      <nav>
       <ul>
        <li><a href="#">Page one</a></li>
        <li><a href="#">Page two</a></li>
       </ul>
      </nav>
     </header>

     <section>
        <h1>Latest articles</h1>
        <article>
          <h1>Title</h1>
          <p>I like turtles</p>
        </article>

        <article>
          <h1>Title</h1>
          <p>I like potatoes too</p>
        </article>

      <a href="#">Browse the archive.</a>
     </section>

     <aside>
       <h2>Social</h2>
       <ul>
         <li>Twitter</li>
         <li>Facebook</li>
         <li>Github</li>
       </ul>
       </aside>

    <footer>© 1546-2032</footer>
    </body>

所以很简单，正如你所见，我没有使用任何类或 id。

css 看起来像：

    body {
      @include outer-container;
    }

    header {
      @include span-columns(12);
    }

    section
    {
      @include span-columns(9);
    }
    aside
    {
     @include span-columns(3);
    }

    footer{
      @include span-columns(12);
    }

    header, aside, footer
    {
      @include omega;
    }

我不确定我是否正确，但由于这是一组非常不具体的 css 规则，因此这是一个很好的做法。如果我必须在另一个上下文中设置其中一个标签的样式，例如 <header>tag 在 <article> 中，使用类应该会毫无问题地覆盖类型选择器。

    .article-header {
    background-color: #eee;
    @include span-columns(12);
    }

例如

但是，我不确定这是不是正确的方法，我听说过 BEM 方法，但我可以同时使用这两种方法，以获得良好的可扩展基础。

但是我的 css 应该有多少 BEMed 呢？

我应该先使用标签选择器，用于我的主要布局，然后使用 BEM 样式类进行样式设置？或者只是完全进入 BEM 并在任何地方使用类？

    <header class="main-header">
     <h1 class="main-header__title"><a href="/">My fabulous blog</a></h1>
     <nav class="main-header__nav">
      <ul class="main-header__links">
       <li class="main-header__item"><a href="#">Page one</a></li>
       <li class="main-header__item"><a href="#">Page two</a></li>
      </ul>
     </nav>
    </header>

scss:

    main-header {
      &__title {
      ...
      }
      &__nav {
      ...
      }
      &__links {
      ...
      }
      &__items {
      ...
      }

    }

还有

    <body class="body">
    [...]
    <header class="header">
    [...]
    </header>
    <section class="last-articles">
        <h1 class="last-articles__title">Latest articles</h1>
        <article class="article">
          <h1 class="article__title">Title</h1>
          <p class="article__p">I like turtles</p>
          <p class="article__p">But I also liek potatoes.</p>
          <p class="article__p">But I don't like them both in the same dish.</p>
          <p class="article__p">Except in soup.</p>

        </article>

和（scss）

    .body{
    @include outer-container;
    }
    .header
    {
    @include span-columns(12);
    }
    .last-articles
    {
      @include span-columns(9);
      &__title {

      }
    }
    .article
    {
      &__title{

      }
      &__p{

      }
    }

或者只是：

还有

    <body>
    [...]
    <header>
    [...]
    </header>
    <section class="last-articles">
        <h1 class="last-articles__title">Latest articles</h1>
        <article class="article">
          <h1 class="article__title">Title</h1>
          <p class="article__p">I like turtles</p>
          <p class="article__p">But I also liek potatoes.</p>
          <p class="article__p">But I don't like them both in the same dish.</p>
          <p class="article__p">Except in soup.</p>

        </article>

和（scss）

    body{
    @include outer-container;
    }
    header
    {
    @include span-columns(12);
    }
    .last-articles
    {
      @include span-columns(9);
      &__title {

      }
    }
    .article
    {
      &__title{

      }
      &__p{

      }
    }

我知道这看起来像是一个特别基于意见的问题，我可能会对此投反对票，但我认为这更多的是了解 Bourbon/Neat 和 BEM 的工作原理以及代码的可读性、可重用性和性能如何优化。

【问题讨论】：

标签： css html bourbon neat bem

【解决方案1】：

只使用类选择器，它会让你的代码更具可读性。

【讨论】：

【解决方案2】：

我还建议使用类来满足您的大部分样式需求。这样做可以在特异性方面创造一个公平的竞争环境，并提高样式的可重用性和可移植性。

Bourbon 和 Neat 只是帮助您更有效地编写 Sass 的库；他们不应该强迫你走上特定的架构路径。 BEM 是一种组织类和提高其他开发人员清晰度的好方法。语义 HTML 完全是关于 content 的语义，但不要让它妨碍代码的清晰性。我建议正确标记内容以以机器可读的方式表示它（即带有标题元素的标记标题、带有列表元素的列表、header 中的标题等）并使用类将样式注入该内容。但两者不一定需要通知对方。

【讨论】：