css - Bourbon 整洁和语义化的 HTML5，BEM 呢？-6ren

css - Bourbon 整洁和语义化的 HTML5，BEM 呢？

转载作者：行者123 更新时间：2023-11-28 05:09:16

25

4

我正在尝试写一个非常简约的博客，作为重新学习 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> <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>

CSS:

    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 - Bourbon 整洁和语义化的 HTML5，BEM 呢？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39659796/

25

4

0

文章推荐： javascript - 如何将基于输入键的事件分配给

中选定的

元素

文章推荐： jquery - Metro UI CSS 响应式

文章推荐： jquery - 使用 jQuery 和 css3 水平滑动面板

bem - 我想知道 rscss 和 bem 的区别
我不明白 RSCSS 和 BEM 之间的区别。有人说 RSCSS，有人说 BEM。请告诉我两者的区别最佳答案 RSCSS 只是 BEM 的扩展，加上创建它的团队的一些额外想法和经验。例如 RSC
gruntjs - stylelint-selector-bem-pattern BEM linter 不起作用
在 grunt 文件中 stylelint: { all: ['app/styles/**/*.scss'] }, .stylelintrc { "plugins": [
css - 如何使用 stylelint 和 stylelint-selector-bem-pattern 来 lint BEM 风格？
我正在尝试使用 stylelint 对 BEM 样式进行 lint和 stylelint-selector-bem-pattern plugin但无法让它工作。我的配置如下: 节点:5.11.0 g
HTML BEM 命名约定
我正在学习 HTML BEM (CSS) 架构，即使在观看了一些 youtube 视频后也不太了解。你们中的任何人都可以查看我的一段代码以查看我的类命名是否正确吗？
css - BEM - 在哪里包含特定页面的修饰符？
我正在尝试使用 BEM 命名约定，并且在决定在何处包含特定页面的修饰符时遇到了一些困难。例如，假设我有一个橙色按钮: Button A 我的元素有 3 个不同的页面: - pageA.html -
BEM、层叠样式和 Classitis？
我正在尝试返回到 Web 的前端编码。上一次写 CSS 是在 10 年前，那时候有一种病叫分类炎 .我对 classitis 的理解可能是错误的，但我认为不要在您的 HTML 文档中放置过多的 CS
css - BEM:将修饰符添加到已经存在的修饰符
在使用 BEM 时，我曾被简单的场景搞糊涂过。示例中有一个基本按钮: .button { // styles for button } 及其具有更具体样式的修饰符: .button.butto
html - BEM CSS类命名
Closed. This question is opinion-based。它当前不接受答案。
css - 试图理解 BEM
所以我试图理解 BEM 命名结构。所以假设我有以下 html {{team.name}} {{team.score}}
css - BEM 通用样式
在整个站点中定义通用非 block 特定样式的最佳方法是什么？例如: html foo bar 萨斯/CSS .intro__text { } .profile__text
css - BEM 和单选器
这是一个理论问题，但它现在困扰了我几个小时。我正在学习 BEM，到目前为止它很棒，但我遇到了问题。假设我有这段代码: Blah Generated from the CMS 如何定位 p
CSS BEM 子标签选择器？
使用 CSS BEM 方法... 假设我有一些 HTML，像这样(这只是为这个问题编写的示例 HTML): Text. Text. Text. Text.
CSS BEM，修饰符的字符..？
不知道哪个是官方网站，我找到了getbem.com和 en.bem.info . 有人建议使用 -- 作为修饰符(Naming): CSS class is formed as block’s or
css - BEM 与媒体查询
我有一个关于 BEM 中通用 block (例如 .button)与媒体查询样式的问题。 BEM 中的 block (如文档所述)应该具有适用于网站上所有元素的通用样式，假设我有一个 block :
html - BEM 与全局重置
我最近开始使用 BEM 来编写可重用的 CSS 组件。在BEM documentation和其他网站，我发现由于显而易见的原因，不鼓励对标签元素进行全局重置。但是，当我查看基于 BEM 的网站(包括
css - BEM 命名问题
最近我开始在我的元素中使用 BEM 来组织 CSS，但现在我已经到了这样的 html: TITLE SUBTITLE 由于我对 SMACSS
html - BEM 会强制您创建不必要的元素吗？
... 例如，我将它放在 header 中，它不依赖于 header block 。为了使其对 BEM 友好，我倾向于这样做: ... 这是处理 BEM 的
Css bem 嵌套block命名
HTML 布局 social icon here social icon here social icon here social icon
css - BEM 多类选择器
我正在尝试遵循 BEM 命名约定，但我不确定如何实现以下内容:我有一个“工具提示” block ，应该使用不同的主题设置样式。假设我应用了一个“默认”主题。工具提示可以放置在不同位置的元素周围，这
css - BEM:列出元素和样式？
我是 BEM 的新手，正在处理示例模板: HTML Site branding link link

首页

博学

6Ren·AI

商城

css - Bourbon 整洁和语义化的 HTML5，BEM 呢？